:root {
    /*Tokyo Night Palette*/
    --tn-c-1: #00ffd2;
    --tn-c-2: #ff4499;
    --tn-c-3: #000000;
    --tn-c-4: #0a0047;
    --tn-c-5: #004687;

    /*Sweetie 16 Palette*/
    --swty-16-1: #1a1c2c;
    --swty-16-2: #5d275d;
    --swty-16-3: #b13e53;
    --swty-16-4: #ef7d57;
    --swty-16-5: #ffcd75;
    --swty-16-6: #a7f070;
    --swty-16-7: #38b764;
    --swty-16-8: #257179;
    --swty-16-9: #29366f;
    --swty-16-10: #3b5dc9;
    --swty-16-11: #41a6f6;
    --swty-16-12: #73eff7;
    --swty-16-13: #f4f4f4;
    --swty-16-14: #94b0c2;
    --swty-16-15: #566c86;
    --swty-16-16: #333c57;

    /*Extra Colors*/
    --ext-c-purp: #ab4af9;
}

@font-face {
    font-family: 'PixelFont';
    src: url('./fonts/monogram.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: var(--swty-16-9, #29366f);
    padding-inline: 5%;
    padding-bottom: 5%;
    padding-top: 1%;
    font-size: 3vw;
    font-family: 'PixelFont';
}

table,
tr,
th,
td {
    border: 1px solid var(--swty-16-1);
    border-collapse: collapse;
    padding: 0.5%;
}

h1 {
    color: var(--swty-16-6, #a7f070);
    text-shadow: 0 0 10px var(--swty-16-7, #38b764);
}

h2,
h3 {
    color: var(--swty-16-12, #73eff7);
    text-shadow: 0 0 10px var(--swty-16-11, #41a6f6);
}

h4 {
    color: var(--swty-16-11);
    text-shadow: 0 0 10px var(--swty-16-11, #41a6f6);
}

p,
li,
td,
th {
    padding-left: 1%;
    color: var(--ext-c-purp, #ab4af9);
    text-shadow: 0 0 2px var(--ext-c-purp, #ab4af9);
    font-size: 32px;
}

hr {
    color: var(--swty-16-8);
    background-color: var(--swty-16-8, #257179);
    height: 3px;
    border: none;
}

iframe {
    border: 3px solid var(--swty-16-8);
    border-radius: 10px;
    width: 90%;
    height: 50vh;
}