/*overrides*/
* {
 padding: 0;
 margin: 0;
}
body{
    font-family: "Roboto", sans-serif;
    background-color: #131112;
    color: #F7F7FF;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 var(--space-l);
}
a{
    color: #279AF1;
    text-decoration-line: none;
}
a:hover{
    color: #E94F37;
}
h1{
    font-size: var(--step-4);
    color: #F7F7FF;
}
h2{
    font-size: var(--step-1);
    color: #F7F7FF;
}
h3{
    font-size: var(--step-0);
}
h4{
    font-size: var(--step-2);
    color: #F7F7FF; 
}
nav{
    /* display: flex; */
    display: none;
    flex-direction: row;
    gap: var(--space-s);
    text-align: justify;
    text-justify: inter-word;
    padding: 0 var(--space-xs);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-m);
}
footer{
    display: flex;
    color: #F7F7FF;
    align-items: center;
}

/* classes */
.background{
    width: 100%;
    align-content:center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: var(--space-2xl);
}
.bg_panel{
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 720px;
}
.iconbox{
    display: flex;
    flex-direction: row;
    gap: var(--space-2xs);
    align-items: flex-start;
    flex-wrap: wrap;
    margin: var(--space-s) 0;
}
.brief_summary_text{
    opacity: 0.7;
    max-width: 400px;
    padding-right: var(--space-xs);
    margin-bottom: var(--space-s);
    font-size: var(--step--1);
}
.code_languages_text{
    user-select: none;
    opacity: 0.9;
    margin-bottom: var(--space-2xs);
    font-size: var(--step-0);
}
.code_icons{
    max-width: var(--space-m);
    max-height: auto;
    opacity: .8;
    border: none;
}
.navbar_items{
    color: #F7F7FF;
    transition: all 0.25s;
    opacity: 0.8;
}
.navbar_items:hover{
    transform: translateY(-5px);
}
.content_box{
    display: flex;
    flex-direction: column;
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: var(--space-l);
}
.content_box_card{
    margin: var(--space-xs) 0;
    font-size: var(--step-0);
}
.project_box_card{
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    position: relative;
}
.project_name{
    display: flex;
    align-items: center;
    opacity: .6;
    
}
.experience_box_card{
    display: flex;
    flex-direction: row;
    gap: var(--space-l);
    border-radius: 3px;
    border: var(--space-3xs) solid #343434;
    padding: var(--space-2xs);
    position: relative;
    font-size: var(--step--1);
}
.experience_name {
    opacity: .6;
}
.content_sub_box {
    display: flex;
    flex-direction: row;
    gap: var(--space-l);
    padding: var(--space-2xs);
    border-radius: 3px;
    border: var(--space-3xs) solid #343434;
}
.content_box_snapshot {
    display: flex;
    flex-direction: row;
    gap: var(--space-l);
    padding: var(--space-2xs);
    border-radius: 3px;
    border: var(--space-3xs) solid #343434;
}
.textbox{
    display: flex;
    text-align: justify;
    text-justify: inter-word;
    flex-direction: column;
    margin-bottom: var(--space-s);
}
.footer_text{
    font-size: var(--step--1);
    margin-bottom: var(--space-l);
}
.result_output{
    margin-top: var(--space-xs);
    font-size: var(--step-0);
}
.canvas_button{
    margin-top: none;
    border: none;
    background-color: #F7F7FF;
    font-size: var(--step--1);
    padding: var(--space-3xs) var(--space-xs);
    font-weight: bold;
    letter-spacing: 0.05rem;
}
.canvas_button:active{
    background-color:#343434;
    color: #F7F7FF;
}
.gesture_image{
    max-width: var(--space-xl);
    max-height: auto;
}
.disclaimer_text{
    font-size: var(--step--1);
    opacity: 80%;
}

/*IDs*/
#name{
    opacity: .95;
}
#content_box_1{
    padding: 0 var(--space-xs);
}
#cbc_2{
    opacity: 0.8;
}
#cbc_3{
    opacity: 0.7;
}
#cbc_4{
    opacity: 0.7;
}
#snapshot_1{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#snapshot_2{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#result_output{
    font-size: var(--step-0);
}
#viperhawk_website{
    width: 100%;
    height: 310px;
    align-self: center;
}
#snapshot_2{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}


/* screen size change */
@media (max-width: 916px) {
    #name{
        margin-top: var(--space-l);
    }
    #viperhawk_website{
        width: 95%;
        height: 310px;
        align-self: center;
    }
    .background {
        flex-direction: column;
        margin: 0 var(--space-2xl);
        gap: var(--space-s);
    }
    header {
        position: static;
        margin-left: var(--space-xs);
    }
    main {
        display: flex;
        flex-flow: column;
        overflow: visible;
    }
    .brief_summary_text {
        max-width: 720px;
        height: auto;
    }
    .code_languages_text {
        opacity: 0.9;
        margin-bottom: 0;
    }
    .content_box_card{
        margin: var(--space-2xs) 0;
    }
}

/* classes for animations */
.change_border_colour:hover{
    animation: change_border_colour 0.25s ease-in forwards;
}
.fade_opacity_in:hover{
    animation: fade_in 0.25s ease-in forwards;
}
.fade_colour_in_1:hover{
    animation: fade_into_colour_1 0.25s ease-in forwards;
}
.fade_colour_in_2:hover{
    animation: fade_into_colour_2 0.2s ease-in forwards;
}
.rotate_yellow:hover{
    animation: rotate_yellow 0.3s ease-in forwards;
    animation-iteration-count: 1;
}
.rotate_blue:hover{
    animation: rotate_blue 0.3s ease-in forwards;
    animation-iteration-count: 1;
}
.barrel_roll:hover{
    animation: barrel_roll 0.4s ease-in;
    animation-iteration-count: 1;
}

/* the about page */
.content_word_2 {
    opacity: 0.9;
}
.content_word_2:hover {
    animation: fade_into_colour_2 0.2s ease-in forwards;
    animation-iteration-count: 1;
}
.content_word_1{
    opacity: 0.6;
}



/* font size mins and maxes */
:root {
    --step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
    --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
    --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
    --step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
    --step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
    --step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
    --step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
    --step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
}

/* spin animation */
@keyframes rotate_yellow{
    0% { 
        transform: rotate(0deg); 
        }
    20% { transform: rotate(15deg); }
    30% { transform: rotate(7deg);
        filter: sepia() saturate(100000%) hue-rotate(-20deg); }
    40% { transform: rotate(0deg); }
    60% { transform: rotate(-15deg); }
    70% { transform: rotate(-7deg); }
    80% { transform: rotate(0deg); }
    100% { 
        transform: rotate(0deg);
        filter: sepia() saturate(100000%) hue-rotate(-20deg); 
        }
    to {
        opacity: 1;
    }
}

@keyframes rotate_blue{
    0% { 
        transform: rotate(0deg); 
        }
    20% { transform: rotate(15deg); }
    30% { transform: rotate(7deg);
        filter: sepia() saturate(100000%) hue-rotate(90deg) brightness(.9); }
    40% { transform: rotate(0deg); }
    60% { transform: rotate(-15deg); }
    70% { transform: rotate(-7deg); }
    80% { transform: rotate(0deg); }
    100% { 
        transform: rotate(0deg);
        filter: sepia() saturate(100000%) hue-rotate(90deg) brightness(.9); 
        }
    to {
        opacity: 1;
    }
}

@keyframes barrel_roll {
    to {
        transform: rotate(360deg);
    }
}

/* slide in from right animation */
@keyframes change_border_colour {
    to{
        border: var(--space-3xs) solid #279AF1;
    }
}

/* simple fade in opacity */
@keyframes fade_in{
    to{
        opacity: 1;
    }
}

/* fade in to colour */
@keyframes fade_into_colour_1 {
    to{
        color: #279AF1;
        opacity: 1;
    }
}

@keyframes fade_into_colour_2 {
    to{
        color: #E94F37;
        opacity: 1;
    }
}