@font-face{
    font-family: 'Orbitron';
    src: url('Orbitron/Orbitron-VariableFont_wght.ttf');
}

@property --angle{
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes rotation{
    0%{
         --angle: 0deg;
    }
 
    100%{
        --angle: 360deg;
    }
 }


 @keyframes fadeIn{
    0%{
        opacity: 0
    }

    100%{
        opacity: 1;
    }
 }

@media (hover:hover){
    .pageLink:hover{
        color: rgb(0 200 200);
    }

    .navBarLink:hover::before{
        content: "";
        background: conic-gradient(from var(--angle), rgb(0 200 200),black,black);    
        position: absolute;
        inset: -.25rem;
        border-radius: inherit;
        z-index: -1;
        animation: rotation 2s linear infinite;
        filter: blur(3px);
    }
}

body{
    font-family: 'Orbitron', 'sans-serif';
    background-color: black;
    background-size: 120px 120px;
    background-image: linear-gradient(to right, rgb(0 100 100) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(0 100 100) 1px, transparent 1px);
    color: white;
    margin: 0;
}

img{
    height: 7.5rem;
    width: 7.5rem;
}

.navBarContainer{
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: rgb(0 0 0 / 90%);
    width: 100%;
    justify-content: center;
    padding: 1rem 0rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.navBarLink{
    text-decoration: none;
    color: white;
    background-color: rgb(0 0 0 / 90%);
    font-size: 1.5rem;
    padding: 1rem;
    margin: 1rem 1rem .5rem 1rem;
    position: relative;
}


.pageLink{
    color: white;
}

.audioButton{
    border: .1rem solid rgb(0 200 200);
    font-family: 'Orbitron', 'sans-serif';
}

.audioButton:hover{
    cursor: pointer;
}

.resumeContainer{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
    margin: 0 3rem 3rem 3rem;
}

.resumeSection{
    display: grid;
    text-align: left;
    border: .1em solid rgb(0, 200, 200);
    align-items: center;
    border-radius: 1rem;
    padding: 0 2rem 2rem 2rem;
    row-gap: 2rem;
    column-gap: 2rem;
    box-shadow: .8rem .2rem 2rem rgb(0 200 200) inset, -.8rem -.2rem 2rem rgb(0 200 200) inset;
    background-color: rgb(0 35 35 / 75%);
}

.resumeSection p{
    font-family: 'sans-serif';
    font-size: 1.4 rem;
}

.show{
    opacity: 0;
    position: relative;
}

.show.active{
    opacity: 1;
}

.active.fadeIn{
    animation: fadeIn 1s ease-in;
}

.spanColumns{
    grid-column: 1 / -1;
}

.divider{
    border: 1px solid rgb(0 200 200);
}

.alignCenter{
    text-align: center;
}

.alignRight{
    text-align: right;
}

.borderRight{
    border-right: 1px solid rgb(0 200 200);
}

.portfolioSection{
    grid-template-columns: repeat(auto-fit, minMax(700px, 1fr));
    column-gap: 2rem;
    align-items: top;
}

.portfolioImage{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.imageLink:hover{
    filter: brightness(25%);
}

.aboutSection{
    column-gap: 0;
    row-gap: 1rem;
}

.experienceSection{
    row-gap: 0;
}

.experienceSection h4{
    padding-left: 2rem;
    font-family: sans-serif;
}

.experienceSection h2, .experienceSection h3{
    color: rgb(0 200 200);
}

.experienceSection img{
    width: 13rem; 
    height: 5rem;
    margin-top: 1.5rem;
    background-color: white;
}

.techSection{
    grid-template-columns: repeat(auto-fit, minMax(400px, 1fr));
    grid-gap: 1.5rem;
    column-gap: 1rem;
    text-align: center;
}


.techSection img{
    height: 5rem;
    width: 5rem;
}

.certGrid{
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    row-gap: 2rem;
    column-gap: 1rem;
    width: 50%;
    text-align: center;
    margin: auto;
}

.educationSection{
    text-align: center;
    row-gap: 1rem;
}

.university{
    display: flex;
    align-items: center;
}

.volunteerSection h4{
    padding-left: 2rem;
    font-family: sans-serif;
}

.volunteerSection h2, .volunteerSection h3{
    color: rgb(0 200 200);
}