:root {
    --background:#183325;
    --color:#351a0e;
    
    --main:#deddd6;
    --shadow:#030a04;
    --link:#0b5317;
    --linkhover:#64500f;
    --border:#a9820e;

    --menucolor:#41360f;
    --menuhover:#357f42;

    --textarea: #efefe9;

    --box: #d5d3c6;
    --boxborder:#357f42;
}

@font-face {
	font-family:"Atkinson";
	src: url("/assets/fonts/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2"), 
	url("/assets/fonts/WOFF/Atkinson-Hyperlegible-Regular-102.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family:"Atkinson";
	src: url("/assets/fonts/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2") format("woff2"), 
	url("/assets/fonts/WOFF/Atkinson-Hyperlegible-Bold-102.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family:"Atkinson";
	src: url("/assets/fonts/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2") format("woff2"), 
	url("/assets/fonts/WOFF/Atkinson-Hyperlegible-Italic-102.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family:"Atkinson";
	src: url("/assets/fonts/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2") format("woff2"), 
	url("/assets/fonts/WOFF/Atkinson-Hyperlegible-BoldItalic-102.woff") format("woff");
	font-weight: bold;
	font-style: italic;
}

* { margin:0; padding:0; transition:0.5s; }
img { max-width:80%; margin:5px; }

body {
    background:var(--background) url(https://cdn.discordapp.com/attachments/769028976688889877/1123714984833196142/IMG_0182.png) fixed;
    font:14pt "Atkinson", sans-serif;
    color:var(--color);
}

.visually-hidden {
    display:none;
}

#container {
    width:550px;
    margin: 25px auto;
    background:var(--main);
    box-shadow:10px 10px 0px var(--shadow);
}

header {
    text-align:center;
    padding:10px;
}


nav {
    margin:auto;
    text-align:center;
    font:16pt "Atkinson", sans-serif;
    text-transform:uppercase;
    width:calc(100% - 50px);
    padding:5px;
    border-bottom:1px dashed var(--border);
}

nav ul {
    display:inline;
    list-style:none;
}

nav li {
    display:inline-block;
}

nav li a {
    color:var(--menucolor);
    text-decoration:none;
    padding:5px;
}

nav li a:hover {
    color:var(--menuhover);
}

main {
    padding:25px;
}

main p {
    line-height:1.4;
    margin:8px 0 8px 0;
}

main a {
    color:var(--link);
    text-decoration:underline;
}

main a:hover {
    color:var(--linkhover);
}

h1 {
    font:25pt "Atkinson", sans-serif;
    font-variant:small-caps;
}

h2 {
    font:21pt "Atkinson", sans-serif;
    margin:6px 0 6px 0;
}

main ul, ol {
    margin-left:30px;
}

main li {
    line-height:1.4;
    margin:5px 0 5px 0;
}

.box {
    background:var(--box);
    border:1px solid var(--boxborder);
    padding:10px;
    margin:10px;
    box-shadow:3px 3px var(--boxborder);
    text-align:center;
}

.membertitle {
    font-size: 15pt;
}

.name {
    color:var(--link);
    font-size:18pt;
}


footer {
    text-align:center;
    font-size:12pt;
    margin:20px 8px 8px 8px;
}

input, select, textarea, button {
    padding:5px;
    margin:5px;
    font: 14pt "Atkinson", sans-serif;
    background: var(--textarea);
    color: var(--color);
    border: 1px solid var(--link);
}

@media screen and (max-width:599px) {
    body {
        font-size:12pt;
    }

    h1 {
        font-size: 20pt;
    }

    h2 {
        font-size:18pt;
    }

    nav {
        font-size:14pt;
    }

    .name {
        font-size:15pt;
    }

    .membertitle {
        font-size:14pt;
    }

    input, select, textarea, button {
        font-size:12pt;
        max-width:90%;
    }

    #container {
        width:calc(100% - 50px);
    }

    #content {
        width:100%;
    }
}