/* Ensure the site is dark themed */
body {
    background: black;
    color: white;
}

/* Ensure header is vertical on mobile */
.mobile-vertical {
    display: block;
}

/* Style for miku banner */
#miku {
    width: 100%;
    max-height: 10em;
    object-fit: scale-down;
}

/* Elements with the horizontal class, will be horizontal */
.horizontal {
    display: flex;
}

/* Logo style */
.logo {
    height: 10em;
    margin: 1em;
    border-radius: 5em;
}

/* Navigation bar CSS */
nav {
    margin: 1em;
    border: 1px solid white;
    border-radius: 1em;
}

nav ul {
    list-style: none; /*Don't show the list items*/
    padding: 1em;
}

nav ul li {
    border: 1px white solid;
    background: black;
    border-radius: 1em;
}

/* When a navigation item is hovered, make it a bit bigger */
nav ul li:hover {
    scale: 1.1;
}

nav ul li a {
    display: block;
    padding: 0.5em;
    text-align: center;
    margin: 1em;
}

/* Footer style */
footer {
    display: flex;
    border: 1px white solid;
    border-radius: 1em;
    margin: 1em;
    padding: 1em;
}

footer * {
    flex-grow: 1;
}

/* Link styles */

a:link {
    color: red;
}

a:visited {
    color: darkred;
}

a:hover {
    font-weight: bold;
}

/* Fieldset style */

fieldset {
    border-radius: 1em;
    box-shadow: gray 1px 1px 1px 1px;
}

fieldset legend {
    background: black; /* Hide the border line going through it */
    border: 0.1em solid white;
    border-radius: 1em;
    padding: 0.25em;
}

main fieldset {
    margin: 1em;
}

/* Table query */

@media screen and (min-width: 500px) and (orientation: landscape) {
    .mobile-vertical {
        display: flex;
    }

    nav ul {
        display: flex; /*Ensure items flex*/
    }

    nav ul li {
        flex-grow: 1; /*Ensure items take up entire width of display*/
    }
}

/* Desktop query */

@media screen and (min-width: 1000px) and (orientation: landscape) {
}