:root {
    --cyan-highlight: rgb(70, 226, 250);
    --cyan-bg: rgb(15 23 42);

    /* Tokyo Adobe Colors */
    --cyan-green-darkest: #012326;
    --cyan-green-darker: #2A403C;
    --cyan-green-lightest: #04D99D;
    --cyan-green-lighter: #04BF8A;
    --cyan-green-midtone: #0F8C69;

    /* == */

    /* Navy Blue */
    --navy-blue-darkest: #091626;
    --navy-blue-darker: #122640;
    --navy-blue-base: #1B3659;
    --navy-white-complement: #AEB5BF;

    /*  */
}

/* removes highlight color on mobile screens */
input,
textarea,
button,
select,
a,
p {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background-color: var(--navy-blue-base);
}

/* Utility classes */

.move-up {
    transform: translateY(0);
    transition: all .2s ease-in-out;
}

.move-up:hover {
    transform: translateY(-10%);
    transition: all .2s ease-in-out;
}

.fade-up {
    animation: fadeUp 3.5s ease-in-out normal forwards;
    opacity: 0;
    animation-delay: calc(var(--order) * 200ms);
}

.fade-up-profile {
    animation: fadeUpProfile 3.5s ease-in-out forwards;
    opacity: 0;
    animation-delay: calc(var(--order) * 200ms);
}

.duration-4s {
    animation-duration: 4s;
}

.slide-upper-left {
    transform: translate(0%);
    transition-duration: .2s;
    transition-delay: .08s;
}

.slide-upper-left:hover {
    transform: translate(-3%, -10%);
    /* animation: slideUpperLeft .5s ease-in-out forwards; */
    transition-duration: .2s;
    transition-delay: .08s;
}

/* Utility classes end */



/* Animations */

@keyframes fadeDown {
    20% {
        opacity: 0;
        transform: translateY(-80%);
    }

    30%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInCustom {
    20% {
        opacity: 0;
    }

    30%, 100% {
        opacity: 1;
    }
}

@keyframes fadeUp {
    25% {
        opacity: 0;
        transform: translateY(30%);
    }

    30% {
        opacity: 1;
        transform: translateY(30%);
    }

    45%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUpProfile {
    25% {
        opacity: 0;
        transform: translateY(10%);
    }

    30% {
        opacity: 1;
        transform: translateY(10%);
    }

    50%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpperLeft {
    0% {
        opacity: 1;
    }

    20%, 100% {
        transform: translate(-5%, -15%);
    }
}

@keyframes name-animation {
    
}

/* Animations end */
html{
    font-size: 16px;
}

body {
    font-family: "Open Sans", 'Inter', sans-serif;
    color: white;
    background-color: var(--cyan-green-darkest);
    margin: 0;
    padding: 0;
    position: relative;
}


body::before {
    background: radial-gradient(
        500px circle at var(--mouse-x) var(--mouse-y), rgba(29, 78, 216, 0.15), transparent 80%);
    border-radius: inherit;
    content: "";
    height: 100%;
    width: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -2;
    filter: blur(40px);
}

.navicon {
    background: rgb(255, 255, 255);
    display: block;
    height: 2px;
    position: relative;
    transition: .2s ease-out;
    width: 18px;
}

.name-animation {
    border-right-width: 2px;
    border-color: var(--cyan-green-lighter);

}

#projects-btn,
#resume-btn,
#contact-btn,
#logo-text {
    opacity: 0;
    animation: fadeDown 8s ease forwards;
    animation-delay: calc(var(--order) * 200ms);
}

/* About Me CSS */

.tech-stack-container > ul {
    display: flex;
    flex-wrap: wrap;
}

.tech-stack-container > ul > li{
    /* From https://css.glass */
    padding: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: .2rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-right: .5rem;
    margin-bottom: .5rem;
    transition: all .1s ease-in-out;
    cursor: default;
    user-select: none;
}

.tech-stack-container > ul > li:hover {
    background-color: rgba(23, 67, 101, 0.733);
}
/*  */
#bio-btn {
    transition: transform .2s ease-in-out;
}

#bio-btn:hover{
   transform: translateY(-15%); 
}

/* linkedin, github, facebook icon */
#icons > a {
    transform: translateY(0%);
    transition: all .2s ease-in-out;
}
#icons > a:hover {
    transform: translateY(-10%);
    transition: all .2s ease-in-out;
}


/* === About Me END == */
#icons img {
    width: 2.5em;
    margin-top: .8em;
    margin-right: 1em;
}

.navicon:before,
.navicon:after {
  background: rgb(255, 255, 255);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

#go-down-button {
    transition: all .3s ease;
    color: #FFFFFF;
}

.line {
    display: inline-block;
    background-color: #ffffff78;
    height: .05rem;
    border-radius: 5px;
}
/* DEV PROJECTS SECTION START */
.glass {
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.2);
    border-radius: .2rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}


/* DEV PROJECTS END */

#burger-menu {
    fill: #ffffff;
    height: 2rem;
    cursor: pointer;
}

#navbar-links {
    transition: 0.5s;
    overflow: hidden;
}

#navbar-links.active {
    height: 100px;
}

.filter-orange {
    filter: invert(45%) sepia(10%) saturate(5616%) hue-rotate(331deg) brightness(104%) contrast(103%);
}

input[type=text], textarea {
    padding: 5px;
    color: #FFFFFF;
    background: rgba( 255, 255, 255, 0.2 );
    backdrop-filter: blur( 9px );
    -webkit-backdrop-filter: blur( 9px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

textarea {
    width: 100%;
    max-width: 25rem;
    transition: .3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

button[type=submit] {
    background-color: rgb(99, 99, 99);
    border-radius: .5rem;
    width: max-content;
    padding: .5rem 1rem;
}

/* Contact Section CSS */

#contact {
    min-height: 50vh;
}


/* Project Image */

.project-image-container {
    box-shadow: 0px 4px 5px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}


/* Footer CSS */
#footer-2 > div {
    transition: transform .2s ease-in-out;
    transition-delay: .1s;
}
#footer-2 > div:hover {
    color: cyan;
    transform: translateY(-20%);
}

@keyframes moveUp {
    to {
        transform: translateY(-20%);
    }
}

/* contact button say hello */
#contact a[rel="noopener noreferrer"] {
    display: block;
    width: 8rem;
    text-align: center;
    border: 1px solid cyan;
    border-radius: 10px;
    color: cyan;
    padding: 5px 12px;
}

/* Footer CSS END */

/* xl screen */
@media only screen and (min-width: 1280px) {
    .project-card {
        height: 20rem;
        width: 30rem;
    }

    header {
        height: max-content;
    }

/* === DEV PROJECTS SECTION == */
    
    

    #footer-1, #footer-2, #footer-3 {
        width: 33%;
    }
}

@media only screen and (max-width: 1280px) {



    /* .project-card {
        width: 100%;
        height: 10rem;
    } */

    /* Hides the mouse gradial design */
    body::before {
        display: none;
    }

    #logo-text {
        animation: fadeUp 6s ease-in-out forwards;
        /* animation-delay: calc(7 * 50ms); */
    }

    #projects-btn,
    #resume-btn,
    #contact-btn
    {
        animation: fadeUp 5s ease-in-out forwards;
        animation-delay: calc(var(--order) * 50ms);
    }

    /* @keyframes fadeUp {
        0% {
            opacity: 0;
            transform: translateY(70%);
        }
        5% {
            opacity: .3;
        }
        20%, 100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInCustom {

    
        30%, 100% {
            opacity: 1;
        }
    }

    @keyframes fadeUpProfile {
        0% {
            opacity: 0;
            transform: translateY(15%);
        }
    
        25% {
            opacity: 1;
        }
    
        30%, 100% {
            opacity: 1;
            transform: translateY(0);
        }
    
    } */
}