@font-face{
    font-family: 'Fredoka';
    src: url('fredoka.woff2') format('woff2');
    font-weight: 300 500;
    font-style: normal;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Fredoka', sans-serif;
}
body{
    background-color: #192C3C;
    overflow: visible;
    min-height: 100vh;
}
strong{
    font-variation-settings: 'wght' 500;
}
.header {
    background-color: #62BACF;
    background-image: url(rainbow.webp);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    color: #192C3C;
    padding: 2em 0;
    display: flex;
    max-width: 70em;
    max-height: 40em;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height:40vh;
    margin: 0 auto;
}
.buttons{
    max-width: 70em;
    margin: 0 auto;
    margin-top:1em;
    display: flex;
    justify-content: center;
    gap: 1em;
}
.buttons a{
    display: block;
    width: 3em;
    height: 3em;
    background-size: contain;
    background-repeat: no-repeat;
}
.buttons #bluesky{
    background-image: url(bluesky.webp);
}
.buttons #discord{
    background-image: url(discord.webp);
}
.main{
    max-width: 70em;
    margin: 0 auto;
    margin-top: 1em;
    color: #fff;
}
blockquote{
    background: rgba(0, 0, 0, 0.2);
    padding: 1em;
    margin-bottom: 1em;
    border-radius: .8em;
    border: 4px solid #02687E;
}
blockquote p{
    margin:0!important;
    font-family: monospace!important;
    font-variation-settings: 'wght' 500!important;
}
blockquote audio{
    border-radius: .4em;
    margin-top: .4em;
}
.main p, li{
    line-height: 1.3em;
    margin-bottom: 1em;
    font-size: 1.5em;
    font-variation-settings: 'wght' 300;
}
.main h1, h2, h3{
    line-height: 1.6em;
    font-size: 2em;
    font-variation-settings: 'wght' 500;
}
.header-container{
    text-align: left;
    vertical-align: middle;
    /* background:red; */
    margin-left:4em;
    height: min-content;
    width: max-content;
    overflow: visible;
    display:flex;
    flex-direction: column;
}
.header-container div{
    display: flex;
}
.header-container p{
    font-size: 6em;
    line-height: 1em;
    display: inline-flex;
}
.star{
    width:4em;
    height:4em;
    transform:translate(-.5em, -.5em);
    background-image: url(star.webp);
    background-size: contain;
    background-repeat: no-repeat;
}
.header-container h2{
    font-size: 2.4em;
    line-height: 1em;
    font-variation-settings: 'wght' 500;
}
@media (max-width: 600px) {
    .header {
        max-width: 100%;
        padding: 1em 0;
    }
}