/*Mobile */
@font-face {
    font-family: Rubik;
    src: url("./assets/Rubik.ttf");
}
@keyframes easeinLoadleft {
    0% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes easeinLoadright {
    0% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes heartBeat {
    0% {
        scale: 1;
    }
    50% {
        scale: 1.1;
        
    } 
    100% {
        scale: 1;
    }
}

* {
    font-family: Rubik;
    color: #554c2d;
    transition: 0.5s;
}

.heartBeat {
    animation: heartBeat 1.0s infinite ;
  
}
.Hide {
    display: none;
}

a {
    margin-left: 5px;
    
    animation: ease-in 2s normal;
}

::-webkit-scrollbar {
    width: 10px;
    opacity: 0;
    background: none;
  }
  
  
  ::-webkit-scrollbar-track {
    background: #B0926A; 
    border-left:solid 1px #000; 

  }
   
  ::-webkit-scrollbar-thumb {
    background: #554c2d; 
    border-radius: 5px;
    border: solid 1px #000;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #4e3232; 
  }


@media screen and (max-width: 768px) {
    body {
        margin: 0%;
        background-color: #FAE7C9;
       }

       header {
        display: flex;
        justify-content: space-between;
        width: 102%; 
        height: 10%;
        background-color: #B0926A;
        border: double 6px  #706233;
        border-top: none;
        padding-left: 10px;
        padding-right: 50px;
        position: fixed;
        transition: 0.6s;
        overflow: hidden;
    }   
    header div h4 {
        border: solid 2px #554c2d;
        padding: 5px;
        border-radius: 5px;
        background-color: #FAE7C9;
        color: #554c2d;
     }
     header div h4:hover {
        background-color: #B0926A;
     }
     
        header h3 {
            font-size: 3dvh;
        }
        header div {
            display: inline-flex;
            font-size: 2dvh;
            margin-right: 6%;
            top: 0;
        }
        .Stickers {
            display: none;
        }
        .Home {
            padding: 15dvh;
            border-bottom: dashed 2px #4e3232;
            height: 100dvh;
            text-align: center;
        }
        .Home .Instructions {
            display: none;
        }
        .Home .Profile {
            border: solid 3px #706233;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            animation: easeinLoadleft 0.5s;
         }
         .Info {
            padding: 4dvh;
            border-bottom: dashed 4px #4e3232;
         }
         
         .Info .child {
            margin-top: 5dvh;
            padding: 10px;
           height: auto;      
           border:solid 4px #554c2d;
           border-top: none;
           border-right: none ;
         }
         .Info .Widgets {
            width: 50dvh;
         }
         .Projects {
            padding: 4dvh;
        }
        
       .Projects .Child {
           padding: 10px;
           height: auto;      
           border:solid 4px #554c2d;
           border-top: none;
           border-right: none ;
       }
        .Projects img {
           float: left;
           width: 10dvh;
           height: 10dvh;
           margin-right: 5%;
           border: solid 2px #4e3232;
        }
         
         .Contact {
            border-top: dashed 4px #4e3232;
            background-color: #00000044;
            text-align: center;
         }
}


/*Desktop */
@media screen and (min-width: 769px) {
   body {
    margin: 0%;
    background-color: #FAE7C9;
   }
    
    header {
        display: flex;
        justify-content: space-between;
        width: 102%; 
        height: 60px;
        background-color: #B0926A;
        border: double 6px  #706233;
        border-top: none;
        padding-left: 10px;
        padding-right: 50px;
        position: fixed;
        transition: 0.6s;
        animation: easeinLoadright 0.5s;
    }
    
    header div {
        display: flex;
        justify-content: space-between;
        margin-right: 6%;
     
    }
    header div h4 {
        border: solid 2px #554c2d;
        padding: 5px;
        border-radius: 5px;
        background-color: #FAE7C9;
        color: #554c2d;
     }
     header div h4:hover {
        background-color: #B0926A;
     }

     .Home {
        display: block;
        background-image:linear-gradient(to bottom right, #E1C78F , #bba458 );
        padding: 10% 10% 0% 10%;
        height: 85dvh;
     }
     .Home .Widgets {
        display: block;
        margin-top: 50px;
        float: left;
     }
     .Home .Instructions {
        margin-top: 30%;
        text-align: center;
        
     }
     .Home .Stickers {
        float:right;
        width: 200px;
        height: 200px;
        animation: easeinLoadright 0.5s;
     }
     .Home .Profile {
        border: solid 3px #706233;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        float:left;
        margin-right: 50px;
        animation: easeinLoadleft 0.5s;
     }

     .Info {
        height: auto;
        padding: 3%;
        border-top: dashed 5px #554c2d;
       
     }
     .Info a:hover {
        text-decoration: underline;
     }
     .Info .child {
        border:solid 4px #554c2d;
        border-top: none;
        border-right: none ;
        padding-left: 10px;
     }
     .Projects {
        border-top: dashed 5px #554c2d;
        height: auto;
     }
     .Projects .Parent {
        padding: 3%;
        height: auto;
    }
    .Projects .Child {
        padding: 10px;
        height: auto;      
        border:solid 4px #554c2d;
        border-top: none;
        border-right: none ;
    }
     .Projects img {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 5%;
     }
     .Contact {
        height: auto;
        text-align: center;
        border-top: solid 4px #554c2d;
        background-color: #B0926A;
     }
}