html, p{
  padding: 0;
  margin: 0;
}

body{
  background: black;
}

#mainContainer{
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#titleContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url("/Images/titleBackground.png");
  background-position: center;
  background-size: cover;
}

#logoContainer{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36vw;
}

#titleContents{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 45vw;
    width: 100%;
}

#logo{
  width: 100%;
}

#titleText{
  width: 70%;
}

#enterBtn{
  width: 12vw;
}

#rotateWarning{
  display: none;
}

#desktopContainer{
  width: 100%;
  height: 100%;
  background: url("/Images/mainBackground.jpg");
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

#startBar{
    width: 101%;
    position: fixed;
    bottom: -4px;
    left: -4px;
    overflow: hidden;
}

.folderContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.folderContainer:hover{
  cursor: pointer;
}

.desktopFolder{
  width: 20%
}

.folderContainer img{
  width: 50%;
}

.folderContainer p{
  margin-top: 5%;
  font-size: 1.2vw;
}

#menuFolders{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 90%;
    margin-left: 5%;
    gap: 5vh;
}


#desktopLogo{
    position: absolute;
    bottom: 5vw;
    right: 0%;
    width: 25vw;
}

#chapterPopup{
    display: none;
    width: 85vw;
    object-fit: cover;
    height: auto;
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
}

#taskPopup{
  display: none;
  width: 60vw;
  object-fit: cover;
  height: auto;
  position: absolute;
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 1000px;
}

#windowBackground{
  width: 100%;
  object-fit: cover;
}

#titlePopupContainer{
    position: absolute;
    display: flex;
    align-items: center;
    color: white;
    font-size: 1.3vw;
    top: 1%;
    width: 96.6%;
    height: 5%;
    left: 1.6%;
}

#titlePopupContainer img{
    width: 1.5vw;
    margin-right: 1%;
    margin-left: 1%;
}

#closeBtn{
    position: absolute;
    right: 0;
    width: 6%;
    height: 22vh;
}

#addressBar{
    width: 81%;
    height: 5%;
    position: absolute;
    top: 17.5%;
    left: 13%;
    padding-left: 1%;
    display: flex;
    align-items: center;
    font-size: 1.2vw;

}

.arrow{
  padding-left: 2%;
  padding-right: 2%;
}

#addressBar:hover{
  cursor: pointer;
}

#chapterContainer, #taskContainer{
  position: absolute;
  top: 24.8%;
  left: 1.7%;
  width: 73.4%;
  height: 45.3%;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
  grid-template-rows: repeat(2, 1fr);
}

.chapterText, .taskText{
  color: black;
  font-weight: bold;

}

#exitFullscreenContainer{
    display:none;
    position: absolute;
    top: 3%;
    right: 3%;
    width: 7vw;
    height: 7vw;
    background-color: #EF3343;
    border-radius: 50px;
}

#exitFullscreen{
  width: 80%;
  height: 80%;
  margin: auto;
}

#backBtn{
  width: 9%;
  height: 11%;
  position: absolute;
  top: 6%;
  left: 1.6%;
}

#addressBar{
  font-family: Arial, Helvetica, sans-serif;
}

/* #taskPopup{
    position: absolute;
    top: 46%;
    width: 120vh;
    left: 53%;
    transform: translate(-50%, -50%);
} */

#taskBackground{
  width: 100%;
  height: auto;
}

#taskTitle{
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: clamp(15px, 2vw, 30px);
}

#taskPopupCloseBtn{
  position: absolute;
  right: 0;
  width: 10%;
  height: 10%;
}

#taskPopupBackBtn{
  position: absolute;
  position: absolute;
  bottom: 4%;
  width: 20%;
  height: 9%;
  left: 30%;
}

#taskPopupEnterBtn{
  position: absolute;
  bottom: 4%;
  right: 29%;
  width: 20%;
  height: 9%;
}

#taskPopupEnterBtn:hover{
  cursor: pointer;
}

#taskPopupBackBtn:hover{ 
  cursor: pointer;
}

#taskPopupCloseBtn:hover{
  cursor: pointer;
}

#taskSubTitle{
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(12px, 1.5vw, 25px);
}

#iconsContainer{
  position: absolute;
  top: 21%;
  left: 8.3%;
  width: 83.3%;
  height: 63.1%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.symbol{
  width: 90%;
  height: 90%;
  background-color: #CFCABA;
  z-index: 1;
}

/* ICON POSITIONING */

.icon{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.icon::before{
    content: '';
    position: absolute;
    inset: -1px;
    background-image: linear-gradient(to bottom right, white 50%, black 50%);
    border-radius: inherit;
    z-index: 0;
    opacity: 0;
}

.icon.iconSelected::before{
  opacity: 1;
}

.icon:hover{
  cursor: pointer;
}



.iconWrong{
  border: 2px solid red;
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-2px); }
  80%       { transform: translateX(2px); }
}

.errorPopup1{
  position: absolute;
  top: 42%;
  left: 42%;
  transform: translate(-50%, -50%);
}

.errorBackground{
  width: 50vh;
}

.errorPopup2{
  position: absolute;
  top: 46%;
  left: 46%;
  transform: translate(-50%, -50%);
}

.errorPopup3{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#errorPopupCloseBtn{
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 20%;
}

#errorPopupTryAgain{
    bottom: 13%;
    position: absolute;
    width: 39%;
    height: 17%;
    left: 30%;
}

#taskAnswerPopup{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 35vw;
    max-width: 485px;
}

#taskAnswerPopup img{
  width: 100%;
}

#taskPopupAnswerCloseBtn{
  position: absolute;
  top: 0;
  right: 0;
  width: 17%;
  height: 10%;
}

#taskPopupAnswerCloseBtn:hover, #taskPopupAnswerReturnBtn:hover{
  cursor: pointer;
}

#taskPopupAnswerReturnBtn{
  position: absolute;
  bottom: 4%;
  left: 33%;
  width: 34%;
  height: 7%;
}



@media screen and (max-height: 490px){
  #chapterPopup{
    width: 130vh;
    top: 50%;
  }

  #taskPopup{
    width: 50vw;
    top: 50%;
  }

  #taskAnswerPopup{
    top: 50%;
    width: 50vh;
  }
}

@media screen and (orientation: portrait){
  #rotateWarning{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    z-index: 999999;
    position: absolute;
    top: 0;
    background-color: black;
    color: white;
  }
}