:root{
    --primaryColor: white;
    --secondaryColor: #21272d;
}

.darkMode{
    --primaryColor: #21272d;
    --secondaryColor: white;
}

body {
    font-family:Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    text-align: center;
}

#top {
    position: absolute;
    top: 5%;
    width: 100%;
    transform: scale(1);
    text-align: center;
    z-index: 1;
    visibility: visible;
    transition: transform 0.4s;
}

#logo-name {
    font-size: 32px;
    font-weight: bold;
    background: var(--secondaryColor);
    color: var(--primaryColor);
}

#map{
    position: absolute;
    top: 0; 
    bottom: 0;
    width: 100%;
    z-index: 0;
}

.button h1{
    margin: 5%;
}

.button p{
    margin: 5%;
}

.mainButton h1{
    margin: 5%;
}

.mainButton p{
    margin: 5%;
}

.instructionButton{
    z-index: 2;
    position: absolute;
    top: 10%;
    left: 10%;
    transform: translate(-50%, -50%) scale(1);
    height: 10vh;
    width: 10vh;
    border-radius: 100px;
    background-image: url('resources/figures/instruction.png');
    background-size: cover;
}

.instructionButton:hover{
    transform: translate(-50%, -50%) scale(1.1);
}

.backToStadeButton{
    z-index: 2;
    position: absolute;
    top: 10%;
    left: 90%;
    transform: translate(-50%, -50%) scale(1);
    height: 10vh;
    width: 10vh;
    border-radius: 100px;
    background-image: url('resources/figures/backToStade2.jpg');
    background-size: cover;
}

.backToStadeButton:hover{
    transform: translate(-50%, -50%) scale(1.1);
}

.mainButton{
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    height: clamp(50px, 5%, 150px);
    width: clamp(200px, 10%, 600px);
    background: var(--secondaryColor);
    color: var(--primaryColor);
    border-radius: 100px;
    transition: 150ms ease;
    visibility: visible;
    transition: transform 0.4s;
}

.hide{
    transform: scale(0.1);
    visibility: hidden;
}

.mainButton:hover{
    transform: translate(-50%, -50%) scale(1.1);
}

.losGehtsButton:hover{
    transform: translate(-50%, -50%) scale(1.1);
}

.hintButton:hover{
    transform: translate(-50%, -50%) scale(1.1);
}

.okButton:hover{
    transform: translate(-50%, -50%) scale(1.1);
}

#historicImg{
    width: clamp(200px, 50%, 600px);  
}

.mainPopup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    height: 60%;
    width: 60%;
    overflow-x: hidden;
    overflow-y:auto;
    background: var(--secondaryColor);
    color: var(--primaryColor);
    padding: 50px;
    border-radius: 100px;
    z-index: 5;
    visibility: hidden;
    transition: transform 0.4s;
}

.instructionPopup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    height: 40%;
    width: 40%;
    overflow-x: hidden;
    overflow-y:auto;
    background: var(--secondaryColor);
    color: var(--primaryColor);
    padding: 50px;
    border-radius: 50px;
    z-index: 5;
    visibility: hidden;
    transition: transform 0.4s;
}

.endPopup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    height: 40%;
    width: 40%;
    overflow-x: hidden;
    overflow-y:auto;
    background: var(--secondaryColor);
    color: var(--primaryColor);
    padding: 50px;
    border-radius: 50px;
    z-index: 5;
    visibility: hidden;
    transition: transform 0.4s;
}

.historicTextPopup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    height: 40%;
    width: 40%;
    overflow-x: hidden;
    overflow-y:auto;
    background: var(--secondaryColor);
    color: var(--primaryColor);
    padding: 50px;
    border-radius: 50px;
    z-index: 5;
    visibility: hidden;
    transition: transform 0.4s;
}

.openPopup{
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
    transition: transform 0.4s;
}

.losGehtsButton{
    position: sticky;
    margin-left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%) scale(1);
    height: clamp(50px, 5%, 150px);
    width: clamp(200px, 10%, 600px);
    background: var(--primaryColor);
    color: var(--secondaryColor);
    border-radius: 100px;
    transition: 150ms ease;
}

.hintButton{
    position: sticky;
    margin-left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%) scale(1);
    height: 10vh;
    width: 10vh;
    border-radius: 100px;
    background-image: url('resources/figures/tippOriginal.jpg');
    background-size: cover;
    transition: 150ms ease;
}

.okButton{
    position: sticky;
    margin-left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%) scale(1);
    height: clamp(25px, 5%, 75%);
    width: clamp(100px, 10%, 300px);
    background: var(--primaryColor);
    color: var(--secondaryColor);
    border-radius: 100px;
    transition: 150ms ease;
}

.historicTextButton{
    position: sticky;
    margin-left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%) scale(1);
    height: clamp(25px, 5%, 75%);
    width: clamp(100px, 10%, 300px);
    background: var(--primaryColor);
    color: var(--secondaryColor);
    border-radius: 100px;
    transition: 150ms ease;
}

.ok2Button{
    position: sticky;
    margin-left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%) scale(1);
    height: clamp(25px, 5%, 75%);
    width: clamp(100px, 10%, 300px);
    background: var(--primaryColor);
    color: var(--secondaryColor);
    border-radius: 100px;
    transition: 150ms ease;
}

.thanksButton{
    position: sticky;
    margin-left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%) scale(1);
    height: clamp(25px, 5%, 75%);
    width: clamp(100px, 10%, 300px);
    background: var(--primaryColor);
    color: var(--secondaryColor);
    border-radius: 100px;
    transition: 150ms ease;
}