/*!
Theme Name: 89theme
Theme URI: https://89sound.art
Author: BANK / Graphic Design Today
Author URI: https://banktm.de
Description: 89 Theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tachyons
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

tachyons is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/


@font-face {
  font-family: 'Oracle Book';
  src: url('webfont/ABCOracle-Book.otf') format('opentype'),
    url('webfont/ABCOracle-Book.woff') format('woff'),
    url('webfont/ABCOracle-Book.woff2') format('woff2');

}


@font-face {
  font-family: 'Oracle Book Italic';
  src: url('webfont/ABCOracle-BookItalic.otf') format('opentype'),
    url('webfont/ABCOracle-BookItalic.woff') format('woff'),
    url('webfont/ABCOracle-BookItalic.woff2') format('woff2');
  font-style: italic;
}

@font-face {
  font-family: 'OPS Facitype';
  src: url('webfont/OPSFacitype-Regular.otf') format('opentype'),
    url('webfont/OPSFacitype-Regular.woff') format('woff'),
    url('webfont/OPSFacitype-Regular.woff2') format('woff2');
}

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
}

p {
  /* margin-top: 0; */
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

a {
  color: black;
  text-decoration: none;
}

/************ LEFT ************/
.left p img {
  width: 100%;
}


/************ RIGHT ************/
.top-right {
  top: 4rem;
}

.section{
  scroll-margin-top: 4em;
}

p img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}




/************ TYPE SETTINGS ************/
.f-body {
  font-family: 'Oracle Book';
  -webkit-font-smoothing: antialiased;
  font-weight: normal;
  font-size: 1.2rem;
  line-height: 1.5rem;
  letter-spacing: -.005rem;
}

.f-body p{
  margin-top: 0;
}

.f-body ul {
  list-style: none; 
  padding-left: 0rem;     
}

.f-body ul li {
  position: relative; 
  padding-left: 1.5rem;  
  font-family: Arial, sans-serif;    
}

.f-body ul li::before {
  content: "◦";
  position: absolute;
  font-size: 2.5em;
  line-height: 1em;
  left: 0;
  top: -.27em;
  font-family: Arial, sans-serif; 
}

.f-body a {
  text-decoration: underline;
}

h1,
h2,
h3,
.menu li,
.f-manifesto,
.f-manifesto-h {
  font-family: 'OPS Facitype';
  -webkit-font-smoothing: antialiased;
  font-weight: normal;
}

h1,
h2,
h3,
.f-manifesto-h {
  text-align: center;
}

.menu li,
h1,
.f-manifesto-h {
  font-size: 1.6rem;
  line-height: 1.7rem;
}


h2,
h3,
.f-manifesto {
  font-size: 1.2rem;
  line-height: 1.4rem;
}

h2, h3{
  margin: 0 0 .4rem 0;
}



/************ MENU ************/

nav .menu-about a.active{
  background-image: url('/wp-content/uploads/2025/03/89_07-detail-black-transparent-02.png');
  background-size: contain;
  background-position: center;
}

nav .menu-program a.active{
  background-image: url('/wp-content/uploads/2025/03/89_07-detail-black-transparent-03.png');
  background-size: contain;
  background-position: center;
}

nav .menu-community a.active{
  background-image: url('/wp-content/uploads/2025/03/89-detail-08-W1200.png');
  background-size: cover;
}

nav .menu-apply a.active {
  background-image: url('/wp-content/uploads/2025/03/89-detail-04-W1200-2.png');
  background-size: contain;
  background-position: center;
}


/************ COLOR ************/
.bg-lila {
  background-color: #6100ff;
}

.bg-grau {
  background-color: #e3e3e3;
}

.f-manifesto,
.f-manifesto-h {
  color: #6100ff;
}

/************ REVERSE SCROLLING ************/
.scroll-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.left,
.right {
  /* flex: 1; */
  overflow-y: auto;
  height: 100%;
  scrollbar-width: none;
  /* Hide scrollbar (optional) */
  -ms-overflow-style: none;
  /* display: flex; */
  flex-direction: column;
}

/* Hide default scrollbar for WebKit browsers */
.scroll-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Hide scrollbars for WebKit browsers */
.left::-webkit-scrollbar,
.right::-webkit-scrollbar {
  display: none;
}



/************ Navigation Mobile ************/
#left {
  transition: top 0.4s ease;
}
.at-top {
  top: 3em;
}
.at-bottom {
  top: calc((var(--vh, 1vh) * 100) - 1em - 50px);
/* 100px is approximate height of the box */
}


/************ RESPONSIVE ************/
/* Small Screens (Above 30em ~ 480px) */
@media screen and (min-width: 30em) {

  .menu li,
  h1,
  .f-manifesto-h {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }

  .f-manifesto {
    font-size: 1.6rem;
    line-height: 1.8rem;
  }
  .top-right {
    top: 5rem;
  }
.at-top {
  top: 4em;
}
.at-bottom {
  top: calc(100vh - 1em - 50px);
}

}

/* Medium Screens (Above 45em ~ 720px) */
@media screen and (min-width: 45em) {

  .menu li,
  h1,
  .f-manifesto-h {
    font-size: 3.2rem;
    line-height: 3.5rem;
  }

  .f-manifesto {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
  .top-right {
    top: 8rem;
  }
  .section{
    scroll-margin-top: 7em;
  }
  
}

/* Large Screens (Above 60em ~ 960px) */
@media screen and (min-width: 60em) {

  .menu li,
  h1, .f-manifesto-h  {
    font-size: 2.4rem;
    line-height: 2.6rem;
  }
  .f-manifesto {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }

  .top-right {
    top: 6.5rem;
  }
  

  .menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 60vw;
  }

  #left {
    transition: none;
  }

  .at-top, .at-bottom {
    top: 0em;
  }
.menu-about a:hover {
    background-image: url('/wp-content/uploads/2025/03/89_07-detail-black-transparent-02.png');
    background-size: contain;
    background-position: center;
  }
  
.menu-program a:hover {
    background-image: url('/wp-content/uploads/2025/03/89_07-detail-black-transparent-03.png');
    background-size: contain;
    background-position: center;
  }
  
.menu-community a:hover {
    background-image: url('/wp-content/uploads/2025/03/89-detail-08-W1200.png');
    background-size: cover;
  }
  
.menu-apply a:hover {
    background-image: url('/wp-content/uploads/2025/03/89-detail-04-W1200-2.png');
    background-size: contain;
    background-position: center;
  }

}

/* XL Screens (Above 90em ~ 1440px) */
@media screen and (min-width: 90em) {
  .f-body {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }
  .menu li,
  h1 {
    font-size: 3.2rem;
    line-height: 3.5rem;
  }

  h2,
  h3 {
    font-size: 1.5rem;
    margin: 0 0 .7rem 0;

  }
  .f-manifesto
 {
    font-size: 2.2rem;
    line-height: 2.6rem;
  }

  .top-right {
    top: 8rem;
  }
  

}