@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@600&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
 ::-webkit-scrollbar {
     width: 12.5px;
}
 ::-webkit-scrollbar-track {
     background: #cfd8dc;
}
 ::-webkit-scrollbar-thumb {
     background: #90a4ae;
     border-radius: 6px;
     border: 3.2px solid #cfd8dc;
}
 ::-webkit-scrollbar-thumb:hover {
     background: #89979e;
}
 ::-webkit-scrollbar-thumb:active {
     background: #69747a;
}
 html * {
     padding: 0;
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
}
 html {
     scroll-behavior: smooth;
}
 .header-container {
     height: 47px;
     color: #fafafa;
     background-color: #040014;
     width: 100%;
     position: fixed;
     display: flex;
     justify-content: space-evenly;
     z-index: 2;
     box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
}
 .header-box {
     width: 50%;
     padding: 1.13vw 0;
     display: inline-block;
}
 .header-box-right {
     position: relative;
     text-align: right;
}
 .header-box-left {
     position: relative;
}
 #menu-icon-box {
     display: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: 5vh;
}
 .dropdown-container {
     color: white;
     position: fixed;
     right: 15px;
     background-color: #040014;
     height: 100px;
     width: 100px;
     z-index: 1;
     text-align: center;
     transition: 0.3s;
}
 .dropdown-links {
     color: white;
     text-decoration: none;
     display: block;
     padding: 15px 0;
}
 .links-box {
     position: absolute;
     right: 25%;
     display: inline-block;
     top: 50%;
     transform: translateY(-50%);
     width: 21.3vw;
}
 .header {
     position: absolute;
     left: 15%;
     top: 50%;
     transform: translateY(-50%);
     font-size: 1.2rem;
     cursor: pointer;
}
 .header-links {
     color: #fafafa;
     font-family: 'Mulish', sans-serif;
     letter-spacing: 1.2px;
     font-size: 1.38vw;
     margin-right: 5%;
     text-decoration: none;
}
 .banner-container {
     position: relative;
     height: 450px;
     background-image: url('fotbar.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position-y: 50%;
}
 .profile-img {
     position: absolute;
     left: 50%;
     top: 45%;
     transform: translate(-50%, -50%);
     height: 275px;
     width: 275px;
     border: 7px solid #040014;
     border-radius: 50%;
}
 .quote-container {
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     display: inline-flex;
     margin: 35px auto;
     background-color: #040014;
     border-radius: 5px;
     transition: 0.3s;
     cursor: pointer;
}
 .quote-container:hover {
     transform: scale(1.05) translateX(-47.5%);
     box-shadow: 0 20px 10px rgba(0, 0, 0, 0.4);
}
 .quote-box {
     position: relative;
     bottom: 3.5px;
     background-color: white;
     padding: 7px 20px;
     border-radius: 5px;
     transform: scaleX(1.003);
}
 .quote {
     font-family: 'Roboto Mono', monospace;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}
 .content-container {
     position: relative;
     margin: 75px auto 0 auto;
     width: 75%;
     padding: 20px 40px;
}
 .content-desc {
     font-size: 2.75vw;
     font-family: 'Roboto Mono', monospace;
     margin-left: 30px;
     margin-bottom: 10px;
     color: #070025;
}
 .content-line {
     border: none;
     background-color: #070025;
     height: 3px;
}
 #typed-strings {
     position: relative;
}
 #typed {
     position: absolute;
     top: 80%;
     left: 50%;
     transform: translateX(-50%);
     color: white;
     font-size: 45px;
     font-family: 'Roboto Mono', monospace;
     padding: 0 20px;
     background-color: rgba(0, 0, 0, 0.8);
     text-align: center;
}
 .profile-overlay {
     background-color: rgba(0, 0, 0, 0.8);
     height: 100px;
}
 .inner-content-box {
     position: relative;
}
 .content-text {
     width: 60%;
     text-align: justify;
     font-family: 'Mulish', sans-serif;
     padding: 0 15px;
     font-size: 19px;
     line-height: 25px;
}
 .about-text {
     margin-top: 40px;
     position: absolute;
     right: 25px;
     top: 55%;
     transform: translateY(-50%);
     padding-bottom: 25px;
}
 .side-img {
     width: 25%;
     height: 25%;
     margin-top: 30px;
     margin-left: 30px;
     border: 2.5px solid #070025;
     border-radius: 5px;
     box-shadow: 0 15px 10px 5px rgba(0, 0, 0, 0.4);
     cursor: pointer;
     transition: 0.3s;
}
 .side-img:hover {
     transform: scale(1.05);
     box-shadow: 0 25px 10px 2px rgba(0, 0, 0, 0.4);
}
 .inner-projects-box {
     margin-top: 15px;
     text-align: center;
     width: 100%;
}


 .inner-skills-box {
     position: relative;
     text-align: center;
     margin-top: 15px;
     width: 100%;
}
 .skills {
     color: #fafafa;
     position: relative;
     width: 11.19vw;
     height: 11.19vw;
     display: inline-block;
     margin: 15px;
     border-radius: 1.18vw;
     cursor: pointer;
     transition: 0.3s;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
     background-color: #040014;
}
 #skill-divide-2 {
     display: none;
}
 .skill-divide-4 {
     display: none;
}
 .skills:hover {
     box-shadow: 0 7px 18px rgba(0, 0, 0, 0.4);
     transform: scale(1.05);
}
 .skill-icon {
     position: absolute;
     top: 1.18vw;
     transform: translateX(-50%);
     font-size: 5vw;
}
 .skill-texts {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
}
 .skill-desc {
     bottom: 2.76vw;
     font-size: 1.41vw;
}
 .skill-exp {
     bottom: 1.18vw;
     font-size: 1.26vw;
}
 .skill-img {
     position: absolute;
     top: 15px;
     transform: translateX(-50%);
     width: 5.12vw;
     height: 5.12vw;
}
 .category-desc {
     font-size: 2.2vw;
     font-family: 'Roboto Mono';
     margin-bottom: 15px;
}
 .footer {
     position: relative;
     text-align: center;
     background-color: #040014;
     padding: 20px;
}
 .footer-box {
     position: relative;
     display: inline-block;
     height: 45px;
     width: 45px;
     background-color: #fafafa;
     border-radius: 50%;
     transition: 0.3s;
     cursor: pointer;
}
 .footer-box:nth-child(1) {
     right: 15px;
}
 .footer-box:nth-child(2) {
     right: 5px;
}
 .footer-box:nth-child(3) {
     left: 5px;
}
 .footer-box:nth-child(4) {
     left: 15px;
}
 .footer-box:hover {
     transform: scale(1.1);
}
 .footer-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 28px;
     color: #040014;
}
 #instagram {
     font-size: 32px;
}

 @media only screen and (min-width: 1500px) {
     .skills {
         height: 11.1vw;
         width: 11.1vw;
    }
}
 @media only screen and (min-width: 1370px) {
     .language-box {
         height: 16.7vw;
    }
}
 @media only screen and (max-width: 1145px) {
     .skills {
         height: 15.3vw;
         width: 15.3vw;
         margin: 1vw;
    }
     .skill-icon {
         font-size: 7vw;
    }
     .skill-img {
         height: 7.16vw;
         width: 7.16vw;
    }
     .skill-desc {
         font-size: 2vw;
         bottom: 3vw;
    }
     .skill-exp {
         font-size: 1.7vw;
    }
}
 @media only screen and (max-width: 1024px) {
     .category-desc {
         font-size: 3.12vw;
    }
     .header-links {
         font-size: 16px;
    }
     .links-box {
         width: 100%;
    }
     .content-text {
         font-size: 1.75vw;
         line-height: 2.45vw;
    }
     .side-img {
         width: 19.23vw;
         height: 19.23vw;
    }
     #typed {
         font-size: 4.4vw;
    }
}
 @media only screen and (max-width: 768px) {
     .links-box {
         display: none;
    }
     .header-links {
         font-size: 1.85vw;
    }
     .header {
         font-size: 17.6px;
    }
     .skills {
         width: 25vw;
         height: 25vw;
    }
     .skill-icon {
         font-size: 12vw;
         top: 2.95vw;
    }
     #skill-divide-2 {
         display: block;
    }
     .skill-desc {
         bottom: 5vw;
         font-size: 2.7vw;
    }
     .skill-exp {
         bottom: 2.5vw;
         font-size: 2.2vw;
    }
     .skill-img {
         width: 11vw;
         height: 11vw;
         margin-top: 8px;
    }
     .side-img {
         margin-left: 2.5vw;
         margin-top: 9.75vw;
    }
     .content-text {
         width: 43vw;
         font-size: 16px;
    }
     .content-container {
         margin-top: 8.85vw;
    }
     .content-desc {
         font-size: 20px;
    }
     #typed {
         font-size: 27px;
         top: 85%;
         width: 310px;
    }
     .banner-container {
         height: 410px;
    }
     #menu-icon-box {
         display: initial;
    }
     .profile-img {
         top: 48%;
         height: 250px;
         width: 250px;
    }
}
 @media only screen and (max-width: 596px) {
     .skills {
         width: 22vw;
         height: 22vw;
    }
     .skill-desc {
         bottom: 5.2vw;
         font-size: 2.25vw;
    }
     .skill-exp {
         bottom: 1.75vw;
         font-size: 2.35vw;
    }
     .skill-img {
         width: 7.68vw;
         height: 7.68vw;
    }
     .skill-icon {
         font-size: 9vw;
         top: 2vw;
    }
     .banner-container {
         height: 356px;
    }
     .content-text {
         width: 100%;
         font-size: 16px;
         left: 50%;
         top: 160px;
         transform: translate(-50%, 0);
         line-height: 17.5px;
         text-align: center;
    }
     .side-img {
         margin-top: 30px;
         position: absolute;
         left: 50%;
         transform: translate(-50%, 0);
         height: 135px;
         width: 135px;
    }
     .side-img:hover {
         transform: translate(-50%, 0) scale(1.05);
    }
     .skills-box {
         margin-top: 300px;
    }
     .profile-img {
         top: 48%;
         height: 210px;
         width: 210px;
    }
     .quote {
         font-size: 2.9vw;
    }
}
 @media only screen and (max-width: 426px) {
     #typed {
         width: 85vw;
    }
     .skills-box {
         margin-top: 350px;
    }
     .skill-divide-4 {
         display: block;
    }
     .skills {
         height: 120px;
         width: 80vw;
         left: 57.5%;
         transform: translate(-60%, 0);
    }
     .skills:hover {
         transform: scale(1.05) translate(-57% ,0);
    }
     .category-desc {
         font-size: 20px;
         margin-left: -10px;
    }
     .skill-icon {
         font-size: 55px;
    }
     .skill-desc {
         bottom: 7.5vw;
         font-size: 15px;
    }
     .skill-exp {
         bottom: 3vw;
         font-size: 13px;
    }
     .skill-img {
         width: 50px;
         height: 50px;
         margin-top: 0;
    }

}
 @media only screen and (max-width: 375px) {
     .skills-box {
         margin-top: 400px;
    }
}