@font-face {
    font-family: "Groteskia";
    src: url("../fonts/groteskia/GROTESKIA.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Blue";
    src: url("../fonts/Blue\ Highway\ Rg.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

:root {
    /* https://angel-rs.github.io/css-color-filter-generator/ */
    --black-filter: brightness(0) saturate(100%) invert(6%) sepia(7%) saturate(4412%) hue-rotate(224deg) brightness(94%) contrast(90%);
    --white-filter: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(271%) hue-rotate(295deg) brightness(91%) contrast(90%);
    --accent-filter: brightness(0) saturate(100%) invert(36%) sepia(5%) saturate(5862%) hue-rotate(290deg) brightness(109%) contrast(120%);

    --palette-dark: #1f1828;
    --palette-light: #decdd2;
    --accent: #c63f6a;
}
/*
#nav-content {
    background-color: rgba(31, 24, 40, 0.50);
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
}
*/
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
nav li {
    margin: 0;
    font-size: 32px;
}
nav a {
    text-decoration: none;
    color: var(--palette-light);
    padding: 24px;
    display: block;
    transition: background-color 0.3s ease;

}
nav a:hover {
    color: var(--accent);
    transition: 0.15s;

}

#translation {
    color: var(--accent);
}

body {
    background-image: url("../assets/theme-bg.jpg");
    background-size: cover;
    background-position: center, center;

    color: var(--palette-light);
    overflow-x: hidden;
    width: 75vw;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;

    font-family: "Groteskia";
    font-size: 32px;
    text-shadow: 0px 2px 5px var(--palette-dark);

    h1, h2, h3, h4 {
        font-family: "Groteskia";
        letter-spacing: 2px;
        text-align: center;
    }
} 

.paragraph {
    display: grid;
    justify-content: center;
    padding-top: 16px;
    padding-bottom: 16px;
    h3 {
        text-align: center;
    }
    ul {
        padding-left: 16px;
    }
    a {
      margin: auto;
      color: var(--accent);
      text-decoration: none;
      margin-top: 1.5vh;
      margin-bottom: 1.5vh;
    }
}
.paragraph p {
    text-align: justify;
    margin-left: 0;
    margin-right: 0;
    margin-top: 8px;
    margin-bottom: 8px;
}
.paragraph.center p {
    text-align: center;
}

.tournament-paragraph {
	margin-top: 4vh;
	margin-bottom: 4vh;
}
.tournament-sponsor, #tournament-staff {
	color: #ffffff;
}
#organizer-logo-container {
    padding-bottom: 5vw;
    display: flex;
    justify-content: center;
}
.organizer-logo {
    filter: var(--white-filter);
    width: 6vw;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    min-width: 64px;
    max-width: 96px;
}

#floorplan {
    filter: var(--white-filter);
    display: block;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
#haalarilanit-logo {
    filter: var(--white-filter);
    display: block;
    width: 75vw;
    max-width: 512px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10vw;
    padding-bottom: 10vw;
}

.sponsors-main-container {
    display: grid;
    background-color: #ffffff;
    border-radius: 7px;
}

.container-tournament {
    background-color: #ffffff;
    border-radius: 10px;
    width: 45%;
    height: 70%;
    justify-self: center;

    margin-top: 2vh;
    margin-bottom: 2vh;
}

.sponsors-container {
    display: flex;
    justify-content: center;
}
.sponsors-container a {
    display: block;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.sponsors-container div {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.sponsors-container img {
    padding-top: 4vh;
    padding-bottom: 4vh;
    padding-left: 2vw;
    padding-right: 2vw;
    width: 13vw;
    max-width: 170px;
}
.large {
    width: 19vw !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.logo-black {
    filter: var(--black-filter);
}
.logo-white {
    filter: var(--white-filter);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: var(--palette-light);
    border: 1px solid var(--palette-light);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--palette-dark);
}

.button-container {
    form {
        display: flex;
        align-items: center;
    }
    padding-top: 3vw;
    padding-bottom: 3vw;
}

#ticket-button {
    display: block;
    font-family: "Groteskia";
    margin: 0 auto;
    align-items: center;
    appearance: none;
    background-color: var(--palette-light);
    color: var(--palette-dark);
    border-radius: 4px;
    border-width: 0;
    font-size: 32px;
    box-sizing: border-box;
    cursor: pointer;
    height: 8vh;
    min-width: 100%;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    transition: 0.15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
}

#ticket-button:hover {
    background-color: var(--accent);
}

footer {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 5vw;
}

.paragraph {

  .tournament-p {
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
  }
}

.tournament-join {
  font-size: 36px;
  margin-top: 4vh;
  margin-bottom: 4vh;
}

#event-countdown {
    padding: 2vw;
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    margin-top: 2vh;
    margin-bottom: 2vh;
    color: var(--palette-light);
}

.embedded-anchor {
    position: initial;
    color: var(--palette-light);
    text-decoration: none;
}

@media screen and (max-width: 500px) {
    body {
        font-size: 16px;
    }

    .sponsors-main-container {
        width: 95vw;
        margin-left: -10vw;
    }


    .container-tournament {
        width: 65%;
        height: 70%;
    }



    .sponsors-container {
        display: grid;
    }
    .sponsors-container a {
        width: 75vw;
    }
    .sponsors-container img {
        width: 35%;
        padding-top: 3vh;
        padding-bottom: 3vh;
    }
    .large {
        width: 65% !important;
    }

    #haalarilanit-logo {
        max-width: 75vw;
        margin-bottom: 25vw;
        margin-top: 25vw;
    }

    #ticket-button {
        font-size: 18px;
        width: 60vw;
    }

    #event-countdown {
        font-size: 16px;
    }

    nav {
        font-size: 16px;
        max-width: 80vw;

        li {
            text-align: center;
            font-size: 16px;
        }

        a {
            padding-left: 5px;
            padding-right: 5px;
        }
    }

    #floorplan {
        width: 100%;
        padding-top: 18vw;
        padding-bottom: 18vw;
    }

    .organizer-logo {
        min-width: 32px;
        max-width: 96px;
        width: 12vw;
    }
}