@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);
}
@font-face {
    font-family: "susiReckless";
    src: url(/static/fonts/Reckless.otf);
}

:root {
    --primaryColor: black;
    --secondaryColor: #cd3c37;
    --basicTextColor: darkgray;
    --specialTextColor: white;
    --borderWidth: 5px;

    --borderRadius: 5vh;
}

body {
    background-image:
        linear-gradient(#222222, #222222),
        url(/static/susi_background.webp);
    background-blend-mode: saturation;

    color: var(--basicTextColor);
    font-family: "susiSSP-b";

    max-width: calc(min(1000px, 100vw));
    margin: auto;
    padding: 0 5% 0 5%;
    overflow-y: scroll;
}

hr {
    padding: 0;
    color: var(--secondaryColor);
    border-top: var(--borderWidth) solid var(--secondaryColor);
    width: 100%;
}

#mainContent, #hintContent, #newsMessages {
    padding: 0 5%;
    font-size: 1.3em;
    text-align: start;
}
#newsMessages {
    font-style: italic;
}

img {
    max-width: 100%;
    max-height: 100vh;
    display: block;
    margin: 2vh auto;
    border-radius: var(--borderRadius);
}
.imgNoCutCorners {
    border-radius: 0;
}
.imgTriangleCut {
    border-radius: 0;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background-color: white;
}

canvas {
    margin: 0 calc(max(-5%, (100% - 600px) / 2));
    margin-bottom: 0;
    width: 600px;
    height: 600px;
}
@media (max-width: 700px) {
    #gameHolder {
        margin: 0 -5%;
        overflow-x: scroll;
    }
}


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

ul {
    list-style-type: none;
}

a {
    color: var(--specialTextColor);
}
a.currentPage {
    text-decoration: none;
}
a:hover {
    color: var(--secondaryColor);
}

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

    display: flex;
    justify-content: space-around;
    text-align: center;
    font-size: 2em;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    border-radius: 0 0 var(--borderRadius) var(--borderRadius);
    padding: 1vh 2vh 2vh 2vh;
    margin: 0 0 2vh 0;
}
header a {
    white-space: nowrap;
    margin: 0.2em;
}
header a:hover {
    color: var(--primaryColor);
}

button {
    border: var(--secondaryColor) solid var(--borderWidth);
    min-height: 7vh;
    min-width: 25%;
    max-width: 30%;
    font: 1.3em "susiSSP-b";
    background-color: var(--secondaryColor);
    color: var(--specialTextColor);
    border-radius: var(--borderRadius);
}
button:hover {
    cursor: pointer;
    color: var(--primaryColor);
}
.buttons {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
button:disabled {
    color: var(--basicTextColor);
    cursor: default;
}

.toneButtons {
    position: sticky;
    bottom: 5vh;
    z-index: 10;
}
.toneButton {
    min-width: 10%;
    width: 10%;
}

footer > div {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
footer img {
    max-height: 15vh;
    max-width: min(20vw, 25vh);
    margin: auto;
    border-radius: 0;
}
footer {
    text-align: center;
    font-size: 1.3em;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    border-radius: var(--borderRadius);
    padding: 2vh 0;
    margin: 4vh 0;
}
.footerLike {
    text-align: center;
    font-size: 1.3em;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    border-radius: var(--borderRadius);
    padding: 2vh 0;
    margin: 2vh 0;
}
footer a:hover, .footerLike a:hover {
    color: var(--primaryColor);
}

#resultsIframe {
    border: black 0 solid;
    width: 100%;
    height: 65vh;
    clip-path: polygon(0.5% 5.5%, 98% 5.5%, 98% 95%, 0.5% 95%);
}

.trianglesTable {
    font-size: 2em;
}

#nabojLink, #rieskyLink {
    position: absolute;
    top: 30vh;
    display: flex;
    font-size: 0.65em;

    border: var(--secondaryColor) solid var(--borderWidth);
    background-color: var(--secondaryColor);
    color: var(--specialTextColor);
    border-radius: var(--borderRadius);
    padding: 0.3em;
}
#nabojLink {
    left: calc(50% - var(--triangleWidth) * 2.5);
    justify-content: left;
}
#rieskyLink {
    right: calc(50% - var(--triangleWidth) * 2.5);
    justify-content: right;
}
#nabojLink a, #rieskyLink a {
    text-decoration: none;
}
#nabojLink a:hover, #rieskyLink a:hover {
    color: var(--primaryColor);
}

#imeloText {
    text-align: center;
    font-size: 1.5em;
}

.tabulkaZoznam {
    text-align: center;
    overflow-x: auto;
}

.tabulkaZoznam th {
    font-weight: bold;
    color: var(--specialTextColor);
}