@font-face {
    font-family: "susiSSP-b";
    src: url("/static/fonts/SourceSansPro-Bold.otf");
}
@font-face {
    font-family: "susiSSP-sb";
    src: url("/static/fonts/SourceSansPro-Semibold.otf");
}

:root {
    --primaryColor: black;
    --secondaryColor: #cd3c37;

    --background-color: #222222;

    --basicTextColor: darkgrey;
    --specialTextColor: white;

    --colorCorrect: #37cd3c;
    --textColorCorrect: black;
    --colorNeutral: yellow;
    --textColorNeutral: black;
    --colorIncorrect: #cd3c37;
    --textColorIncorrect: white;

    --borderWidth: 5px;
    --borderRadius: 5vh;
    --verticalMargin: 1ex;

    font-family: "susiSSP-sb";
}

body {
    max-width: 100%;
    margin: 0 0 5vh 0;
    padding: 0 5vw;
    overflow-y: scroll;

    color: var(--basicTextColor);

    background-color: var(--background-color);

    background-image: url("/static/susi_background.webp");
}

header {
    position: sticky;
    top: 0;
    z-index: 1;

    width: fit-content;
    margin: var(--verticalMargin) auto;

    font-family: "susiSSP-b";
}

#content {
    width: 100%;
}

hr {
    margin: var(--verticalMargin) auto;
}

strong {
    color: var(--specialTextColor);
}

img, svg {
    max-width: 90%;
    max-height: 90vh;

    margin: var(--verticalMargin) auto;
    border-radius: var(--borderRadius);
}
.noCutCorners img, .noCutCorners svg{
    border-radius: 0;
}
.block {
    display: block;
}
p:has(img), p:has(svg) {
    width: 100%;
    text-align: center;
}

object {
    margin: auto;
}

h1, h2, h3, h4, h5, h6, b {
    color: var(--specialTextColor);
}

a {
    color: var(--specialTextColor);
    /*text-decoration: none;*/
}
a:hover {
    color: var(--secondaryColor);
}
a:focus {
    outline: 1px solid var(--specialTextColor);
}

ul li {
    padding: 1ex 0;
}

ul.noBullet {
    list-style-type: none;
}


/*navigation*/
nav {
    position: sticky;
    width: fit-content;
    top: 0;
    z-index: 10;

    margin: auto;
    padding: 1.5ex;

    background-color: var(--secondaryColor);
    border-radius: var(--borderRadius);

    text-align: center;

    font-family: "susiSSP-b";
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
nav li {
    display: inline;
    padding: 0 1ex;
}
nav a {
    text-decoration: none;
}
nav a:hover {
    color: var(--primaryColor);
}

/*submit response*/
#submitResponse {
    width: 100%;
    margin: var(--verticalMargin) auto;

    border-radius: var(--borderRadius);

    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    height: 2em;
}
.correctAnswer {
    background-color: var(--colorCorrect);
    color: var(--textColorCorrect);
}
.repeatedAnswer {
    background-color: var(--colorNeutral);
    color: var(--textColorNeutral);
}
.wrongAnswer {
    background-color: var(--colorIncorrect);
    color: var(--textColorIncorrect);
}

/*globe*/
#globe {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#globeForm {
    position: absolute;
    bottom: 5vh;
    left: 5vw;
    padding: 2vw;
}

.hoverText {
    visibility: hidden;

    position: absolute;
    z-index: 10;
    bottom: 100%;

    color: var(--basicTextColor);
    background-color: var(--primaryColor);
    text-align: center;
    text-wrap: nowrap;
    padding: 0.5ex;
    border-radius: 5px;
}
.mapPin:has(svg:hover) .hoverText {
    visibility: visible;
}

/*results*/
#tableHolder {
    overflow-x: scroll;
}
#resultTable {
    margin: auto;
}

tr:hover {
    color: var(--specialTextColor);
    background-color: var(--secondaryColor);
}

th {
    color: var(--specialTextColor);
}

th, td {
    text-align: center;
    padding: 0 1ex;
    text-wrap: nowrap;
}

.specialColor {
    color: var(--specialTextColor);
    background-color: var(--secondaryColor);
}
.specialTextColor {
    color: var(--specialTextColor);
}

/*submit fields and buttons*/
form input[type=text] {
    background-color: var(--background-color);
    background-color: transparent;
}

form input[type=submit], button {
    background-color: var(--secondaryColor);
    cursor: pointer;
}
form input, button {
    margin-top: 1ex;
    padding: 1ex;
    max-width: 50%;

    color: var(--specialTextColor);
    border: var(--borderWidth) solid var(--secondaryColor);
    border-radius: 1ex;
    outline: none;

    font-family: "susiSSP-sb";
    font-size: 1em;
}
form input:focus, button:focus {
    outline: 1px solid var(--specialTextColor);
}

/*hints*/
summary h2 {
    display: inline;
}

/*news*/
time {
    margin-right: 1em;
    color: var(--specialTextColor);
}