/**
* Fonts
*/

/* latin */
@font-face {
    font-family: 'Advent Pro';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: url("advent_pro_500.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Advent Pro';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url("advent_pro_600.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Updock';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("updock_400.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Latin Modern Roman';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("LMRoman10-Regular.woff2") format('woff2');
}
@font-face {
    font-family: 'Latin Modern Roman';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url("LMRoman10-Bold.woff2") format('woff2');
}

/**
 * Styles
 */
html, body {
    margin: 0;
    padding: 0;
    background: #131721;
    /* Hides scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
body::-webkit-scrollbar {
    display: none;
}
html {
    overflow-y: hidden; /* Needed for scroll snap */
}

body {
    font-family: "Advent Pro", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;

    max-height: 100vh;
    overflow-y: scroll; /* Needed for scroll snap */
    scroll-snap-type: y mandatory;
}

.page {
    height: 100vh;
    border: none;
    background: rgb(133,141,143);
    background: linear-gradient(178deg, #F2F2F2 0%, #D5E7F2 85%, #4D6F8C 100%);
    position: relative;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: #D5E7F2;

    scroll-snap-align: start;
}
.page:has(+ .page) {
    margin-bottom: .2em;
}
#resume {
    overflow-y: auto;
    align-items: start;
}

h1 {
    font-family: "Updock", cursive;
    font-size: 2rem;
    font-weight: 400;
    font-style: normal;

    margin: 0;
    color: #252C40;
}
h2 {
    font-weight: 600;
    font-size: 1.2rem;
}
h3 {
    font-weight: 600;
    font-size: 1rem;
}

#splashscreen h1 {
    position: relative;
    font-size: 7rem;
    margin-bottom: -0.4em;
}
#splashscreen h2 {
    font-size: 2rem;
}

h2#subtitle {
    --d: 2s;
    display: inline-block;
    vertical-align: bottom;

    color: #4D6F8C;
}
h2#subtitle > span {
    display: grid;
    overflow: hidden;
    height: 1.2em;
}
h2#subtitle > span > span {
    width: 0%;
    max-width: max-content;
    overflow: hidden;
    height: inherit;
    word-break: break-all;
    animation:
        c 1s infinite steps(1),  
        t var(--d) linear infinite alternate,
        m calc(var(--d) * 2 * var(--n)) steps(var(--n)) infinite;
}
h2#subtitle > span > span {
    content: " ";
    display: inline-block;
}

@keyframes t{
    90%,100% { width:100% }
}

@keyframes c{
  0%,100% { box-shadow: 5px 0 0 #0000 }
  50%     { box-shadow: 5px 0 0 #131721 }
}

@keyframes m{
  100% { transform: translateY(calc(-100% * var(--n))) }
}

#photo-container {
    position: absolute;
}
#photo {
    position: absolute;
    left: 1rem;
    bottom: 0;

    height: 80vh;
    min-height: 15rem;
    max-height: calc(100vh - 10.5rem);
    max-width: calc(100vw - 15em);

    object-fit: contain;
    object-position: left bottom;
}

i svg {
    height: 2.5em;
    color: #131721;
    fill: currentColor;
}

ul#contact {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: center;
    align-self: flex-end;
}

#resume {
    display: flex;
    flex-direction: row;
    gap: 1em;
    align-items: start;

    
    font-family: 'Latin Modern Roman';
}

#resume aside {
    min-width: 15rem;
    max-width: 20rem;
}

#resume h2 {
    border-bottom: .1em solid black;
}

section.work h3, section.education h3, section.skill h3, section.interest h3, section.language h3, section.volunteer h3 {
    display: inline-block;
    margin: 0;
    padding: 0;
}

span.date {
    color: #777;
    font-size: .9em;
}

#resume aside h1 {
    text-align: center;
    font-family: 'Latin Modern Roman';
    font-weight: bold;
    font-size: 2rem;
}
#resume aside h1 i svg {
    height: 1em;
    vertical-align: -10%;
}

#resume aside a {
    text-decoration: none;
    color: inherit;
}

#resume main h1 {
    display: inline;
}

#resume .language h3 {
    width: 6em;
}

span.tag {
    display: inline-block;
    color: white;
    padding: .1em .3em;
    border-radius: .2em;
    margin: .1em;
    font-size: .9em;
}


#resume main header {
    margin-top: .8rem;
    text-align: justify;
}
#resume main header h1 {
    line-height: 1rem;
}

#resume main header p:first-of-type {
    display: inline;
}
#resume main header p {
    margin: 0;
}

#resume main ul {
    margin-top: 0;
    padding-left: 1rem;
    text-align: justify;
}


/*span.tag:nth-child(1) { background: #4D6F8C; }  /* Blue */
/*span.tag:nth-child(2) { background: #8C4D6F; }  /* Magenta */
/*span.tag:nth-child(3) { background: #6F8C4D; }  /* Green */
/*span.tag:nth-child(4) { background: #8C6F4D; }  /* Brown */
/*span.tag:nth-child(5) { background: #4D8C6F; }  /* Teal */
/*span.tag:nth-child(6) { background: #6F4D8C; }  /* Purple */
/*span.tag:nth-child(7) { background: #8C4D4D; }  /* Red */
/*span.tag:nth-child(8) { background: #4D8C8C; }  /* Cyan */
/*span.tag:nth-child(9) { background: #8C8C4D; }  /* Yellow-green */
/*span.tag:nth-child(10) { background: #4D4D8C; } /* Indigo */

span.tag {
    background: #4D6F8C;
}

span.current {
    color: #24b500;
}

span.date {
    float: right;
}




@media (max-width: 480px) {
    h1 {
        font-size: 5rem;
    }
    #photo {
        max-height: 50vh;
        max-width: none;
    }
    ul#contact, #resume {
        flex-direction: column;
    }
}

@media (pointer:coarse) {
    i svg {
        height: 3em;
        padding: .5em 0;
    }
}


@page {
    margin: 0.5cm 0.3cm;
}

@media print
{    
    #splashscreen {
        display: none;
    }

    html, body, #resume {
        background-color: transparent;
        padding: 0;
        margin: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        height: auto;
        max-height: none;
    }

    #resume {
        overflow: visible;
    }


    #resume aside h1 {
        text-align: center;
        font-family: 'Latin Modern Roman';
        font-weight: bold;
        font-size: 1.5rem;
    }


    span.tag {
        background: #eff8ff;
        color: #2d4253;
    }
}