:root {
    --font-primary: "Helevetica", sans-serif;
    --standard-gap: 1rem;
    --frame-color: #ffffff;
    --button-color: color-mix(in display-p3, white 90%, black 10%);
    --input-color: color-mix(in display-p3, white 60%, black 40%);
    --dark-mode: #141535be;
    --light-mode: #2196F3;
   }
   
* {
    font-family: var(--font-primary, system-ui);
}

/* Phones */
@media (max-width: 768px) {
    * {
        text-align: center !important;
    }
    .page-header {
        font-size: x-large !important;
    }
    address {
        text-align: left !important;
    }
    nav ul li {
        font-size: x-large;
    }
    img, video, iframe {
        max-height: 60vh !important;
        max-width: 70vw !important;
    }
    #food-pic {
        flex-direction: column !important;
        align-items: center !important; 
    }
    figcaption pre {
        word-wrap: break-word !important;
        text-align: center;
        white-space: normal;
    }
    video:hover, img:hover, #msg-button:hover {
        transition: none !important;
        transform: none !important;
    }
    job-exp:hover, project-card:hover {
        transition: none !important;
        transform: none !important;
    }
    video:not(:hover), img:not(:hover), #msg-button:not(:hover), job-exp:not(:hover), project-card:not(:hover){
        transition: none !important;
        transform: none !important;
    }
    #send-msg-part {
        font-variant: small-caps;
        font-size: xx-large !important;
    }
    .contact-label {
        font-size: large !important;
    }
    #msg-button, #contact-back {
        font-size: 15px;
        font-weight: 300;
        min-width: 80dvw;
        font-size: large !important;
    }
    fieldset {
        align-items: center !important;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1200px) {
    .page-header {
        font-size: x-large !important;
    }
    address {
        font-size: larger !important;
        font-weight: 300 !important;
    }
    nav ul li {
        font-size: x-large !important;
    }
    img, video, iframe {
        max-height: 60dvh;
        max-width: 70dvw;
    }
    #send-msg-part {
        font-variant: small-caps;
        font-size: xx-large !important;
    }
    .contact-label {
        font-size: large !important;
    }
    #msg-button, #contact-back {
        font-size: 15px;
        font-weight: 300;
        min-width: 60dvw;
        font-size: large !important;
    }
}

header, footer {
    padding: var(--standard-gap);
    font-size: larger;
}

address {
    font-weight: 300;
    text-align: center;
}
h1, h2 {
    font-weight: 500;
    animation: fade 1.5s ease-in-out;
}

a {
    color: black;
    text-decoration: none; 
}

a:visited {
    color: black; 
}

.page-header {
    padding: var(--standard-gap);
}

/* Animations, Transitions, and Transforms */
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

img, video, iframe {
    max-height: 50dvh;
    max-width: 90dvw;
}

video:hover, img:hover, #msg-button:hover {
    transition: transform 0.5s ease-in-out;
    transform: scale(1.1);
}
job-exp:hover, project-card:hover {
    transition: transform 0.5s ease-in-out !important;
    transform: scale(1.01);
}
video:not(:hover), img:not(:hover), #msg-button:not(:hover), job-exp:not(:hover), project-card:not(:hover), nav ul li:not(:hover)  {
    transition: transform 0.5s ease-in-out !important;
    transform: scale(1);
}

/* Navigation Bar */
nav ul {
    display: flex;
    justify-content: space-evenly;
    gap: var(--standard-gap);
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}

nav ul li:hover {
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    background-color: color(srgb 0.94 0.94 0.94);
    transform: scale(1.05);
}

nav ul li {
    display: block;
    padding: 8px 20px;
    border: 2px solid;
    border-radius: 3px;
    text-align: center;
    background-color: var(--frame-color);
}

a {
    text-decoration: none;
}

/* Light-dark Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

body.dark-mode, header ul li.dark-mode{
    transition: background-color 0.5s ease-in-out, transform 0.3s ease-in-out;
    background-color: #151728;
    color: #ffffff;
}

job-exp.dark-mode, project-card.dark-mode{
    transition: background-color 0.5s ease-in-out;
    background-color: #242b60;
    border: 2px solid #62787f;
    color: #ffffff;
}

a.dark-mode {
    color: white !important;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dark-mode);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

/* Change color as toggled */
input:checked + .slider {
    background-color: var(--light-mode);
    outline: 3px solid var(--dark-mode);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--light-mode);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
    outline: 3px solid white;
}

.slider.round:before {
    border-radius: 50%;
}

/* Sections */
#home, #bio, #education {
    display: flex;
    padding: var(--standard-gap, 1rem);
    animation: fade 1.5s ease-out;
}

/* Home page blurb and Bio */
welcome-text {
    font-size: x-large;
}

#home, #bio {
    justify-content: space-evenly;
    align-items: center; 
    text-align: left; 
    flex-wrap: wrap;
}

bio {
    flex: 1;
}

/* Education */
#education {
    align-items: flex-start;
    justify-content: space-between;
}

edu {
    flex: 1; 
    max-width: 40vw;
}

#courses {
    flex: 1; 
    max-width: 50vw;
}

#courses th, #courses td {
    padding: 5px;
    text-align: center;
    border: 1px solid black;
}

/* Pictures of hobbies */
#resume, #hobbies {
    padding: var(--standard-gap, 1rem);
}

#food-pic {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end; 
    flex-wrap: wrap;
}
figcaption pre{
    text-align: center;
}

/* Experiences */

job-exp:has(h3) {
    animation: fade 1.5s ease-in-out;
    display: block;
    padding: var(--standard-gap, 1rem);
    margin: 10px;
    background-color: var(--frame-color);
    border: 2px solid #021218;
    border-radius: 3px;
    text-align: left;
    color: #333;
    font-size: 1.2em;
}

#load-local {
    background-color: rgb(197, 237, 210);
}

#load-remote {
    background-color: rgb(197, 226, 237);
}

/* Contact */
#contact {
    animation: fade 1.5s ease-in-out;
    padding: var(--standard-gap);
}

#send-msg-part {
    font-variant: small-caps;
    font-size: x-large;
}

.contact-lebel {
    padding: var(--standard-gap);
}

.contact-field {
    width: 80dvw;                  
    padding: 5px 3px;           
    border: 2px solid var(--input-color);      
    border-radius: 3px;         
    font-size: 16px;            
}

.contact-field:user-invalid {
    background-color: rgb(243, 199, 199);
}

.error-message, .info {
    font-size: small;
}

#full-char {
    color: red;
    font-weight: bold;
}

#msg-button, #contact-back {
    display: block;
    padding: 8px 20px;
    border: 2px solid;
    border-radius: 3px;
    text-align: center;
    background-color: var(--button-color);
    font-size: 15px;
    font-weight: 300;
}