:root {
    --i: 2s;
    --j: 1px;
}
/* on a decent monitor */
@media only screen and (min-width: 992px) {
    .bg-img {
        position: fixed;
        top: -120%;
        left: -100%;
        transform: scale(50%);
    }
    .shadow-box {
        position: fixed;
        height: 100vh;
        width: 100vw;
        background-color: black;
        opacity: 75%;
        transform: rotate(-35deg) scale(125%);
    }
    .pegasus {
        position: fixed;
        transform: scale(60%);
        bottom: -35%;
        left: -300px;
        opacity: 0%;
        animation: .5s fadeInLeft;
        animation-delay: .3s;
        animation-fill-mode: forwards;
    }
    .name {
        z-index: 9;
        color: white;
        position: fixed;
        top: -75px;
        right: 2.5%;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-style: italic;
        letter-spacing: 10px;
        font-size: 68px;
        animation: .5s fadeInRight;
        opacity: 0%;
        animation-delay: .3s;
        animation-fill-mode: forwards;
    }
    .job-title {
        color: white;
        position: fixed;
        top: 50px;
        right: 3.5%;
        font-family:Arial, Helvetica, sans-serif;
        font-style: italic;
        letter-spacing: 2px;
        font-size: 16px;
        animation: .5s fadeInRight;
        opacity: 0%;
        animation-delay: .5s;
        animation-fill-mode: forwards;
    }
    .job-exp {
        color: white;
        position: fixed;
        top: 70px;
        right: 3.5%;
        font-family:Arial, Helvetica, sans-serif;
        font-style: italic;
        letter-spacing: 2px;
        font-size: 16px;
        animation: .5s fadeInRight;
        opacity: 0%;
        animation-delay: .7s;
        animation-fill-mode: forwards;
    }
    .contact {
        z-index: 10;
        position: fixed;
        display: grid;
        place-items: center;
        height: 100vh;
        width: 100vw;
        color: black;
        font-family:Arial, Helvetica, sans-serif;
        font-style: bold;
        letter-spacing: 2px;
        font-size: 1.2vw;
        animation: .5s fadeInUp;
    }
    .contact::after {
        content: "dericsiglin@gmail.com copied";
        display: grid;
        place-items: center;
        font-family:Arial, Helvetica, sans-serif;
        letter-spacing: 1.5px;
        font-size: .9vw;
        text-align: center;
        height: 4vh;
        width: 16vw;
        margin-bottom: 7%;
        border-radius: 3px;

        background-color: #212121;
        opacity: 0;  
        pointer-events: none;
        /* transition from active state back to base state, 
        this allows the opacity to be "sticky" after active state turns off */
        transition: all 5s cubic-bezier(1,1,0,0);
    }
    .contact:active::after {
        opacity: 100%;
        background-color: lightgreen;
        /*transition from non-active state to active state, so instant at 0s */
        transition: all 0s;
    }
    .contact-box {
        position: fixed;
        display: grid;
        place-items: center;
        background-color: white;
        height: 8vh;
        width: 20vw;
        border-radius: 40px;
    }
    .contact-link {
        position: fixed;
        display: grid;
        place-items: center;
        color: black;
    }
    .information {
        position: fixed;
        display: grid;
        place-items: center;
        height: 120vh;
        width: 100vw;
        color: white;
        font-size: 11px;
        letter-spacing: 2px;
        text-align: center;
        animation: .5s fadeInUp;
        opacity: 0%;
        animation-delay: .2s;
        animation-fill-mode: forwards;
    }
    .star-list {
        position: fixed;
        top: -20px;
        right: -30px;
        height: 100px;
        width: 100px;
        z-index: 10;
    }
    .star {
        display: grid;
        place-items: center;
        height: 100%;
        width: 100%;
        animation: fadeInDown 1s;
        opacity: 0%;
        animation-delay: calc(.3s + (var(--i)*.1));
        animation-fill-mode: forwards;
    }

    @keyframes fadeInUp {
        0% {
            transform: translateY(2%);
            opacity: 0%;
        }
        100% {
            transform: translateY(0%);
            opacity: 100%;
        }
    }

    @keyframes fadeInDown {
        0% {
            transform: translateY(calc(var(--j)*-70)) rotate(-30deg);
            opacity: 0%;
        }
        100% {
            transform: translateY(calc(var(--j)*-60)) rotate(-30deg);
            opacity: 100%;
        }
    }

    @keyframes fadeInLeft {
        0% {
            transform: translateX(-2%) scale(60%);
            opacity: 0%;
        }
        100% {
            transform: translateX(0%) scale(60%);
            opacity: 100%;
        }
    }

    @keyframes fadeInRight {
        0% {
            transform: translateX(2%);
            opacity: 0%;
        }
        100% {
            transform: translateX(0%);
            opacity: 100%;
        }
    }
}

/* on a phone vertical */
@media only screen and (max-width: 600px) {
    .bg-img {
        position: fixed;
        top: -120%;
        left: -300%;
        transform: scale(50%);
    }
    .shadow-box {
        position: fixed;
        height: 100vh;
        width: 120vw;
        background-color: black;
        opacity: 75%;
        transform: rotate(35deg) scale(125%);
    }
    .pegasus {
        position: fixed;
        transform: scale(60%);
        top: 300px;
        left: -400px;
        opacity: 0%;
        animation: .5s fadeInLeft;
        animation-delay: .3s;
        animation-fill-mode: forwards;
    }
    .name {
        z-index: 9;
        color: white;
        position: fixed;
        top: 0;
        right: 40px;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-style: italic;
        letter-spacing: 10px;
        font-size: 21px;
        animation: .5s fadeInRight;
        opacity: 0%;
        animation-delay: .3s;
        animation-fill-mode: forwards;
    }
    .job-title {
        color: white;
        position: fixed;
        top: 35px;
        right: 50px;
        font-family:Arial, Helvetica, sans-serif;
        font-style: italic;
        letter-spacing: 2px;
        font-size: 11px;
        animation: .5s fadeInRight;
        opacity: 0%;
        animation-delay: .5s;
        animation-fill-mode: forwards;
    }
    .job-exp {
        color: white;
        position: fixed;
        top: 45px;
        right: 52px;
        font-family:Arial, Helvetica, sans-serif;
        font-style: italic;
        letter-spacing: 2px;
        font-size: 11px;
        animation: .5s fadeInRight;
        opacity: 0%;
        animation-delay: .7s;
        animation-fill-mode: forwards;
    }
    .contact {
        z-index: 100;
        position: fixed;
        display: grid;
        place-items: center;
        height: 100vh;
        width: 100vw;
        color: black;
        font-family:Arial, Helvetica, sans-serif;
        font-style: bold;
        letter-spacing: 2px;
        font-size: 3.2vw;
        animation: .5s fadeInUp;
    }
    .contact::after {
        content: "dericsiglin@gmail.com copied";
        display: grid;
        place-items: center;
        font-family:Arial, Helvetica, sans-serif;
        letter-spacing: 1.5px;
        font-size: 2vw;
        text-align: center;
        height: 3vh;
        width: 32vw;
        margin-bottom: 25%;
        border-radius: 3px;

        background-color: #212121;
        opacity: 0;  
        pointer-events: none;
        /* transition from active state back to base state, 
        this allows the opacity to be "sticky" after active state turns off */
        transition: all 5s cubic-bezier(1,1,0,0);
    }
    .contact:active::after {
        opacity: 100%;
        background-color: lightgreen;
        /*transition from non-active state to active state, so instant at 0s */
        transition: all 0s;
    }
    .contact-box {
        position: fixed;
        display: grid;
        place-items: center;
        background-color: white;
        height: 6vh;
        width: 50vw;
        border-radius: 40px;
    }
    .contact-link {
        position: fixed;
        display: grid;
        place-items: center;
        color: black;
    }
    .information {
        position: fixed;
        display: grid;
        place-items: center;
        height: 115vh;
        width: 100vw;
        color: white;
        font-size: 12px;
        letter-spacing: 2px;
        text-align: center;
        animation: .5s fadeInUp;
        opacity: 0%;
        animation-delay: .2s;
        animation-fill-mode: forwards;
    }
    .star-list {
        position: fixed;
        top: -20px;
        right: -30px;
        height: 100px;
        width: 100px;
        z-index: 10;
    }
    .star {
        display: grid;
        place-items: center;
        height: 100%;
        width: 100%;
        animation: fadeInDown 1s;
        opacity: 0%;
        animation-delay: calc(.3s + (var(--i)*.1));
        animation-fill-mode: forwards;
    }
    @keyframes fadeInUp {
        0% {
            transform: translateY(2%);
            opacity: 0%;
        }
        100% {
            transform: translateY(0%);
            opacity: 100%;
        }
    }

    @keyframes fadeInDown {
        0% {
            transform: translateY(calc(var(--j)*-70)) rotate(-30deg);
            opacity: 0%;
        }
        100% {
            transform: translateY(calc(var(--j)*-60)) rotate(-30deg);
            opacity: 100%;
        }
    }

    @keyframes fadeInLeft {
        0% {
            transform: translateX(-2%) scale(60%);
            opacity: 0%;
        }
        100% {
            transform: translateX(0%) scale(60%);
            opacity: 100%;
        }
    }

    @keyframes fadeInRight {
        0% {
            transform: translateX(2%);
            opacity: 0%;
        }
        100% {
            transform: translateX(0%);
            opacity: 100%;
        }
    }
}