*{padding: 0; 
  margin: 0;
  list-style: none;
  text-decoration: none;
}  

body img{width: 100%;
         height: 100%;
         position: fixed;
}

.loader{height: 100%;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 7000;
        position: fixed;
        background-color: black;
}

svg path,
svg rect{
  fill: white;
}

html {cursor: url("data:image/svg+xml,%3Csvg height='6' width='6' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' fill='%23eee' r='4'/%3E%3C/svg%3E") 3 3, auto;}

.cursor {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--height);
  transform: translate(calc(var(--x) - var(--width) / 2), calc(var(--y) - var(--height) / 2));
  /* transition-duration: 125ms;
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-property: width, height, transform; */
  transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1),
              150ms height cubic-bezier(0.39, 0.575, 0.565, 1),
              150ms transform cubic-bezier(0.39, 0.575, 0.565, 1);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
@media (pointer: fine) {
  .cursor {
    display: block;
  }
}
.cursor::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius);
  border: 2px solid grey;
  opacity: var(--scale);
  -webkit-transform: scale(var(--scale));
          transform: scale(var(--scale));
  transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1),
              300ms transform cubic-bezier(0.39, 0.575, 0.565, 1),
              150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1);
}

html:not(html:hover) .cursor::after {
  opacity: 0;
  transform: scale(0);
}


header{height: 9.5%;
       width: 100%;
       margin: 0 auto;
       display: flex;
       align-items: center;
       justify-content: center;
       position: absolute;
       color: white;      
}

#drop{position: fixed;
      width: 30px;
      right: 20px;
      cursor: pointer;
      padding: 10px;
      top: 20px;
      z-index: 1000;
}

#drop:hover>p{background-color: grey;}

#drop p{transition: all 0.5s;
        height: 3px;
        background-color: white;
        margin-top: 4px;
}

.showNav{right:0!important;}

.rotate1{transform: rotate(45deg) translate(4px);}
.rotate2{transform: rotate(-45deg) translate(5px);}

nav{height: 100%;
    width: 25%;
    position: fixed;
    top: 0;
    right: -50%;
    transition: all 1s;
    font-size: 2rem;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 700;
    z-index: 500;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0,0,0,0.8);
}
    
nav ul{display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       margin: 0 auto;
       width: 100%;
       cursor: pointer;
} 

nav ul li{margin: 2%;}

nav ul li a:hover{background-color: grey;
                  transition: all 0.5s;
}

nav ul li a:link,nav ul li a:visited{color: white;}

#bt{cursor: pointer;
    position: fixed;
    right: 4%;
    bottom: 6%;
    z-index: 4000;
}

#bt img{width: 2%;
        height: 2%;
        display: block;}

#mainbio{width: 90%;
        top: 9.5%;
        position: absolute;
        left: 3%;
}

#title{width: 100%;
       color: white;
       font-size: 5rem;
       font-weight: 900;
       font-family: 'Libre Franklin', sans-serif;
}

#bigfather{width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#father1{width: 40%;
    height: auto;
}

#father1 img{width: 100%;
          display: block;
          position: relative;
}

#father2{width: 52%;
    margin: 0 auto;
    font-weight: 400;
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1.3125rem;
    color: white;
    text-align: left;
}

#ghost{display: none;}

#projects{width: 100%;
          position: absolute;
          top: 91.5%;
          margin-top: 10%;
}

#title2{width: 100%;
       text-align: center;
       color: white;
       font-size: 3rem;
       font-weight: 700;
       font-family: 'Libre Franklin', sans-serif;
       margin-bottom: 5%;
}



#prog{width: 80%; 
      margin: 0 auto;
      height: 80%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
}

.demo{width: 30%;
      height: 38%;
      margin: 2%;
}

.demo img{width: 100%;
          display: block;
          position: relative;
}

#title3{width: 100%;
       text-align: center;
       color: white;
       font-size: 3rem;
       font-weight: 700;
       font-family: 'Libre Franklin', sans-serif;
       margin-bottom: 2.5%;
}

#skills{width: 100%;
        position: absolute;
        top: 180%;
        margin-top: 12%;
}

.text{width: 100%;
      text-align: center;
      font-size: 1.3125rem;
      font-weight: 400;
      font-family: 'Libre Franklin', sans-serif;
      color: white;
}

#contacts{width: 100%;
        position: absolute;
        top: 250%;
        margin-top: 20%;
        margin-bottom: 30%;
}

#title4{width: 100%;
       text-align: center;
       color: white;
       font-size: 3rem;
       font-weight: 700;
       font-family: 'Libre Franklin', sans-serif;
       margin-bottom: 2.5%;
}

#box1{margin: 0 auto;
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
}

.social{width: 7%;
        margin: 2%;
        cursor: pointer;}

.social img{width: 100%;
    display: block;
    position: relative;
}

#box2{margin: 0 auto;
      width: 30%;
      height: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
}

.ao{font-size: 1.2rem;
    font-weight: 400;
    font-family: 'Libre Franklin', sans-serif;
    text-align: center;   
    cursor: pointer;
    margin: 2%;
    color: white;
}

.ao a:link,.ao a:visited{color: white;}

footer{margin: 0 auto;
       width: 100%;
       top: 370%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      text-align: center;
      color: white;
      font-size: 0.6rem; 
      font-weight: 400;
      font-family: 'Libre Franklin', sans-serif;
}


/*RESPONSIVE IPAD*/

@media only screen and (max-width:1024px) {
    
    #drop p,#drop:hover>p{background-color: white;}
    
    nav{width: 100%;
    right: -100%;}
    
    #bt{right: 9%;
        bottom: 5%;}
    
    #bt img{width: 5%;
        height: 2%;
        display: block;}
    
    #mainbio{width: 100%;
             top: 9.5%;
             left: 0;}

    #title{width: 90%;
       font-size: 4rem;
       margin-bottom: 4%;
       margin-left: 3%;}

    #bigfather{width: 90%;
           margin-left: 3%;}
    
    #father1{width: 33%;
    height: auto;}

    #father2{width: 50%;
    font-size: 1.1rem;
    margin-left: 3%;}
    
    #ghost{width: 100%;
           position: absolute;
           display: flex;
           justify-content: center;
           align-items: center;
           height: 30%;
           margin-top: 70%;
    }
    
    #projects{width: 100%;
          position: absolute;
          top: 95%;
          margin-top: 10%;
    }

    #title2{width: 100%;
       text-align: center;
       color: white;
       font-size: 3rem;
       font-weight: 700;
       font-family: 'Libre Franklin', sans-serif;
       margin-bottom: 5%;
       margin-top: 0%; 
    }

    #skills{top: 140%;}

    .text{font-size: 1.1rem;}
    
    #contacts{top: 170%;}

    #box1{margin: 0 auto;
      width: 60%;
      display: flex;
      justify-content: center;
      align-items: center; 
     }

    .social{width: 9%;}

    .social img{width: 100%;
    display: block;
    position: relative;
    }

    #box2{width: 50%;}

    .ao{font-size: 1.1rem;}
    
    footer{top: 220%;
       font-size: 0.55rem;}
    
}


@media only screen and (max-width:1024px) and (orientation: landscape) {
    
    #bt{right: 6%;
        bottom: 5%;}
    
    #bt img{width: 3%;
        height: 2%;
        display: block;}
    
    /*#projects{
          top: 95%;
          margin-top: 10%;
    }*/
    
    #skills{top: 170%;}
    
    #contacts{top: 200%;}
    
    .social{width: 7%;}
    
    footer{top: 280%;}
    
}


/*RESPONSIVE IPHONE*/

@media only screen and (max-width:667px) {
    
    nav{font-size: 1.5rem;}
    
    #drop{width: 7%;
      right: 8px;
      padding: 5px;
      top: 8px;}
    
    #drop p{transition: all 0.5s;
        height: 3px;
        background-color: white;
        margin-top: 3px;
    }
    
    #bt{right: 10%;
        bottom: 5%;}
    
    #bt img{width: 7%;
        height: 2%;}

    #title{font-size: 2.5rem;}
    
    #father1{width: 38%;}

    #father2{font-size: 0.6rem;}
    
    #ghost{height: 10%;
           margin-top: 100%;}
    
    #projects{top: 85%;
          margin-top: -10%;}

    #title2{font-size: 1.5rem;
       margin-bottom: 5%;
       margin-top: 10%;}

    #prog{width: 100%;
      flex-wrap: wrap;}

    .demo{width: 31.5%;}
    
    #skills{top: 130%;}
    
    #title3{font-size: 1.5rem;}

    .text{font-size: 0.6rem;}
    
    #contacts{top: 160%;}
    
    #title4{font-size: 1.5rem;}

    .social{width: 9%; margin: 5%;}

    #box2{width: 70%;}

    .ao{font-size: 0.6rem; margin: 5%;}
    
    footer{top: 197%;
       font-size: 0.3rem;}
    
}

@media only screen and (max-width:667px) and (orientation: landscape) {
    
    #drop{width: 4%;}
    
    #drop p{margin-top: 4px;}
    
    #bt{right: 6%;
        bottom: 7%;}
    
    #bt img{width: 4%;
        height: 4%;}
    
    #ghost{height: 10%;
           margin-top: 70%;}
    
    #projects{top: 70%;
          margin-top: 36%;}

    #skills{top: 240%;}
    
    #contacts{top: 270%;}
    
    footer{top: 380%;
       font-size: 0.3rem;}

}