html{
    --pink: rgb( 255, 200, 221);
}

@font-face {
    font-family: Bagerich;
    src: url(/static/fonts/Bagerich-Regular-converted.otf);
}

@font-face {
    font-family: brains-bold;
    src: url(/static/fonts/JetBrainsMono-Bold-converted.otf);
}

@font-face {
    font-family: brains-light;
    src: url(/static/fonts/JetBrainsMono-Light-converted.otf);
}

@font-face {
    font-family: brains-regular;
    src: url(/static/fonts/JetBrainsMono-Regular-converted.otf);
}

@font-face {
    font-family: brains-semibold;
    src: url(/static/fonts/JetBrainsMono-SemiBold-converted.otf);
}

body{
    background-color: rgb(250, 248, 242);
}

.try-button{
    background-color: var(--pink);
    border-radius: 10px;
    border: solid 1px black;
    box-shadow: 5px 5px 0px rgba(35, 35, 35, 0.139);
}

.socials a {
    border:solid 3px var(--pink);
    border-radius: 10px;
}

.socials a:hover{
    border:solid 3px black;
    background-color: var(--pink);
}


h2,h3,.bold *{
    --font-family: brains-bold;
    --units-per-em: 1000;
    --font-cap-height: 730;
    --ascent: 1020;
    --descent: 300;
    --line-gap: 0;
}

* {
    --font-family: brains-regular;
    --units-per-em: 1000;
    --font-cap-height: 730;
    --ascent: 1020;
    --descent: 300;
    --line-gap: 0;
}

.semibold{
    --font-family: brains-semibold;
    --units-per-em: 1000;
    --font-cap-height: 730;
    --ascent: 1020;
    --descent: 300;
    --line-gap: 0;
}

.light{
    --font-family: brains-light;
    --units-per-em: 1000;
    --font-cap-height: 730;
    --ascent: 1020;
    --descent: 300;
    --line-gap: 0;
}

.scroll > *{
    max-height: 400px;
    max-width: 100vw;
    overflow-x: scroll !important;
}