* {

    box-sizing: border-box; /* box model shucks */
    --color-white: #ffffff;
    --color-bright: #e0d0d0;
    --color-blue: #aaaaff;
    --color-gray: #595959;
    --color-light-gray: #8e8e8e;
    --color-red: #9b1616;
    --color-green: #199719;
    --color-orange: #f7942b;
    --color-orange-dark: #b36b1f;
    --padding: 1em;
}

form {
    border: none;
}


h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

header {
    height: 48px;
	margin-bottom: 2em;
	padding-left: var(--padding);
	padding-right: var(--padding);
	image-rendering: pixelated;
}

iframe[seamless] {
    background-color: white;
    border: none;
    height: 94vh;
    width: 100vw;
    padding-top: 0;
    margin-top: -4vh;
    overflow: hidden;
}

body {
    margin: 0;
	
    background-color: #1d1d1d;
    background-image: url("/assets/bg.png");
    image-rendering: pixelated;

    font-family: sans-serif;
    color: var(--color-bright);
}

.server_download {
    margin-top: 0.5em;
}


.main {
    display: flex;
    place-content: center;
    column-gap: 2em;
    row-gap: 2em;
    
    max-width: 62.5rem;
    margin: auto;

    padding-left: var(--padding);
    padding-right: var(--padding);
}
.bottom {
    display: flex;
    place-content: center;
    column-gap: 2em;
    row-gap: 2em;
    
    max-width: 62.5rem;
    margin: auto;

    padding-left: var(--padding);
    padding-right: var(--padding);
}

.left {
    display: flex;
    flex-direction: column;
    width: 300px;
	float:left;
}

.right {
    display: flex;
    flex-direction: column;
    width: 300px;
	float:right;
}


.aside {
    display: flex;
    flex-direction: column;
    place-items: center;
}

.big_button {
    font-size: larger;
    margin-top: 2.25em;
}

.button {
    background: linear-gradient(#9e9e9e, #4e4e4e);
    color: var(--color-white);
    font-weight: bold;
    text-align: center;

    display: flex;
    place-items: center;
    place-content: center;
    
    border-radius: 0.25em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
}

.button--orange {
    background: linear-gradient(var(--color-orange), var(--color-orange-dark));
}

.footer {
    margin: 2em;
    text-align: center;
    color: var(--color-gray);
    font-size: smaller;
}

.media {
    width: 100%;
}

.center {
  display: block;
  margin-left: -0.2em;
  margin-right: 0.2em;
  transform: translateY(-10%);
}

.navigation {
    margin: auto;
    max-width: 62.5rem;

    display: flex;
    flex-direction: row;
    place-items: center;
    column-gap: 1em;
    height: 100%;
}

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



a, a:visited {
    text-decoration: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}


.navigation__logo {
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.navigation__links--start {
    text-align: start;
}
.navigation__links--end {
    text-align: end;
    flex: 1;
}

.navigation__link {
    font-weight: bold;
    padding: 0.5em;
}

.navigation__link--white {
    color: var(--color-white);
}

.time {
    font-size: small;
    color: gray;
}

/* Full-width inputs */
input[type=login], input[type=password] {
    width: 40%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.login {
    text-align: center;
}

.button_center {
    color: var(--color-white);
    font-weight: bold;
    text-align: center;

    place-items: center;
    place-content: center;

    border-radius: 0.25em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
}

.cape {
    width: 4%;
    height: 6.4%;
}