* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    font-size: 16px;
    --background-color: #f5f5f5;
    --text-color: #252525;
    --shadow-color: 0deg 0% 57%;
    --underscore-color: #ad7fa8;
    --h1-color: #ef2929;
    --h2-color: #34e2e2;
    --h4-color: #81d4fa;
    --em-color: #8ae234;
    --shadow-medium:
    0px 0.4px 0.4px hsl(var(--shadow-color) / 0.45),
    0px 0.9px 0.9px -0.9px hsl(var(--shadow-color) / 0.39),
    -0.1px 2px 2px -1.7px hsl(var(--shadow-color) / 0.34),
    -0.2px 4.4px 4.3px -2.6px hsl(var(--shadow-color) / 0.29),
    -0.4px 8.9px 8.7px -3.5px hsl(var(--shadow-color) / 0.24);
    --shadow-high:
    0px 0.4px 0.4px hsl(var(--shadow-color) / 0.46),
    -0.1px 1.7px 1.7px -0.4px hsl(var(--shadow-color) / 0.43),
    -0.1px 3.1px 3px -0.9px hsl(var(--shadow-color) / 0.4),
    -0.2px 5.3px 5.2px -1.3px hsl(var(--shadow-color) / 0.37),
    -0.4px 8.8px 8.6px -1.7px hsl(var(--shadow-color) / 0.34),
    -0.6px 14.1px 13.8px -2.2px hsl(var(--shadow-color) / 0.31),
    -0.9px 21.9px 21.4px -2.6px hsl(var(--shadow-color) / 0.28),
    -1.3px 32.5px 31.7px -3.1px hsl(var(--shadow-color) / 0.26),
    -1.9px 46.7px 45.6px -3.5px hsl(var(--shadow-color) / 0.23);
}

.light-mode {
    --background-color: #f5f5f5;
    --text-color: #252525;
    --underscore-color: #ad7fa8;
    --h1-color: #ef2929;
    --h2-color: #34e2e2;
    --h4-color: #4dd0e1;
    --em-color: #8ae234;

}

.dark-mode {
    --background-color: #252525;
    --text-color: #f5f5f5;
    --underscore-color: #75507b;
    --h1-color: #cc0000;
    --h2-color: #06989a;
    --h4-color: #81d4fa;
    --em-color: #4e9a06;
}

.document {
    width: 100%;
    margin: auto;
    padding: 3%;
    box-shadow: var(--shadow-high);
    text-align: left;
    display: grid;
    overflow-wrap: break-word;
    max-width: 56rem;
}

.document * {
    overflow-wrap: break-word;
}

.hidden {   
    opacity: 0;
    filter: blur(.2rem);
    transition: opacity .4s ease-out,   
                filter .4s ease-out,  
                transform .2s ease-out;
    transform: translateX(-100%);
}

.show { 
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

body {
    margin: 0;
    padding: 1.25rem;
    display: grid;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Hack, sans-serif;
    font-size: 1.125rem;
    letter-spacing: .063rem;
    word-spacing: .126rem;
    line-height: 1.4;
    transition: background .2s, color .2s;
    overflow-x: hidden;
}

.header {
    display: grid;
    padding: 1.25rem;
    width: clamp (100%, 40.625rem);
    text-align: left;
    justify-self: center;
}

@mixin contactInfoDelays($start: 2, $end: 5, $delayStep: 50ms) {
    @for $i from $start through $end {
        .contact-info p:nth-child(#{$i}) {
            transition-delay: (($i - $start) * $delayStep);
        }
    }
}

@include contactInfoDelays();

.skills {
    display: flex;
    gap: .625rem;
}

.hard-skills,
.soft-skills {
    flex: 1;
    box-sizing: border-box;
}

.button-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.theme-button {
    max-width: 10rem;
    background-color: var(--background-color);
    color: var(--text-color);
    cursor: pointer;
    flex: 1 1 auto;
    font-family: Hack, sans-serif;
    font-size: 1rem;
    border: .19rem solid var(--text-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-medium);
    box-sizing: border-box;
    line-height: 1;
    margin: 0;
    outline: none;
    padding: 1rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: box-shadow .2s, -webkit-box-shadow .2s;
    white-space: nowrap;
    border: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.theme-button:hover {
    box-shadow: var(--text-color) 0 0 0 .19rem, transparent 0 0 0 0;
}

h1 {
    font-size: 3rem;
    color: var(--h1-color);
}

h2 {
    font-size: 2rem;
    color: var(--h2-color);
}

h3 {
    font-size: 1.7rem;
    color: var(--h1-color);
}

h4 {
    font-size: 1.2rem;
    color: var(--h4-color);
}

em {
    color: var(--em-color);
    font-style: italic;
}

strong {
    font-weight: 600;
}

li {
    list-style-type: disc;
    list-style-position: inside;
}

.course-module {    
    list-style-type: upper-roman;
}

a {
    text-decoration: none;
    color: var(--text);
    vertical-align: top;
    background-image: linear-gradient(transparent 50%, var(--underscore-color) 50%);
    background-size: auto 175%;
    transition: background .1s ease-in-out;
}

a:hover {
    background-position-y: 100%;
}

a:active {
    color: #0470c8;
}

footer {
    display: grid;
    justify-content: center;
    align-items: center;
    margin: 1.25rem;
    padding: 1.25rem;
}

@media (max-width: 45.5rem) {
    body {
        font-size: 1rem;
    }

    .document {
        padding: 0;
        box-shadow: 0 0 0;
    }

    .theme-button {
        font-size: .875rem;
    }

    .skills {
        display: block;
    }

    .hard-skills,
    .soft-skills {
        margin-bottom: .625rem;
    }
}