:root {
    --skin: #e5cdab;
    --bg: #100f03;

    --orange: #e56800;
    --light-orange: #fdb64e;

    --yellow: #fecf41;
}

@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka-regular.woff2') format('woff2');
    font-display: swap;
}

@media (min-width: 55rem) {
	body {
            max-width: 780px;
            padding-top: 20px;
        }

        main {
            margin: auto;
        }

}

@media (max-width: 55rem) {
        main {
            margin: auto;
            max-width: 92%;
        }
}

body {
    color: white;
    margin: auto;
}

h1 {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 30px;
}

header {
    text-align: center;
}

a {
    text-decoration: none;
    color: var(--light-orange);
}

a:hover {
    color: var(--yellow);
}

html {
    font-family: Iosevka;
    min-height: 100%;
	padding-top: 10px;
    padding-bottom: 5em;
    background: url("/images/blacktile.jpg");
    background-repeat: repeat;
}

article {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid white;
}

div {
    padding: 10px;
}

p { 
    font-size: 1rem;
}

p img {
    border: 2px solid white;
}

b {
    letter-spacing: 2px;
    color: var(--yellow);
}

footer {
    display: flex;
    justify-content: center;
}

footer img {
    width: 69px;
    height: auto;
    padding: 6px;
}

textarea {resize: none}
input {max-height: 2em}

hr {
    color: white;
}

input {
    font-family: inherit;
    margin-bottom: 6px;
    background: var(--bg);
    color: white !important;
    border: 1px solid white;
}

input:focus {
    outline: none;
    border: 1px solid var(--yellow);
}

textarea {
    border: 1px solid white;
    font-family: inherit;
    background: var(--bg);
    color: white !important;
}

textarea:focus {
    outline: none;
    border: 1px solid var(--yellow);
}