@import url('https://fonts.googleapis.com/css2?family=Updock&family=Advent+Pro:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Updock&family=Advent+Pro:wght@600&display=swap');

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

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

.page:first-of-type {
    height: 100vh;
    border: none;
    background: rgb(133,141,143);
    background: linear-gradient(178deg, #F2F2F2 0%, #D5E7F2 85%, #4D6F8C 100%); 
}

.page {
    position: relative;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 1em solid #4D6F8C;
    background: #D5E7F2;
}
.page:has(+ .page) {
    margin-bottom: .2em;
}

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

    margin: 0;
    font-size: 7rem;
    color: #252C40;
    margin-bottom: -0.4em;

    position: relative;
}
h2 {
    font-weight: 600;
    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: min(80vh, 100vh - 10.5rem);
    min-height: 15rem;
    width: auto;
}

i svg {
    height: 2em;
    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;
}


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