@font-face {
    font-family: 'ARIBL0';
    src: url('/ARIBL0.woff2');
}

html, body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif; 
    color: #2e2e2e;
}

body {
    background-repeat: repeat-x;
    background-image: url(/background_gradient.png);
}

main { flex: 1; }

header {
    font-family: 'ARIBL0';
    user-select: none;

    margin: 0;
    width: 100%;
    height: 5rem;

    font-size: 1.25rem;
    background-color: #ff6600;
    align-content: center;
    color: white;
}

.copyright {
    font-size: 12px;
    text-align: right;
    margin-right: 12px;
}

footer hr {
    border: 2px solid #6b6b6b;
    margin-top: 0;
}

footer {
    color: #ebebeb;

    height: 6rem;
    bottom: 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
        to bottom,
        #0b0b0b,
        #1a1a1a
    );
}

nav {
    font-family: 'ARIBL0';
    color: #8a8a8a;

    margin: 2.5rem;

    width: 750px;

    user-select: none;
    
    background-image: linear-gradient(
        to bottom,
        #2f2f3f 0%,
        #2f2f3f 40%,
        #0f0f1f 60%,
        #0f0f1f 90%,
        #10101f 100%
    );

    border: none;
    border-radius: 4px;

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;
}

nav h1 {
    color: white;
    padding: 0 1.5rem 0 1.5rem;
}

a {
    color: black;
}

nav a {
    color: #8a8a8a;
    text-decoration: none; 
    padding: 0 1.5rem 0 1.5rem;
    height: 5.5rem;
    align-content: center;
}

nav a.selected {
    color: white;
    background-image: linear-gradient(
        to top,
        #2f2f3f 0%,
        #2f2f3f 40%,
        #0f0f1f 60%,
        #0f0f1f 90%,
        #10101f 100%
    );
}

nav a:hover {
    cursor: pointer;
    color: white;
}

div.contents {
    display: flex;
    flex-direction: row;
    text-align: left;
    justify-content: center;
}

div.contents div {
    padding: 0 2rem 0 2rem;
    width: 450px;
}

form:not(.buy) {
    display: flex;
    flex-direction: column;

    background-color: #ebebeb;
    padding: 3rem;

    border-color: #2e2e2e;
    border-width: 4px;
    border-style: solid;
    
    width: 400px;

    text-align: left;
}

form input {
    margin: 1rem;
}

form textarea {
    margin: 1rem;
    width: 360px;
    resize: none;
}

form div.row {
    margin-top: 0.25rem;
    text-align: right;
}

form div.key {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

div.key input {
    width: 2.5rem;
}

button {
    font-family: 'ARIBL0';
    padding: 1.5rem 2.5rem 1.5rem 2.5rem;
    color: #8a8a8a;
    background-image: linear-gradient(
        to bottom,
        #2f2f3f 0%,
        #2f2f3f 40%,
        #0f0f1f 60%,
        #0f0f1f 90%,
        #10101f 100%
    );
    border: none;
    border-radius: 4px;
}

button:hover {
    cursor: pointer;
    color: white;
}

div.overview {
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.overview div.row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

div.overview div.row img {
    width: 400px;
    height: 500px;
    margin: 1.5rem;
}

div.products div.contents {
    height: 400px;
}