@import url('./styles/colors.css');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
html::-webkit-scrollbar{
    width: 12px;
    opacity: 1;
    background: var(--mono-6);
    padding: 210px;
}


body{
    background: rgb(56, 56, 56);
    color: white;
}

header{
    z-index: 1000;
}

html::-webkit-scrollbar-thumb{
    width: 5px;
    margin: 5px;
    background: var(--accent-1);
    border-radius: 2px;
    opacity: 0.7;
}
html::-webkit-scrollbar-track{
    padding: 12px 10px;
    width: 10px;
    margin: 252px 5px;
}
body{
  background: rgb(37, 36, 36);
  overflow-y: scroll;
}
.hero{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: var(--bg-hero);
    color: white;
    font-family: "Host Grotesk";
    /* animation: topCorner;
    animation-timeline: view(); */
}

#projects{
    width: 80vw;
    margin: 50px auto;
    padding: 25px;
    box-shadow: 2px 2px 10px white;
    border-radius: 25px;
    background: rgba(252, 252, 252, 0.295);
    & > h1{
        font-size: 72px;
    }
    & > h3{
        font-size: 38px;
    }
    & > a{
        color: white;
        font-size: 42px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        &:hover{
            text-shadow: 2px 12px 25px white;
        }
    }
}

/* a:hover{
    cursor: url('./mouse-hand.png'), auto;
} */
.hero svg{
    margin-left: 18px;
}
.hero h1{
    font-size: 8rem;
}
h3 code{
    font-family: "Afacad Flux", "Poppins";
}
@media screen and (max-width: 768px){
    .hero{
        height: 85vh;
        /* text-align: center; */
        margin: auto 25px;
    }
    .hero h1{
        font-size: 4rem;
    }
}

#pageTitle {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: bold;
    transition: all 0.3s ease-out;
}

.content {
    margin-top: 100vh; /* Ensures content starts below the title */
    width: 80%;
}

.hidden {
    opacity: 0;
    filter: blur(25px);
    transform: translate(-100px);
    transition: all 1s ease-in-out;
}

.show {
    opacity: 1;
    filter: blur(0px);
    transform: translate(0px);
    /* transition: all 1s ease-in-out; */
}

.logos{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.s-names{
    display: none;
    position: absolute;
    color: aliceblue;
    font-size: 3rem;
    font-weight: 800;
    top: 15px;
    right: 0;
    transform: rotate(90deg);
}

.logo:nth-child(3) img{
    scale: 1.2;
    transform: translateY(23px);
}



.javasc-fr .logo:nth-child(2) img{
    transform: translateY(25px);
    animation: spin 120s infinite;
}

.logo:nth-child(1){
    position: relative;
    background: linear-gradient(to right, rgb(124, 124, 124), rgb(183, 75, 255));
    border-radius: 15px;
    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    &:hover{
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform:  rotate3d(228, 53, 89, -23deg);
        box-shadow: 50px 50px 50px rgb(106, 255, 255);
        &.logo{
            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
            width: 280px;
            &.logo img{
                transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
                transform: translateX(-50px);
            }
        }
    }
}

.logo:nth-child(1):hover .s-names{
    color: rgba(0, 0, 0, 0.795);
    text-shadow: 22px 25px 1px rgba(176, 224, 230, 0.568);
    display: flex;
    top: 70px;
    right: -65px;
    font-size: 4rem;
}
.logo:nth-child(2):hover .s-names{
    color: rgba(0, 0, 0, 0.795);
    text-shadow: 22px 25px 1px rgba(176, 224, 230, 0.568);
    display: flex;
    top: 75px;
    right: -45px;
    font-size: 4rem;
}
.logo:nth-child(3):hover .s-names{
    color: rgba(0, 0, 0, 0.795);
    text-shadow: 22px 25px 1px rgba(176, 224, 230, 0.568);
    display: flex;
    top: 75px;
    right: -85px;
    font-size: 4rem;
}

.logo:nth-child(3):hover .s-names:nth-child(2){
    color: rgba(0, 0, 0, 0.795);
    text-shadow: 22px 25px 1px rgba(176, 224, 230, 0.568);
    display: flex;
    top: 95px;
    left: 5px;
    font-size: 4rem;

}

.logo:nth-child(2){
    position: relative;
    background: linear-gradient(to right, rgb(124, 124, 124), rgb(183, 75, 255));
    border-radius: 15px;
    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    &:hover{
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform:  rotate3d(228, 53, 89, -23deg);
        box-shadow: 50px 50px 50px rgb(106, 255, 255);
        &.logo{
            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
            width: 280px;
            &.logo img{
                transform: translateX(-50px);
                transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
            }
        }
    }
}

.logo:nth-child(3){
    /* position: relative;
    display: flex;
    align-items: center; */
    background: linear-gradient(to right, rgb(124, 124, 124), rgb(183, 75, 255));
    border-radius: 15px;
    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    &:hover{
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform:  rotate3d(228, 53, 89, -23deg);
        box-shadow: 50px 50px 50px rgb(106, 255, 255);
        &.logo{
            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
            width: 280px;
            &.logo img{
                transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
                transform: translateX(-90px);
            }
        }
    }
}

/* .javasc-fr .logo:nth-child(1) {
    transition: all 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    &:hover{
        transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform:  rotate3d(228, 53, 89, -23deg);
    }
}
.javasc-fr .logo:nth-child(2) {
    transition: all 4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    &:hover{
        transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform:  rotate3d(228, 53, 89, -23deg);
    }
} */

.javasc-fr .logo:nth-child(1):hover{
    transform: translate(-150px, -90px);
}
.javasc-fr .logo:nth-child(2):hover{
    transform: translate(-150px, -90px);
}

.javasc-fr .logo:nth-child(1) .s-names{
    transform: rotate(350deg);
    position: absolute;
    left: 90px;
    top: 130px;
}
.javasc-fr .logo:nth-child(2) .s-names{
    transform: rotate(350deg);
    position: absolute;
    left: 90px;
    top: 130px;
}

@keyframes topCorner {
    from{
        transform: translate(0px, 0px);
    }
    
    to{        
        transform: translate(-20vw, -20vh);
    }
}

@keyframes spin {
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(3560deg);
    }
}

@keyframes Dspin {
    0%{
        transform: rotate3d(0);
    }
    20%{
        transform:  rotate3d(1, 1, 18, 45deg);
    }
    40%{
        transform: rotate3d(25, 5, 6, 30deg);
    }
    60%{
        transform:  rotate3d(1, 29, 25, -45deg);
        
    }
    80%{
        transform: rotate3d(2, 5, 6, -30deg);

    }
    100%{
        transform: rotate3d(0);
    } 
}


.logo{
    width: 200px;
    height: 200px;
    margin: 75px;
    padding: 25px;
    /* background: linear-gradient(to right, rgb(165, 255, 165), rgb(255, 255, 154)); */
}

.logos img{
    width: 150px;
}

.skills{
    text-align: center;
    
}
.skills-h1{
    font-size: 78px;
    font-family: 'Host Grotesk', 'Poppins', Verdana, Geneva, Tahoma, sans-serif;
}

.notice{
    margin: 50px;
    margin-top: 200px;
    font-family: 'Poppins';
    font-size: 24px;
    padding: 52px;
    border-left: 2px solid cyan;
    outline: 10px solid rgb(0, 0, 0);
    border-radius: 15px;
    background: linear-gradient(to right, rgb(196, 196, 196), rgb(99, 99, 99));
}

@media (min-width: 1035px) and (max-width: 1450px){
    .logo{
        width: 45px;
    }
}

@media (min-width: 769px) and (max-width: 1034px){
    .logos{
        flex-direction: column;
    }
}


@media (max-width: 768px) {
    .logo:nth-child(3) img{
        scale: 1.2;
        transform: translateY(23px);
    }
    
    .javasc-fr .logo:nth-child(2) img{
        transform: translateY(25px);
        animation: spin 120s infinite;
    }
    
    .logo:nth-child(1){
        transform: scale(-25px);
        transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
        &:hover{
            transform:  rotate3d(228, 53, 89, -23deg);
        }
    }
    
    .logo:nth-child(2){
        transform: scale(-25px);

        transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
        &:hover{
            transform:  rotate3d(228, 53, 89, -23deg);
        }
    }
    
    .logo:nth-child(3){
        transform: scale(-25px);

        transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1);
        &:hover{
            transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
            transform:  rotate3d(228, 53, 89, -23deg);
        }
        /* animation: Dspin 120s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite; */
    }
    
    .javasc-fr .logo:nth-child(1) {
        transition: all 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        &:hover{
            transform: rotate3d(228, 53, 89, -23deg);
            /* transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); */
        }
    }
    .javasc-fr .logo:nth-child(2) {
        transition: all 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        &:hover{
            transform: rotate3d(228, 53, 89, -23deg);
            /* transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); */
        }
    }

    .logos{
        flex-direction: column;
    }
    .logo{
        margin: 0px;
    }
}