.mainheader{
    animation: myhover 700ms ease-out;
}

.mainheader nav ul li a:hover{
    animation: linkhover 500ms ease-out;
    color: rgb(179, 179, 179);
    font-weight: 700;
    border-bottom: 2px solid rgb(179, 179, 179);
    padding-bottom: 10px;
}

.scrolled{
    width: 100%;
    height: 80px;
    box-shadow: 0 5px 5px rgba(255, 255, 255, 0.1);
    margin: 0;
    background-color: #292929f3;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.mainfooter .copyright a:hover{
    color: rgb(197, 197, 197);
    text-decoration: underline;
}

/*  */

section .boxes .box2 .pythonlogo:hover{
    animation: pythonlogoanimation 700ms ease-out;
    background: linear-gradient(
        135deg,
        #1F6ED5 0%,
        #1F6ED5 45%,
        #FFD000 55%,
        #FFD000 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 80px;
    padding: 25px 0 15px 0;
}

section .boxes .box1 .htmllogo:hover{
    animation: htmllogoanimation 700ms ease-out;
    color: orangered;
    font-size: 80px;
    padding: 25px 0 15px 0;
}

section .boxes .box3 .gologo:hover{
    animation: goanimation 700ms ease-out;
    color: rgb(0, 191, 255);
    font-size: 80px;
    padding: 25px 0 15px 0;
}

/*  */

.mainfooter .icons .instagram:hover{
    animation: footerlinkhoverinstagram 700ms ease-out;
    background: linear-gradient(
        45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-size: 30px;
    padding-left: 10px;
}

.mainfooter .icons .instagram .instagramlabel:hover{
    animation: footerlinkhoverinstagramlabel 700ms ease-out;
    background: linear-gradient(
        45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-size: 23px;
    padding-left: 10px;
}

/*  */

.mainfooter .icons .github:hover{
    animation: footerlinkhovergithub 700ms ease-out;
    background: rgb(163, 163, 163);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    padding-left: 10px;
}

.mainfooter .icons .github .githublabel:hover{
    animation: footerlinkhovergithublabel 700ms ease-out;
    background: rgb(163, 163, 163);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 23px;
    padding-left: 10px;
}

/*  */

.mainfooter .icons .youtube:hover{
    animation: footerlinkhoveryoutube 700ms ease-out;
    background: rgb(255, 36, 36);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    padding-left: 10px;
}

.mainfooter .icons .youtube .youtubelabel:hover{
    animation: footerlinkhoveryoutubelabel 700ms ease-out;
    background: rgb(255, 36, 36);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 23px;
    padding-left: 10px;
}

/*  */

.mainfooter .icons .linkedin:hover{
    animation: footerlinkhoverlinkedin 700ms ease-out;
    background: rgb(11, 42, 164);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    padding-left: 10px;
}

.mainfooter .icons .linkedin .linkedinlabel:hover{
    animation: footerlinkhoverlinkedinlabel 700ms ease-out;
    background: rgb(11, 42, 164);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 23px;
    padding-left: 10px;
}

/*  */

.mainfooter .icons .user:hover{
    animation: footerlinkhoveruser 700ms ease-out;
    background: rgb(255, 180, 50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    padding-left: 10px;
}

.mainfooter .icons .user .userlabel:hover{
    animation: footerlinkhoveruserlabel 700ms ease-out;
    background: rgb(255, 180, 50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 23px;
    padding-left: 10px;
}

/*  */


/*  */

@keyframes linkhover {
    0%{
        color: azure;
        font-weight: 700;
        border-bottom: 0 solid white;
        padding: 0;
    }

    50%{
        color: rgb(179, 179, 179);
        font-weight: 700;
        border-bottom: 2px solid rgb(179, 179, 179);
        padding-bottom: 10px;
    }

    100%{
        color: rgb(179, 179, 179);
        font-weight: 700;
        border-bottom: 2px solid rgb(179, 179, 179);
        padding-bottom: 10px;
    }
}

@keyframes myhover {
    0%{
        border-radius: 50px;
        width: 50%;
    }

    50%{
        border-radius: 0;
        margin-top: 0;
        width: 100%;
    }

    100%{
        border-radius: 50px;
        width: 50%;
    }
}

@keyframes footerlinkhoverinstagram {
    0%{}

    50%{
        background: linear-gradient(
            45deg,
            #f09433,
            #e6683c,
            #dc2743,
            #cc2366,
            #bc1888
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        font-size: 30px;
        padding-left: 10px;
    }

    100%{
        background: linear-gradient(
            45deg,
            #f09433,
            #e6683c,
            #dc2743,
            #cc2366,
            #bc1888
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        font-size: 30px;
        padding-left: 10px;
    }
}

@keyframes footerlinkhoverinstagramlabel {
    0%{
        font-size: 23px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding-left: 5px;
        padding-top: 3px;
        font-weight: 500;
    }

    50%{
        background: linear-gradient(
            45deg,
            #f09433,
            #e6683c,
            #dc2743,
            #cc2366,
            #bc1888
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        font-size: 23px;
        padding-left: 10px;
    }

    100%{
        background: linear-gradient(
            45deg,
            #f09433,
            #e6683c,
            #dc2743,
            #cc2366,
            #bc1888
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        font-size: 23px;
        padding-left: 10px;
    }
}

@keyframes footerlinkhovergithub {
    0%{}

    50%{
        background: rgb(163, 163, 163);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 30px;
        padding-left: 10px;
    }

    100%{
        background: rgb(163, 163, 163);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 30px;
        padding-left: 10px;
    }
}

@keyframes footerlinkhovergithublabel {
    0%{
        font-size: 23px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding-left: 5px;
        padding-top: 3px;
        font-weight: 500;
    }

    50%{
        background: rgb(163, 163, 163);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 23px;
        padding-left: 10px;
    }

    100%{
        background: rgb(163, 163, 163);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 23px;
        padding-left: 10px;
    }
}

@keyframes footerlinkhoveryoutube {
    0%{}

    50%{
        background: rgb(255, 36, 36);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 30px;
        padding-left: 10px;
    }

    100%{
        background: rgb(255, 36, 36);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 30px;
        padding-left: 10px;
    }
}

@keyframes footerlinkhoveryoutubelabel {
    0%{
        font-size: 23px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding-left: 5px;
        padding-top: 3px;
        font-weight: 500;
    }

    50%{
        background: rgb(255, 36, 36);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 23px;
        padding-left: 10px;
    }

    100%{
        background: rgb(255, 36, 36);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 23px;
        padding-left: 10px;
    }
}

@keyframes footerlinkhoverlinkedin {
    0%{}

    50%{
        background: rgb(11, 42, 164);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 30px;
        padding-left: 10px;
    }

    100%{
        background: rgb(11, 42, 164);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 30px;
        padding-left: 10px;
    }
}

@keyframes footerlinkhoverlinkedinlabel {
    0%{
        font-size: 23px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding-left: 5px;
        padding-top: 3px;
        font-weight: 500;
    }

    50%{
        background: rgb(11, 42, 164);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 23px;
        padding-left: 10px;
    }

    100%{
        background: rgb(11, 42, 164);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 23px;
        padding-left: 10px;
    }
}

@keyframes footerlinkhoveruser {
    0%{}

    50%{
        background: rgb(255, 180, 50);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 30px;
        padding-left: 10px;
    }

    100%{
        background: rgb(255, 180, 50);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 30px;
        padding-left: 10px;
    }
}

@keyframes footerlinkhoveruserlabel {
    0%{
        font-size: 23px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding-left: 5px;
        padding-top: 3px;
        font-weight: 500;
    }

    50%{
        background: rgb(255, 180, 50);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 23px;
        padding-left: 10px;
    }

    100%{
        background: rgb(255, 180, 50);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 23px;
        padding-left: 10px;
    }
}

@keyframes htmllogoanimation {
    0%{
        font-size: 72px;
        color: rgb(255, 255, 255);
        padding: 20px 0 15px 0;
    }

    50%{
        color: orangered;
        font-size: 80px;
        padding: 25px 0 15px 0;
    }

    100%{
        color: orangered;
        font-size: 80px;
        padding: 25px 0 15px 0;
    }
}

@keyframes pythonlogoanimation {
    0%{
        font-size: 72px;
        color: rgb(255, 255, 255);
        padding: 15px 0 10px 0;
    }

    50%{
        background: linear-gradient(
            135deg,
            #1F6ED5 0%,
            #1F6ED5 45%
            #FFD000 55%,
            #FFD000 100%
        );
        -webkit-text-fill-color: transparent;
        font-size: 80px;
        padding: 25px 0 15px 0;
        -webkit-background-clip: text;
    }

    100%{
        background: linear-gradient(
            135deg,
            #1F6ED5 0%,
            #1F6ED5 45%,
            #FFD000 55%,
            #FFD000 100%
        );
        -webkit-text-fill-color: transparent;
        font-size: 80px;
        padding: 25px 0 15px 0;
        -webkit-background-clip: text;
    }
}

@keyframes goanimation {
    0%{
        font-size: 72px;
        color: rgb(255, 255, 255);
        padding: 20px 0 15px 0;
    }

    50%{
        color: rgb(0, 191, 255);
        font-size: 80px;
        padding: 25px 0 15px 0;
    }

    100%{
        color: rgb(0, 191, 255);
        font-size: 80px;
        padding: 25px 0 15px 0;
    }
}