/* VARIABLES */
:root {
    --pink: #D60270;
    --pink-muted: #ffa6d7;
    --purple: #9B4F96;
    --purple-muted: #e2bcff;
    --blue: #0038A8;
    --blue-muted: #8284ff;
    --box-bg: #ffe9f7e5;
    --main: #2d0036;
    --shadow: #5e1e6bce;
}

@font-face {
    font-family: National Park;
    src: url(/fonts/nationalpark-regular-webfont.woff2);
}

@font-face {
    font-family: Bangers;
    src: url(/fonts/bangers-regular-webfont.woff2);
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.15;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

}

body {
    font-family: National Park, sans-serif;
    font-size: 0.95em;
    color: var(--main);
    /* Gradient background:  https://grabient.com/LQOgHAnATANADDUlYEYQQGwBZ4zZnEFOQ4gVhhDggkrAGZaFwIsg?style=linearSwatches&angle=315&steps=3 */
    background: linear-gradient(315deg, var(--blue) 0.000%, var(--blue) 33.333%, var(--purple) calc(33.333% + 1px), var(--purple) 66.667%, var(--pink) calc(66.667% + 1px) 100.000%);
    scrollbar-color: var(--blue-muted) var(--purple-muted); /* Mozilla scrollbar fallback */
}

p {
    margin: 5px 5px 15px 5px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0.2em;
}

a {
    color: var(--blue);
}

a:hover {
    filter:brightness(150%);
}

hr {
    border: 1px solid var(--shadow);
}

mark {
    background-color: var(--shadow);
    color: var(--box-bg);
    padding: 0 4px;
    border-radius: 2px;
}

textarea {
    margin-left: 10px;
    max-width: 100%;
    min-height: 50px;
    height: auto;
}

.tablecontainer {
    overflow-x: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td {
    text-align: center;
    overflow: hidden;
}

td, th {
    border: 1px solid var(--main);
    padding: 0.25em;
}
tr:nth-child(odd){
    background-color: var(--box-bg);
}
tr:nth-child(even){
    background-color: #e9d7d7b5;
}

tr:hover {
    background-color: #d3c3c3;
}

th {
    background-color: var(--main);
    color: var(--box-bg);
}

/* SCROLLBAR */

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	position: fixed;
	right: 12px;
	z-index: 1;
}

::-webkit-scrollbar-track {
	box-shadow: 0;
	border-radius: 0px;
	background-color: var(--purple-muted);
}

.post ::-webkit-scrollbar-track {
	border-left: 0px solid var(--pink);
}

::-webkit-scrollbar-thumb {
	background: var(--blue-muted);
	border-radius: 0px;
}

/* WRAPPERS */

.title {
    text-align: center;
    padding-top: 2em;
}

.title p {
    margin: 0 auto;
    font-family: Bangers, sans-serif;
    color: var(--purple-muted);
    font-size: 7em;
    -webkit-text-stroke: 2px var(--main);
    text-shadow: 5px 5px var(--shadow);
}

.wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    width: 45vw;
    padding: 0;
    gap: 1em;
    margin: 0 auto;
    padding-bottom: 1em;
}

.navbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0;
    gap: 1em;
    text-align: center;
}

.navbar a {
    background-color: var(--main);
    color: var(--purple-muted);
    padding: 8px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bolder;
    font-size: 1.25em;
}

.main {
    padding: 1em;
    background-color: var(--box-bg);
    border: 2px solid var(--main);
    border-radius: 5px;
    box-shadow: 0.5em 0.5em var(--shadow);
}

.footer {
    padding: 0.25em;
    background-color: var(--box-bg);
    border: 2px solid var(--main);
    border-radius: 5px;
    box-shadow: 0.5em 0.5em var(--shadow);
    text-align: center;
}

.footer p {
    margin: 2px;
}

.widgets {
    margin: auto;
}

.widgets td {
    min-width:150px;
}

@media only screen and (max-width: 768px) {
    .wrapper {
        width: 80vw;
    }

    .navbar {
        flex-wrap: wrap;
    }
}