@font-face {
  font-family: 'consola';
  src: url(../fonts/consola.woff) format('woff');
  font-style: normal;
}

@font-face{
  font-family: 'fontAwesome';
  src: url(../FontAwesome5/webfonts/fa-regular-400.woff) format('woff');
  font-style: normal;
}


:root{
  --black: rgb(23,23,23);
  --white: white;
  --whiteorange: hsl(40,100%,97%);
  --orange: hsl(40,100%,60%);
}
.dark{
  --black: hsl(40,100%,97%);
  --white: rgb(23,23,23);
  --whiteorange: rgb(23, 23, 23);
}  


html{
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body{
    font-family: 'consola', Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
    background-color: var(--white) ;
    overflow-x: hidden; 
}

hr{
  margin: 0;
  padding: 0;
}



/* --------------------------------Head--------------------------------------------- */



/* ---------------Kopf ohne Navi---------- */
#Kopfbox{
  display: flex;  
  flex-direction: column;
  align-items: center;
  height: 5%;
}

#Kopf{   
  background-color: transparent;  
  margin:0 auto;
  padding: 0;
  width: 100%;
  height: 380px;    
}

.bgroundcolor{
  content: '';
  z-index: -10;
  background: linear-gradient(2deg, rgb(255, 192, 67) 50%, rgba(255,187,51,0.6) 75%, rgba(255,187,51,0.1) 100%);
  position: absolute;
  height: 450px;
  width: 130%;
  border-radius: 50%;
  top: -150px;
  left: -230px;
}

.pageheading{   
  font-size: 3em;
  margin:10px 30px;        
  align-content: center;
  padding-top: 100px;  
  padding-left: 15%;
  padding-right: 30%;  
  text-align: center;
  margin: auto;
}

#Kopf h3{
  text-align: center;
}

/* Responsive Kopf ohne Navi */

@media(max-width:1000px){
  #Kopf{
    height: 300px;
  }
  .bgroundcolor{       
    top: -200px;
    left: -120px;
  }
}

@media(max-width:700px){
  .bgroundcolor{    
    height: 450px;
    width: 130%;    
    top: -280px;
    left: -80px;
  }  
  #Kopf{
    height: 200px;
  }    
  .pageheading{        
    padding-top: 60px;
  }
}

@media (max-width: 450px){
  .bgroundcolor{    
    height: 450px;
    width: 140%;    
    top: -310px;
    left: -80px;
  }  
  #Kopf{
    height: 160px;
  }    
  .pageheading{ 
    font-size: 2em;     
    padding-left:5%;
    padding-right: 40%;
    padding-top: 45px;
  }
}


/* --------------Navigation----------- */

#Fixednav{
  position:fixed;
  z-index: 10;
  top:0;
  width: 100%;  
}

.xbtn{
  position: absolute;
  color:transparent;
  top:0;
  right: 0;
  visibility: hidden;
}

nav{ 
  display: flex;
  float: right;
  
  text-align: left;
  padding-right: 2%;
  
}

nav ul{  
  list-style: none; 
  z-index: 100; 
}

ul li{  
  display: flex;
  flex-direction: column;
  height: 49px;  
} 

nav a{  
  width: 100%;
  font-size: 2.3em;
  color: white;
  text-decoration: none;   
  padding:3px;
    
}

.transition{  
  font-size: 2.3em;
  color: white;
  text-decoration: none;   
  padding:3px;   
}

ul a:hover{
  color: hsl(40,100%,60%);
  transition: ease-in-out .7s; 
}

ul ul{    
  visibility: hidden; 
  opacity: 0;
  transition: visibility 0s linear 0.7s,opacity 0.7s linear;
   
}

ul li:hover ul{
  visibility: visible;   
  opacity: 1;
  transition-delay:0s;
}


/* Halbkreis Menü */
#bgcircle{
  z-index: -5;
  position: absolute; 
  width: 300px;
  height: 300px;  
  right:-20px;
  top:-200px;
  border-radius: 150px;
  margin-right: 2%;  
  background: rgb(0, 0, 0,.8);  
  transition: width ease-in-out .8s, 
              height ease-in-out.8s, 
              right ease-in-out .8s, 
              top ease-in-out .8s,
              border-radius ease-in-out .8s;
}

ul li:hover #bgcircle{
  width: 400px;
  height: 400px;  
  right:-140px;
  top:-140px;  
  border-radius: 200px;
}

.activenav a{
  color: rgb(255, 255, 255,.7);
}

/* Responsive Navi */

@media(max-width:700px){
  .menu{
    margin-top:5px;
  }
  .nav{
    padding-right: 20px;
  }
  .navi a{
    font-size: 1.5em;
  }
  ul li{  
    height: 39px;
  } 
  #bgcircle{    
    width: 200px;
    height: 200px;  
    right:0px;
    top:-140px;
    border-radius: 100px;
  }
  ul li:hover #bgcircle{
    width: 300px;
    height: 300px;  
    right:-115px;
    top:-125px;  
    border-radius: 150px;
  }
  
  .xbtn{
    position: absolute;
    z-index: 200;
    top:12px;
    right:12px;
    font-size: 1.3em;
    color: hsl(40,100%,60%,.6);
    visibility: visible;
    transition: color .5s ease-in-out;
  }
  .xbtn:hover{
    color: transparent;
  } 

  .fa-times {    
    visibility: visible;    
  }
} 


/* --Tag Nacht Button-- */

.themeSwitch{   
  background-color: rgb(23, 23, 23,.8);
  color: white;
  position: absolute;
  display: inline-flex;  
  height: 40px;
  width: 40px;
  margin: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.themeSwitch::before{
  content: '\f186';
  font-family: 'fontAwesome';
  color: white;
  font-size: 1.5em;
  
}
.themeSwitch.active::before{
  content: '\f185'
}


/* Responsive Tag Nacht Button */

@media (max-width:700px){
  .themeSwitch{  
    height: 35px;
    width: 35px; 
    margin: 10px;   
  }
  .themeSwitch::before{
    font-size: 1.2em;
  }
}



/*----------------------------Footer-------------------------------------------------*/
#Footer{
  display: block;
  width: 100%;  
  margin: 3% 0;
}

#Footer p{
  color:rgb(129, 129, 129);
  text-align: center;  
  margin-top: 50px;
}