/*//////////////////////////////////////////////////////////////////////////////.    FONT    */ 
@font-face {
    font-family: Vaud;
    src: url("fonts/VaudBold.otf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Vaud;
    src: url("fonts/VaudMed.otf");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: Vaud;
    src: url("fonts/VaudLight.otf");
    font-weight: 200;
    font-style: normal;
}

/*//////////////////////////////////////////////////////////////////////////////.    FONT    */ 


img {
  max-width: 80%;
  vertical-align: top;
}

body {

	font-family: Vaud;
	font-weight: 200;
	font-size: 1.3rem;
	line-height: 1.7rem;
	margin-left: 25px;
	margin-right: 20px;
	
}

h1{
	font-family: Vaud;
	font-weight: 300;
	font-size: 3rem;
	line-height: 3.2rem;
	margin-top: 0;

}

h2{
	font-family: Vaud;
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 0.5rem;
	text-decoration: underline;

}

h3 {

  font-family: Vaud;
  font-weight: 200;
  font-size: 1.3rem;
  line-height: 1.7rem;
  margin-right: 20px;
  width: 85%;
  text-align: justify;
  text-justify: inter-word;
   
}

/*//////////////////////////////////////////////////////////////////////////////.    MENU    */
a:hover{
  cursor: zoom-in; 
  color: red;

}

a{
  color: black;

}

.menu{
margin-right: 5px;
border-style: solid;
text-decoration: none;
padding: 15px; 
border-radius: 10px;

}



.an{
margin-right: 20px;
border-style: solid;
text-decoration: none;
padding: 15px; 
border-radius: 10px;

}

.experiment{
margin-left: 700px;
border-style: solid;
text-decoration: none;
padding: 15px; 
border-radius: 10px;

}






/*//////////////////////////////////////////////////////////////////////////////.    IMAGE GALLERY    */ 

div.gallery {
  margin: 5px;
  float: left;
  width: 400px;

}


div.gallery img {
  width: 200%;
  height: 200%;

}



/*//////////////////////////////////////////////////////////////////////////////.    TOP BUTTON    */

#myBtn {
  display: none; 
  position: fixed; 
  bottom: 20px; 
  right: 30px; 
  z-index: 99; 
  border-style: solid; 
  border-color: black;
  border-width: 3px;
  outline: none; 
  background-color: white; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  border-radius: 10px; 
  font-size: 20px; 

}

#myBtn:hover {
  background-color: white;
  border-color: red;
  color:red;

}


 /*//////////////////////////////////////////////////////////////////////////////.    CHART    */ 

* {box-sizing:border-box}


.chartOne {
  width: 50%; 
  background-color: white; 
  
}

.skills {
  text-align: right; 
  padding-right: 5px;
  padding-top: 8px; 
  padding-bottom: 5px; 
  color: black; 
  font-size: 10px;
  
}

.rubicube {width: 87%; background-color:#ffeac5;} 
.red {width: 93.75%; background-color:#fcb8b9;} 
.letters {width: 31.25%; background-color:#cdf6d8;} 
.d {width: 12.5%; background-color:#eed7ff;} 
.flash {width: 12.5%; background-color:#cdfaff;}



.rubi{
  color:#ffeac5;
}

.redd{
  color:#fcb8b9;
}

.let{
  color:#cdf6d8;
}

.form{
  color:#eed7ff;
}

.flashh{
  color:#cdfaff;
}

 /*//////////////////////////////////////////////////////////////////////////////.    ZOOM   */ 



.click-zoom input[type=checkbox] {
  display: none

}

.click-zoom img {
  margin-bottom: 30px;
  margin-top: 30px;
  margin-left: 300px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
  height:auto;
  width: 200px;

}

.click-zoom input[type=checkbox]:checked~img {
  transform: scale(4);
  cursor: zoom-out;

}

/*//////////////////////////////////////////////////////////////////////////////.    FLY  */ 

.flier {
  pointer-events: none;
}

.flier > * {
animation: fly 70s linear infinite;
pointer-events: none !important;
top: 0;
left: 0;
transform: translateX(-120%) translateY(-120%) rotateZ(0);
position: fixed;
animation-delay: 5s;
z-index: 99999;
width: 20%;
height: auto;

}



@keyframes fly {

  98.001%, 0% {
                display: block;
    transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
  }

  15% 18% {
    transform: translateX(-200%) translateY(-100%) rotateZ(180deg)
  }

  15.001%, 18% {
    transform: translateX(-200%) translateY(-30%) rotateZ(0deg)
  }

  40% {
    transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
  }

  40.001%, 43% {
    transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
  }

  65% {
    transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
  }

  65.001%, 68% {
    transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
  }

  95% {
    transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
  }
}


@media screen and (max-width: 1200px) {
   .menu{
margin-right: 5px;
border-style: solid;
text-decoration: none;
padding: 8px; 
border-radius: 10px;

}

   body {
  font-family: Vaud;
  font-weight: 200;
  font-size: 1rem;
  line-height: 1.7rem;
  margin-left: 25px;
  margin-right: 20px;
  
}

}