@font-face {
    font-family: 'RF Dewi';
     src: local('RF Dewi Expanded Ultrabold'), local('RF-Dewi-Expanded-Ultrabold'),
         url('RFDewiExpanded-Ultrabold.woff') format('woff'),
         url('RFDewiExpanded-Ultrabold.ttf') format('truetype');
     font-weight: bolder;

}

@font-face {
  font-family: 'Newake';
  src: url('Shanti3/NewakeFont-Demo.otf');
}


body {
  background-color: #00040f;
}


nav {
  background: transparent;
  grid-area: nav;


}
nav a{
  color:white;
  font-family: 'Jost', sans-serif;
  text-decoration: none;
font-size: 17px;
position: relative;
top: 15%;

}

nav h1{
  color:white;
  font-family: 'Jost', sans-serif;
position: relative;
float: left;
font-size: 10px;
}



footer a{
 text-decoration: none;
 float: left;
 color: white;
 position: relative;
 top:8px;
 margin-left: 7%;
 font-size: 10px;

}

footer a:nth-child(2){
  float: right;
  margin-right: 7%;
}
footer {
  grid-area: footer;
  color:white;
  background-color: #060d24;
  font-family: 'RF Dewi';
  border-radius: 8px;
  text-align: center;

}

.links{
  grid-area: links;
}


#content1 {
  background: linear-gradient(
        to left,
        rgba(0,0,0, 0),
        rgba(0,0,0, 1) ),
        url(neuesbild.jpg);

  background-size: 110%;
  grid-area: content1;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
border-radius:8px;

}


#content2 {
  grid-area: content2;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  background: linear-gradient(
       to left,
       rgba(0,0,0, 0),
       rgba(0,0,0, 1)
     ),url(smokeneuneu1.jpg);
     background-size: 110%;
     border-radius: 8px;

}

#content3 {
  grid-area: content3;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  background: linear-gradient(
        to left,
        rgba(0,0,0, 0),
        rgba(0,0,0, 100)
      ),url(essenneu1111.jpg);background-size: 100%;
      border-radius: 8px;
}


@media only screen and (max-width: 750px) {
  .container {
    height: 98vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.23fr 1.2fr 1.2fr 1.2fr 0.15fr;
    grid-template-areas:
      "nav"
      "content1"
      "content2"
      "content3"
      "footer";

    grid-gap: 6px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  }

  

#content1 a:nth-child(1),  #content2 a:nth-child(1) ,#content3 a:nth-child(1) {
  text-decoration: none;
  font-family: 'RF Dewi';
  font-size: 2.5rem;
  letter-spacing: -2px;
  font-weight: bolder;
   text-decoration: none;
   writing-mode: tb-rl;
  transform: rotate(-180deg);
   float: left;
   position: relative;
   top: 25px;
   -webkit-text-stroke: 1px rgb(230, 230, 230);
   -webkit-text-fill-color: rgb(241, 241, 241);
    left:-7px;
    text-shadow: 0px 0px 20px rgb(202, 77, 252);
    filter: blur(0.5px) brightness(1);
}

#content1 a:nth-child(2),  #content2 a:nth-child(2) ,#content3 a:nth-child(2) {

  text-decoration: none;
   -webkit-text-stroke: 1px rgb(202, 77, 252);
   -webkit-text-fill-color: rgb(177, 0, 247);
  font-family: 'RF Dewi';
  font-size: 2.5rem;
  letter-spacing: -2px;
  font-weight: 800;
   text-decoration: none;
   writing-mode: tb-rl;
   float: left;
   position: relative;
   top: 25px;
   left:-15px;
   text-shadow: 0px 0px 20px rgb(202, 77, 252);
   filter: blur(0.5px) brightness(1);
   animation: flicker 2s infinite;
   animation-iteration-count: 5s;
   animation-direction:alternate-reverse;
   padding-right: 70%;
   ;
}



@keyframes flicker {
  0%{filter: blur(0.5px) brightness(1);}
  3%{filter: blur(0.5px) brightness(1);}
  6%{filter: blur(0.5px) brightness(0);}
  7%{filter: blur(0.5px) brightness(1);}
  8%{filter: blur(0.5px) brightness(0);}
  9%{filter: blur(0.5px) brightness(1);}
  10%{filter: blur(0.5px) brightness(1);}
  15%{filter: blur(0.5px) brightness(0);}
  20%{filter: blur(0.5px) brightness(1);}
  40%{filter: blur(0.5px) brightness(1);}
  60%{filter: blur(0.5px) brightness(1);}
  61%{filter: blur(0.5px) brightness(0);}
  80%{filter: blur(0.5px) brightness(1);}
  100%{filter: blur(0.5px) brightness(1);}

  

}

#content3 a:nth-child(1){
  top: 45px;
}
#content3 a:nth-child(2){
  top: 45px;
}



    #nav-toggle {
        position: absolute;
        top: -100px;
    }
     .icon-burger {
        position: relative;
        float: right;
        top: 25%;
    }
   
    .icon-burger .line:nth-child(2) {
       opacity: 0;
     }

:checked ~ .links {
    bottom: 0;
}
 .icon-burger {
    display: block;
}

 :checked ~ .icon-burger .line:nth-child(2) {
    opacity: 0;
}


@media screen and (max-height: 730px){

  #content1 a:nth-child(1),  #content2 a:nth-child(1) ,#content3 a:nth-child(1) {
    font-size: 2.5rem;
  }

  #content1 a:nth-child(2),  #content2 a:nth-child(2) ,#content3 a:nth-child(2) {
    font-size: 2.5rem;
  }

}

@media screen and (max-height: 730px){

  #content1 a:nth-child(1),  #content2 a:nth-child(1) ,#content3 a:nth-child(1) {
    font-size: 2.3rem;
  }

  #content1 a:nth-child(2),  #content2 a:nth-child(2) ,#content3 a:nth-child(2) {
    font-size: 2.3rem;
  }

}

@media screen and (max-height: 670px){

  #content1 a:nth-child(1),  #content2 a:nth-child(1) ,#content3 a:nth-child(1) {
    font-size: 2.2rem;
  }

  #content1 a:nth-child(2),  #content2 a:nth-child(2) ,#content3 a:nth-child(2) {
    font-size: 2.2rem;
  }

}

@media screen and (max-height: 640px){

  #content1 a:nth-child(1),  #content2 a:nth-child(1) ,#content3 a:nth-child(1) {
    font-size: 2rem;
  }

  #content1 a:nth-child(2),  #content2 a:nth-child(2) ,#content3 a:nth-child(2) {
    font-size: 2rem;
  }
}

@media screen and (max-height: 600px){

  #content1 a:nth-child(1),  #content2 a:nth-child(1) ,#content3 a:nth-child(1) {
    font-size: 1.9rem;
  }

  #content1 a:nth-child(2),  #content2 a:nth-child(2) ,#content3 a:nth-child(2) {
    font-size: 1.9rem;
    left: -18px;
  }
}

}

@media only screen and (min-width: 750px) {
  
.container {
  display: grid;
  height: 98vh;
  grid-template-columns: 1fr 1fr 1fr ;
  grid-template-rows: 0.2fr 7fr 1.2fr ;
  grid-template-areas:
    " nav nav nav  "
     " content1 content2 content3  "
    "footer footer footer  ";
  
  grid-gap: 6px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
}



.links{
  display: flex;
}

.links ul{
  margin: 10px;
  bottom:0;
  float: right;
  position: absolute;
  left:0;
}

#nav-toggle {
  display: none;
}
.links img{
  display: none;
}

.links li:nth-child(1){
display: none;
}
.links li:nth-child(2){
  display: none;
  }
  .links li:nth-child(3){
    display: none;
    }
    .links li:nth-child(4){
      display: none;
      }


  
}