@font-face {
    font-family: "ibm-plex-sans";
    src:
      local("ibm-plex-sans"),
      url("ibmplexsans.ttf") format("truetype");
}

@font-face {
    font-family: "ibm-plex-sans-condensed";
    src:
      local("ibm-plex-sans-condensed"),
      url("ibmplexsanscondensed.ttf") format("truetype");
}

@font-face {
    font-family: "ibm-plex-sans-condensed-light";
    src:
      local("ibm-plex-sans-condensed-light"),
      url("ibmplexsanscondensedlight.ttf") format("truetype");
}

@font-face {
    font-family: "heebo";
    src:
      local("heebo"),
      url("heebo.ttf") format("truetype");
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0px;
    overflow: hidden;
    background-color: black;
}

#parentContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0px;
    top: 0px;
}

#gameContainer {
    width: 100vw;
    height: 56.25vw;
    max-height: 100vh;
    max-width: 177.78vh;
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: grey;
}

#playboard {
    width: 100%;
    height: 100%;
}

#introContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url("./images/intro-bg.jpg");
    background-size: cover;
}

#waveLogo {
    position: absolute;
    top: -20px;
    left: 0px;
    width: 194px;
    height: 284px;
    background-image: url("images/wave-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 5;
}

#introScreen {
    margin-top: 50px;
    height: 100%;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#vwLogoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 30%;
    margin: 30px;
}

#vwLogo {
    display: block;
    width: 70%;
    height: 70%;
    background-image: url("images/vw-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#introTitle {
    font-size: 3rem;
}

#languageSelectOuterContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 20%;
    margin: 30px;
    font-size: 1.5rem;
}

#languageSelectContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background-color: white;
    border-radius: 5px;
    padding: 5px;
    margin-top: 10px;
    scrollbar-width: thin;
    scrollbar-color: #fafafa #f0f0f0;
}

#languageSelectTitle {
    font-size: 1.3rem;
    font-weight: 200;
    font-family: "ibm-plex-sans";
    color: white;
}

.languageSelectItem {
    line-height: 30px;
    font-size: 1rem;
    font-family: "heebo";
}

#gameStartButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 5px;
    border: 2px solid white;
    cursor: not-allowed;
    margin-bottom: 30px;
    font-size: 1.2rem;
    font-weight: 400;
    font-family: "ibm-plex-sans";
    color: white;
}

#firstVideoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    z-index: 4;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url("./images/intro-bg.jpg");
    background-size: cover;
}

#firstVideoCloseContainer {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0px;
    right: 0px;
    width: 112px;
    height: 112px;
    background-color: rgba(255,255,255,0.2);
    cursor: pointer;
}

#firstVideoCloseButton {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("images/close.png");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#firstVideoContentContainer {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 80%;
    height: 45%;
}

#gameManualContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    z-index: 4;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url("./images/intro-bg.jpg");
    background-size: cover;
}

#gameManualCloseContainer {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0px;
    right: 0px;
    width: 112px;
    height: 112px;
    background-color: rgba(255,255,255,0.2);
    cursor: pointer;
}

#gameManualCloseButton {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("images/close.png");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#gameManualContentContainer {
    position: relative;
    top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 90%;
}

#gameManualContentLogoContainer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 50%;
}

#gameManualContentLogo {
    display: block;
    position: relative;
    top: 10%;
    height: 50%;
    width: 50%;
    background-image: url("images/vw-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
}

#gameManualContentText {
    display: block;
    height: 100%;
    width: 50%;
    font-weight: 300;
    font-size: 4vh;
    font-family: "ibm-plex-sans";
    color: white;
}

#gameManualContentTextTitle {
    font-weight: 200;
    font-size: 5vh;
    font-family: "ibm-plex-sans";
    color: white;
}

#gameManualContentTextContainer {
    display: block;
    height: 100%;
    width: 80%;
}

#gameManualContentTextContent {
    font-weight: 300;
    font-size: 1.7vh;
    font-family: "ibm-plex-sans";
    color: white;
    margin-top: 20px;
}

#gameManualPlayboardContainer {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 50%;
    height: 50%;
    background-image: url("images/uitleg-bord.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
}

#menuButtonContainer {
    position: absolute;
    top: 20px;
    right: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    z-index: 10;
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
}

#menuButton {
    display: block;
    width: 32px;
    height: 32px;
    background-image: url("images/menuicon.png");
    background-repeat: no-repeat;
    background-position: center;
}

#menuContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 20%;
    height: 20%;
    position: absolute;
    top: 20px;
    right: 70px;
    z-index: 11;
    background-color: white;
    border-radius: 8px;
}

#menuHeader {
    display: block;
    width: 100%;
    height: 20%;
}

#menuCloseButton {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 64px;
    height: 64px;
    background-color: rgba(0, 0, 0, 0.1);
    background-image: url("images/close-inv.png");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#menuContentContainer {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#menuManualContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 100%;
    z-index: 12;
    cursor: pointer;
}

#menuManualLogo {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("images/file-text.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#menuManualLink {
    display: block;
    font-size: 1.5rem;
    font-weight: 300;
    font-family: "ibm-plex-sans";
    color: black;
}

#modalContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 100;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.9);
}

#modalScreen {
    top: 0px;
    height: 80%;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #497CAB;
    border: 4px;
    border-radius: 10px;

}

#modalTitle {
    position: relative;
    width: 100%;
    height: 10%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 10px 10px 0px 0px;
}

#modalCloseButton {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%) translateX(-25%);
    width: 5vh;
    height: 5vh;
    background-image: url("images/close.png");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#modalTitleText {
    display: block;
    font-weight: 300;
    font-size: 4vh;
    font-family: "ibm-plex-sans";
    color: white;
}

#modalContentContainer {
    width: 100%;
    height: 90%;
    display: block;
    padding: 30px;
    box-sizing: border-box;
}

#modalContent {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#modalContentText {
    display: block;
    height: 40%;
    font-weight: 300;
    font-size: 1.7vh;
    font-family: "ibm-plex-sans";
    color: white;
}

#modalContentImageContainer {
    position: relative;
    display: block;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60%;
}

#modalContentVideoContainer {
    position: relative;
    display: block;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60%;
}

#modalContentImage {
    position: relative;
    display: block;
    background-image: url("images/background-1.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: center;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    filter: 
        drop-shadow(0px 4px 0px black)
        drop-shadow(0px -4px 0px black)
        drop-shadow(4px 0px 0px black)
        drop-shadow(-4px 0px 0px black);
}

#modalContentImageLeftArrow {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: white;
    background-image: url("images/arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#modalContentImageRightArrow {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: white;
    background-image: url("images/arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#modalContentPagesContainer {
    width: 100%;
    height: 10%
}

#modalContentPages {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.modalContentPageItem {
    width: 10px;
    height: 10px;
    margin: 5px;
    border-radius: 50%;
    background-color: black;
}

.modalContentPageItemActive {
    background-color: white;
}

.hidden {
    display: none !important;
}