@font-face {
   font-family: "goldbill";
   src: url("fonts/Goldbill-XLLight.ttf") format("truetype"),
      url("fonts/AceSans-FREE.otf") format("opentype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "uptown";
   src: url("fonts/Uptown__.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "junesn";
   src: url("fonts/JUNESN__ 2.woff2") format("woff2"),
      url("fonts/JUNESN__ 2.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}

body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

div {
   height: 95vh;
}

.languagebuttons {
   height: fit-content;
   width: 95vw;
   position: absolute;
   display: flex;
   justify-content: right;
}

.languagebuttons button {
   text-decoration: none;
   border: none;
   color: white;
   background-color: transparent;
   font-size: 2vh;
   text-align: center;
   font-family: "goldbill";
}

.languagebuttons button:hover {
   color: rgb(0, 255, 115);
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
   font-family: "uptown", Arial, sans-serif;
}

h1 {
   font-family: "junesn", Arial, sans-serif;
   font-size: 17vw;
   text-align: left;
   margin: 5% 5% -23% -10%;
   padding: 0% 5% 6% 15%;
   /* color: rgb(0, 255, 115); */
   /* background-color: black; */
   line-height: 1.5;
}

.head img {
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
   transform: scale(1);
   animation: flicker 5s infinite;
}

h2 {
   font-size: 7vw;
   color: rgb(0, 255, 115);
   margin-left: 2vh;
   text-align: left;
}

h3 {
   font-size: 8vw;
   color: rgb(255, 15, 180);
   text-align: left;
}

p {
   font-family: "goldbill", Arial, sans-serif;
   text-transform: uppercase;
   font-size: 2vh;
}

a {
   text-decoration: none;
}

.green {
   color: rgb(0, 255, 115);
}

.head {
   /* background: url("img/jozzeestaiscontrast.jpeg") center/cover no-repeat; */
   background: url("img/milky-way-4920051.jpg") center/cover no-repeat;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 5vh;
}

.head img {
   margin-bottom: -15vw;
}

.change {
   background-color: rgb(0, 255, 115);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: fit-content;
}

.changetop {
   display: flex;
   flex-direction: column;
   text-align: center;
   height: fit-content;
}

.change h3,
span {
   color: black;
   line-height: 100%;
   text-align: center;
}

.change h3 span {
   color: rgb(255, 15, 180);
}

.change p {
   color: black;
   margin: 0 15vw;
}

.changebuttons {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 30vh;
   width: 100vw;
   gap: 10vw;
}

.changebuttons a {
   background: black;
   color: rgb(255, 15, 180);
   font-size: 3vh;
   width: 18vh;
   line-height: 6vh;
   text-align: center;
}

.changebuttons a:hover {
   background: rgb(255, 15, 180);
   color: black;
   transition: all 0.3s ease;
}

.tunes {
   background: url("img/jozzeesouly.jpg") 40% center/cover no-repeat;
   display: flex;
   flex-direction: row;
   padding: 5vw;
}

.tunesleft {
   display: flex;
   flex-direction: column;
   height: 100vh;
   width: 50vw;
   text-align: right;
}

.buttonandtitle {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 2vh;
   margin: 20vh 2vw 0 auto;
   max-width: 50vw;
   height: fit-content;
}

.buttonandtitle h3 {
   font-size: 8vw;
   text-align: right;
   margin: 0;
   line-height: 90%;
}

.buttonandtitle a {
   background: rgb(255, 15, 180);
   color: white;
   font-size: 3vh;
   width: 20vh;
   padding: 2vw;
   text-align: center;
   align-self: center;
}

.buttonandtitle a:hover {
   background: rgb(0, 255, 115);
   color: black;
   transition: all 0.3s ease;
}

.tunesright {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   height: 100%;
   width: 50vw;
}

.tunesright p {
   color: white;
   text-align: left;
   margin-left: 3vw;
}

.contact {
   background-color: rgb(255, 15, 180);
   display: flex;
   flex-direction: column;
   height: fit-content;
   gap: 10vh;
   padding: 5vw;
}

.contact h2 {
   font-size: 7vw;
   line-height: 1.3;
   color: rgb(0, 255, 115);
   text-align: left;
   align-self: flex-start;
}

.contact a {
   background-color: rgb(0, 255, 115);
   color: black;
   font-size: 3vh;
   /* padding: 2vw; */
   width: 30vh;
   text-align: center;
   align-self: center;
}

.contact a:hover {
   background-color: black;
   color: white;
   transition: all 0.3s ease;
}

.lookup {
   display: flex;
   align-self: flex-end;
   width: 50vh;
   height: auto;
   margin: 0 0 -5vh 0;

   overflow: hidden;
}

footer {
   background: black;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   height: 10vh;
   padding-left: 5vw;
   padding-right: 5vw;
}

footer a {
   /* border: 2px solid red; */

   color: white;
   display: block;
   font-size: 2vw;
   line-height: 3vw;
   text-align: center;

   text-transform: uppercase;
   font-family: "goldbill", Helvetica, sans-serif;
}

footer a:hover {
   color: rgb(0, 255, 115);
}

footer p {
   color: white;
   font-size: 2vw;
   line-height: 3vw;
   text-align: center;
   margin-left: 5vw;
   font-family: "goldbill", Helvetica, sans-serif;
}
@keyframes flicker {
   0%,
   19%,
   22%,
   62%,
   64%,
   70%,
   100% {
      opacity: 0.99;
   }
   20%,
   21%,
   63%,
   65%,
   69.9% {
      opacity: 0.4;
      text-shadow: none;
   }
}

.lang-section {
   display: none;
}
.active {
   display: block;
}