html {
    scroll-behavior: smooth;
}

h1 {
    color: #a0ba90;
    font-family: 'Tiny5';
    font-style: normal;
    font-size: 20px;
    letter-spacing: -0.75pt;
    font-weight: 200;
    font-display: swap;
    margin: 0px 0px 30px;
    margin-right: 2%;
    text-indent: 0;
    src: url(https://fonts.gstatic.com/s/dotgothic16/v21/v6-QGYjBJFKgyw5nSoDAGE7Oi25aLSizIM9pT7D_QAno5281PZBz6w.0.woff2) format('woff2');
    unicode-range: U+25ee8, U+25f23, U+25f5c, U+25fd4, U+25fe0, U+25ffb, U+2600c, U+26017, U+26060, U+260ed, U+26222, U+2626a, U+26270, U+26286, U+2634c, U+26402, U+2667e, U+266b0, U+2671d, U+268dd, U+268ea, U+26951, U+2696f, U+26999, U+269dd, U+26a1e, U+26a58, U+26a8c, U+26ab7, U+26aff, U+26c29, U+26c73, U+26c9e, U+26cdd, U+26e40, U+26e65, U+26f94, U+26ff6-26ff8, U+270f4, U+2710d, U+27139, U+273da-273db, U+273fe, U+27410, U+27449, U+27614-27615, U+27631, U+27684, U+27693, U+2770e, U+27723, U+27752, U+278b2, U+27985, U+279b4, U+27a84, U+27bb3, U+27bbe, U+27bc7, U+27c3c, U+27cb8, U+27d73, U+27da0, U+27e10, U+27eaf, U+27fb7, U+2808a, U+280bb, U+28277, U+28282, U+282f3, U+283cd, U+2840c, U+28455, U+284dc, U+2856b, U+285c8-285c9, U+286d7, U+286fa, U+28946, U+28949, U+2896b, U+28987-28988, U+289ba-289bb, U+28a1e, U+28a29, U+28a43, U+28a71, U+28a99, U+28acd, U+28add, U+28ae4, U+28bc1, U+28bef, U+28cdd, U+28d10, U+28d71, U+28dfb, U+28e0f, U+28e17, U+28e1f, U+28e36, U+28e89, U+28eeb, U+28ef6, U+28f32, U+28ff8, U+292a0, U+292b1, U+29490, U+295cf, U+2967f, U+296f0, U+29719, U+29750, U+29810, U+298c6, U+29a72, U+29d4b, U+29ddb, U+29e15, U+29e3d, U+29e49, U+29e8a, U+29ec4, U+29edb, U+29ee9, U+29fce, U+29fd7, U+2a01a, U+2a02f, U+2a082, U+2a0f9, U+2a190, U+2a2b2, U+2a38c, U+2a437, U+2a5f1, U+2a602, U+2a61a, U+2a6b2, U+2a9e6, U+2b746, U+2b751, U+2b753, U+2b75a, U+2b75c, U+2b765, U+2b776-2b777, U+2b77c, U+2b782, U+2b789, U+2b78b, U+2b78e, U+2b794, U+2b7ac, U+2b7af, U+2b7bd, U+2b7c9, U+2b7cf, U+2b7d2, U+2b7d8, U+2b7f0, U+2b80d, U+2b817, U+2b81a, U+2d544, U+2e278, U+2e569, U+2e6ea, U+2f804, U+2f80f, U+2f815, U+2f818, U+2f81a, U+2f822, U+2f828, U+2f82c, U+2f833, U+2f83f, U+2f846, U+2f852, U+2f862, U+2f86d, U+2f873, U+2f877, U+2f884, U+2f899-2f89a, U+2f8a6, U+2f8ac, U+2f8b2, U+2f8b6, U+2f8d3, U+2f8db-2f8dc, U+2f8e1, U+2f8e5, U+2f8ea, U+2f8ed, U+2f8fc, U+2f903, U+2f90b, U+2f90f, U+2f91a, U+2f920-2f921, U+2f945, U+2f947, U+2f96c, U+2f995, U+2f9d0, U+2f9de-2f9df, U+2f9f4;
}

body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 450px;

    font-family: "Inter", sans-serif;
    color: #5D4954;
    /* #754F5B; */
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    white-space: nowrap;
    gap: 20px;
}

.resized-image {
    max-width: 220px;
    height: fixed;
}

.text-wrapper {
    display: flex;
    flex-direction: column;
}

.contact-socials {
    font-family: 'Tiny5', sans-serif;
    font-weight: 20;
    font-size: 17px;
    line-height: 7px;
    color: #754F5B;
    margin: 23pt 0pt 20pt 20pt;
}

.socials {
    font-family: 'DotGothic16', sans-serif;
    font-weight: 500;
    font-size: 90%;
    line-height: 20px;
    color: #a0ba90;
}


.projects-button {
    background-color: white;
    color: white;
    border: none;
    margin-left: 2%;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-color: #a0ba90;
}

.demo {
    display: inside;
    text-align: right !important;
    text-decoration: underline;
    text-decoration-color: #a0ba90;
    font-size: 14px;
    margin: -0.7em;
    margin-right: 2%;

    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@media screen and (max-width: 330px) {

    .container,
    .demo,
    .projects-button,
    .contact-socials,
    .resized-image,
    .socials,
    .text-wrapper {
        text-align: center;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 0 900;
    font-style: normal;
}

@font-face {
    font-family: 'DotGothic16';
    src: url('fonts/dotgothic16-v21-latin_latin-ext-regular.woff2') format('woff2') url('fonts/DotGothic16-Regular.ttf') format('tff');
    font-weight: 0 900;
    font-style: normal;
}

@font-face {
    font-family: 'Tiny5';
    src: url('fonts/Tiny5-Regular.woff2') format('woff2') url('fonts/Tiny5-Regular.ttf') format('ttf');
    font-weight: 0 900;
    font-style: normal;
}