:root{
    --main-text: #83946a;
    --secondary-text: #b9ca9e;
    --highlight: #e574a4;
    --white: #fff;
}

.darkmode {
    --main-text: #896b95;
    --secondary-text: #4e3561;
    --highlight: #1a8b7c;
    --secondary-highlight: #1b3838;
    --white: #111111;
    --background: #15111d;
}

@font-face {
    font-family: 'rainy';
    src: url(/res/font/rainyhearts.ttf);
}

@font-face {
    font-family: 'pixels';
    src: url(/res/font/GothicPixels.ttf);
}

@font-face {
    font-family: 'emoji';
    src: url(/res/font/EmojiFont.ttf);
}

body {
    font-family: 'rainy';
    margin: 0;
    padding: 5px;
    color: var(--main-text);
    font-size: 3.2vw;
}

h1 {
    margin: 0;
    font-family: 'rainy';
    text-transform: capitalize;
}

h1::before {
    content: "¡ ";
}

p {
    text-indent: 45px;
}

u {
    background-color: var(--highlight);
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
}

.desc {
    background-color: var(--main-text);
    padding: 5px;
    margin: 20px;
    margin-bottom: 30px;
    border-radius: 10px;
    border: 1px dashed var(--secondary-text);
    color: var(--secondary-text);
}

.desc a, .desc a:visited {
    color: var(--white);
    text-decoration: none;
}

.desc a:hover {
    color: var(--secondary-text);
}
.nomargin {
    margin: 0;
    margin-bottom: 5px;
}

t {
    background-color: var(--secondary-text);
    padding: 2px;
    text-transform: uppercase;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--white);
}

::-webkit-scrollbar-thumb {
    border: 1px dashed var(--secondary-text);
    border-radius: 20px;
}

a, a:visited {
    color: var(--main-text);
}

a:hover {
    text-decoration: none;
}

hr {
    border-top: 1px dashed var(--main-text);
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.sun {
    display: none;
}

.moon {
    display: inline-block;
}

body.darkmode .sun {
    display: inline-block;
}

body.darkmode .moon {
    display: none;
}