/************ Terminologies ************/
/* SLS - Student Learning Platform */

/* THE NEW START OF CSS FRAMEWORK FOR SLS INTERACTIVES USING EJSS */
/* CSS styling follows a SLS platform small preview window first design */

/************ fonts ************/
@font-face {
  font-family: "Dosis";
  src: url("../fonts/Dosis-Regular.woff2");
}

@font-face {
  font-family: "Dosis-Bold";
  src: url("../fonts/Dosis-Bold.woff2");
}

@font-face {
  font-family: "Dosis-SemiBold";
  src: url("../fonts/Dosis-SemiBold.woff2");
}

/************ SLS interactive color palettes ************/
:root {
  --primary-pink: #FF0082;
  --cotton-candy: #F7CFE5;
  --apricot: #F9E6E0;
  --blush: #EEB4A3;
  --orange: #F47D61;
  --yellow: #FFD208;
  --white: #FFFFFF;

  overflow: hidden;
}

.font-lg {
  font-size: 1.3rem !important;
}

.font-color-pp {
  color: var(--primary-pink) !important;
}

.bg-apricot {
  background-color: var(--apricot) !important;
}

.bg-blush {
  background-color: var(--blush) !important;
}

.bg-white {
  background-color: var(--white) !important;
}

.bg-yellow {
  background-color: var(--yellow) !important;
}

.border-yellow {
  border-color: var(--yellow);
}

.border-cottoncandy {
  border-color: var(--cotton-candy) !important;
}

.modal-boxshadow-orange {
  box-shadow: 5px 5px 1px var(--orange) !important;
}

.pbar-boxshadow-primarypink {
  box-shadow: 2px 2px 1px var(--primary-pink) !important;
}

.btn-boxshadow-pp {
  box-shadow: 1.5px 1.5px 1px var(--primary-pink) !important;
}

/************ Layout ************/
body {
  margin: 0;
  background-color: white !important;
}

/* main container for game content */
#_topFrame {
  container-type: inline-size !important;
  /* Vertically centers the game content */
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}

#wrappedPanel,
#plottingPanel {
  height: 100%;
}

#background {
  height: 110%;
}


#gameStart>svg,
#gameIntroduction>svg,
#gameplayInstructions>svg,
#gameEnd>svg {
  height: 75vh;
  width: 80vw;
  max-width: 591px;
}

#cereal_right,
#cereal_wrong,
#glassjar_right,
#glassjar_wrong,
#foodcans_right,
#foodcans_wrong,
#eggtray_right,
#eggtray_wrong,
#foodpackaging_right,
#foodpackaging_wrong,
#toys_right,
#toys_wrong,
#tryAgain,
#oops,
#gameEnd {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

#cereal_right>svg,
#cereal_wrong>svg,
#glassjar_right>svg,
#glassjar_wrong>svg,
#foodcans_right>svg,
#foodcans_wrong>svg,
#eggtray_right>svg,
#eggtray_wrong>svg,
#foodpackaging_right>svg,
#foodpackaging_wrong>svg,
#toys_right>svg,
#toys_wrong>svg,
#oops>svg,
#tryAgain>svg {
  height: 65vh;
  width: 80vw;
  max-width: 555px;
}

/************ Stardard Components :start ************/
/* Modals */
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-radius: min(11vh, 40px);
  padding: 2.5rem !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 291px;
  max-height: 500px;
  height: 45vh;
  width: 80vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14%;
  z-index: 2;
}

.modal-title {
  font-family: 'Dosis-Bold';
  font-size: 1.25rem;
}

.modal-body {
  font-family: 'Dosis-SemiBold';
  /* font-size: 1rem; */
}

.modal-btn {
  padding: .5rem 30px !important;
  width: 4.4rem;
  border-radius: 0 0.5rem 0 0.5rem;
  font-family: 'Dosis-Bold';
  font-size: 1rem;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: 1px;
}

@container (width > 768px) {
  .modal {
    max-width: min(75vw, 696px);
  }

  .modal-title {
    font-size: 1.75rem;
  }

  .modal-body {
    font-size: 2.75rem;
  }

  .modal-btn {
    font-size: 2.2rem;
  }
}



.modal-tl {
  width: 2.5rem;
  max-width: 100px;
  position: absolute;
  top: 3px;
  left: 12%;
}

.modal-br {
  width: 3rem;
  max-width: 100px;
  position: absolute;
  bottom: 18px;
  right: 5%;
}

.modal-tl>svg,
.modal-tl>img,
.modal-br>svg,
.modal-br>img {
  width: 100%;
  height: 100%;
}

/* modal variations */
.modal-tall {
  height: 62%;
  gap: 7%;
  padding: 1.3rem !important;
}

/************ Progress bars ************/

#progressBarContainer {
  border-style: solid;
  border-width: 2.5px;
  border-radius: 3rem;
  position: absolute;
  bottom: 10%;
  left: 10%;
  width: 80%;
  max-width: 1600px;
}

#progressBar {
  background: #1C1338;
  display: flex;
  position: relative;
  height: 4vh;
  border-radius: 3rem;
  width: 80vw;
}

#progressLevel {
  height: 100%;
  border-radius: 3rem;
  transition: all 0.1s linear 0s;
  margin-bottom: 40px;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  left: -1px;
  top: -1px;
}

.emptybar {
  border: 0 !important;
}

.fullbar {
  border-radius: 3rem !important;
}

.divider {
  width: 20%;
  position: relative;
}

.divider+img {
  z-index: 1;
  position: relative;
  top: -5px;
  height: 6vh;
}

#soundControl_Mute,
#soundControl_Play {
  position: absolute;
  top: 3%;
  left: 3%;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
}

#soundControl_Mute>svg,
#soundControl_Play>svg {
  width: 100%;
  height: 100%;
}

/************ Styling for game screens that span the entire viewport and larger than SLS embedded window frame ************/
@container (width > 600px) {

  .font-lg {
    font-size: 2rem !important;
  }

  .modal {
    /* border-radius: 5.5rem !important; */
    /* padding: 2.5rem 5.4rem !important; */
  }

  .modal-title {
    /* font-size: 2.35rem !important; */
  }

  .modal-body {
    /* font-size: 1.7rem !important; */
  }

  .modal-btn {
    /* padding: 0.5rem 0 !important; */
    /* width: 7.6rem; */
    /* border-radius: 0 1rem 0 1rem; */
    /* font-size: 1.5rem; */
    /* border-width: 2px; */
  }

  .modal-tall {
    padding: 2.5rem 4.4rem !important;
    max-height: 547px;
    max-width: 500px;
    height: 53%;
    gap: 14%;
  }

  .modal-boxshadow-orange {
    /* box-shadow: 9px 9px 1px var(--orange) !important; */
  }

  .modal-tl {
    width: 5rem !important;
    max-width: 100px !important;
  }

  .modal-br {
    width: 7.5rem !important;
    max-width: 128px !important;
  }

  #progressBarContainer {
    border-width: 4px;
  }

  .pbar-boxshadow-primarypink {
    box-shadow: 5px 5px 1px var(--primary-pink) !important;
  }

  .btn-boxshadow-pp {
    box-shadow: 2.5px 2.5px 1px var(--primary-pink) !important;
  }

  .divider+img {
    z-index: 1;
    height: 5.4vh;
    position: relative;
    top: -5px;
  }

  #soundControl_Mute,
  #soundControl_Play {
    width: 3rem;
    height: 3rem;
  }
}

/************ Stardard Components :end ************/

/************ Removal of redundant game elements or markings appearing on EJSS simulations ************/
[id=".myPanel"] {
  stroke-width: 0 !important;
}

#metadata,
[id="plottingPanel__coor__"] {
  display: none !important;
}

/************ customised CSS: start *************/

/************ Write your customised CSS for other html elements here for SLS small screen frame size ************/
#gameStart {
  justify-content: center;
  flex-direction: column;
  max-width: 580px;
  height: 75vh;
  width: 100vw;
  gap: 11%;
}

#gameTitle>svg {
  width: 100vw;
  height: 10vh;
  max-width: 580px;
  margin-bottom: 5%;
}

#placeholder {
  position: relative;
  left: 4%;
}

#placeholder>svg {
  width: 50vw;
  height: 30vh;
  max-width: 580px;
}

#startBtn>svg {
  width: 10vw;
  height: 9vh;
  max-width: 580px;
}

#wrappedPanel {
  position: relative;
}

#invisibleDragger {
  opacity: 0 !important;
}

/************ Styling for game screens that span the entire viewport and larger than SLS embedded window frame ************/
@container (width > 600px) {}


/************ customised CSS: end *************/

/* Styles for the slide container */
.slide-container {
  display: none;
  position: fixed;
  z-index: 1;
  bottom: -100%;
  /* Start the element off the screen */
  height: 75px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  width: 85%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  overflow: hidden;
  transition: bottom 1s;
  border-top: 2px solid #ADADAD;
  border-left: 2px solid #ADADAD;
  border-right: 2px solid #ADADAD;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}



/* For tablets: */
@media only screen and (min-width: 600px) {
  .slide-container {
    /* Start the element off the screen */
    height: 110px;
  }
}

@container sidebar (width > 10px) and (height > 10px) {
  .slide-container {
    height: 110px;
  }
}

/* Styles for the slide content */
.slide-content {
  padding: 2.5vh 2.5vh 0 5vh;
  text-align: center;
  font-family: 'Dosis';
  font-size: 3.5vw;
}

.slide-content p {
  padding-right: 40px;
}

/* Styles for the close button */
.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  height: 19px;
  display: flex;
  justify-content: flex-end;
}

.close>svg {
  width: 20px;
  height: 100%;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}