@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --main-font: 'Host Grotesk';
    --serif-font: 'Old Standard TT';
    --main-color: #ffcc00;
}


body {
    margin:0;
    font-family: var(--main-font);
    color:white;
}

canvas {
    position:fixed;
    top:0;
    left:0;
}

main {
    position:absolute;
    width: 100%;
}

header {
    && h1 {
        font-size: 6rem;
        margin-top: 0;
    }
    && h2 {
        font-size: 3rem;
        margin-bottom: 0;
        color:var(--main-color)
    }
    margin:7vh;
}

section {
    margin:5vh;
    width:30%;
    background-color: #0000008a;
    backdrop-filter: blur(50px);
    padding:5vh;
    margin-bottom:10vh;
    border: 1px solid #333
}

section h3 {
    font-family: var(--serif-font);

    border-bottom: 1px solid #fff;

    padding:0.5vh;
    padding-bottom:1vh;
    width: fit-content;

    font-size: 4rem;

    margin-top: 0;

}

section p {
    font-size: 1.2rem;
    padding-left: 2vh;
    position: relative;
}

section p::before{
    content: ">";
    font-family: monospace;
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--main-color);
}

footer {
    padding:0.5vh;
    background: radial-gradient(circle at bottom,#ffffff41, #00000000);
}

footer p {
    color: #fff;
    text-align: center;
}

.warning {
    font-size: 0.7rem;
    color:red;
    padding-left: 0;
}

.warning::before {
    content:''
}