:root {
    --main-color: #BEADFA;
    --color2: #D0BFFF;
    --color3: #DFCCFB;
    --color4: #362e53;
    --accent: #FFF3DA;
    --dark: #222222;
    --light1: #eeeeee;
    --light2: #e2e2e2;
    --bg: #36393F;
}

p.flavortext {
    font-family: helvetica;
    font-size: 100%;
    color: var(--accent);
    text-shadow: 2px 2px var(--dark);
}

a.smalltitle {
    margin-left: 3%;
    font-family: helvetica;
    color: #F3FFFF;
    line-height: 200%;
    text-shadow: 2px 2px var(--dark);
    font-size: 120%;
}

p.text1 {
    margin-left: 4.2%;
    margin-right: 4%;
    font-family: helvetica;
    color: #E2EDEF;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    line-height: 130%;
}

p.text2 {
    margin-left: 4.5%;
    margin-right: 4%;
    font-family: helvetica;
    color: #CCD9DA;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
    line-height: 120%;
    font-size: 95%;
}

a.textblue {
    margin-left: 5.5%;
    margin-right: 4%;
    margin-bottom: 1px;
    margin-top: 0.6em;
    font-family: helvetica;
    color: var(--main-color);
    line-height: 10%;
    font-size: 14px;
    text-shadow: 1px 1px var(--dark);
}

p.attribute {
    margin-left: 5%;
    margin-right: 4%;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 2%;
    font-family: helvetica;
    color: var(--main-color);
    text-shadow: 2px 2px var(--dark);
}

h2.title {
    font-family: helvetica;
    font-size: 200%;
    color: #F3FFFF;
    text-shadow: 3px 3px var(--dark);
}

h3.title2 {
    margin-left: 4%;
    margin-right: 4%;
    text-align: center;
    font-family: helvetica;
    color: #F3FFFF;
    text-shadow: 3px 3px var(--dark);
    font-size: 150%;
}

body {
    margin: 0 auto;
    display: table;
    min-width: 390px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--bg);
}

.banner {
    position: relative;
    display: inline-block;
    margin-top: 24px;
}

.banner img {
    width: 100%;
    float: left;
    position: relative;
    padding: 0 5% 0 5%;
}

.text-overlay {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bottom {
    overflow: hidden;
    background-color: #2E3035;
    padding: 14px 16px;
    box-shadow: 0px 3px 3px 0px #292B33;
}

.topnav {
    overflow: hidden;
    background-color: #2E3035;
    box-shadow: 0px 3px 3px 0px #292B33;
    position: relative;
}

.topnav a {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    float: left;

}

.topnav a:hover {
    background-color: #ddd;
    color: var(--dark);
}

.topnav a.active {
    background-color: var(--main-color);
    color: var(--dark);
}

* {
    box-sizing: border-box;
}

.row {
    display: flex;
    margin-left: 4px;
    margin-right: 4px;
}

.column {
    flex: 50%;
    padding: 12px 8px 8px 8px;

}

.clip {
    padding: 0px 4px 0px 4px;
    aspect-ratio: 16 / 9;
    margin-bottom: 8px;
}

.clip2 {
    padding: 0px 4px 0px 4px;
    aspect-ratio: 4 / 1;
    margin-bottom: 8px;
}

.topheader {
    flex: 50%;
    background-color: var(--main-color);
    padding: 3px 0px 4px 6px;
    box-shadow: 0px 2px 0px 0px var(--dark);
    position: relative;
}

.topheader>a {
    color: var(--color4);
    text-decoration: none;
    font-family: segoe ui;
    font-size: 70%;
    font-style: oblique;
    font-weight: 800;
}

.table {
    padding: 0px 4px 0px 4px;
    margin-bottom: 12px;
}

.table td a {
    color: var(--dark);
    text-decoration: none;
    font-family: segoe ui;
    font-size: 80%;
    display: block;
    width: 100%;
}

.table td {
    white-space: nowrap;
}

.table img {
    width: 5%;
}

.table tr img,
.table tr a,
.table tr form {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.table tr:hover,
select:hover {
    background-color: #ffffff;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    text-align: left;
    table-layout: fixed;
}

td {
    padding: 6px;
    border-bottom: 1px solid gray;
}

tr:nth-child(even) {
    background-color: var(--light1);
}

tr:nth-child(odd) {
    background-color: var(--light2);
}

.select-block {
    position: relative;
}

select {
    width: 100%;
    color: var(--dark);
    text-decoration: none;
    font-family: segoe ui;
    font-size: 80%;
    display: block;
    font-weight: bold;
    cursor: pointer;
    background-color: var(--light1);
    border: none;
    appearance: none;
    padding: 6px 30px 6px 4px;
}

.unselectable {
    user-select: none;
    -moz-user-select: none;
    /* Firefox */
    -webkit-user-select: none;
    /* Chrome, Safari, and Opera */
    pointer-events: none;
}

@media screen and (min-width: 1620px) {
    body {
        width: 40%;
    }
    .table img {
        width: 3%;
    }
}

@media screen and (max-width: 1620px) and (min-width: 1440px) {
    body {
        width: 45%;
    }
    .table img {
        width: 4%;
    }
}

@media screen and (max-width: 1440px) and (min-width: 1024px) {
    body {
        width: 70%;
    }
}

@media screen and (max-width: 1024px) {
    body {
        width: 90%;
    }
    .table img {
        width: 6%;
    }
}

@media screen and (max-width: 512px) {
    body {
        width: 98%;
    }
    .topheader {
        padding: 1px 0px 4px 6px;
    }
    .topheader>a {
        font-size: 60%;
    }
    .table img {
        width: 10%;
    }
}