* {
    box-sizing: border-box;}

html {
  margin: 0;
  padding: 0px;
}

@font-face {
  font-family: "Media";
  src: url("../font/Media77-Medium.otf");
  }
  
  @font-face {
  font-family: "OBY";
  src: url("../font/OBY_display-Bold.otf");
  }

input:focus {
    outline:none;
}

/* .menu{
  width: 10%;
  margin-right: 0;
  margin: 3%;} */

h1 {
  font-family: "OBY";
  font-size: 25px;
  letter-spacing: 1px;
  text-align: center;
}

body {
    border: 0.5px;
    margin: 0;
    padding: 0px;
}

.grid {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow:hidden;
}

.row {
    flex: 1 1 auto;
    height: 50%;
    display: flex;
    transition: height 0.5s ease-in-out;
}

button, input, select, textarea {
    font-family : "OBY";
    letter-spacing: 1px;

}

.submit {
  margin: 0;
  font-family: "OBY";
  letter-spacing: 1px;

}

#code{
  width: 50%;
  text-align: center;

}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: yellow;
  width: 60%;
  height: 100%;
  border-radius: 100%;
  padding: 20px;
  transition: width 0.5s ease-in-out;
}

.expand--header .form {
  width: 100%;
}

.form__ui {
  flex: 0 0 auto;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stickers {
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1 1 auto;
}

.sticker{
  display: none;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.maps{
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1 1 auto;
}

.map{
  display: none;
  position: absolute;
  width: 100%;
}

.indices{
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1 1 auto;
  display: none;

}

.indicess{
  display: none;
  position: absolute;
  height: 100%;
}

.expand--header .indices{
  display: none;
}

.expand--stuff .indices{
  display: none;
}

.expand--map .indices{
  display: none;
}

.expand--indice .indices{
  display: block;
}

.puzzles{
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1 1 auto;
}

.puzzle{
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.expand--stuff .puzzle {
  width: 210%;
  top: 20vh;
}

.expand--header .row__footer #puzzletittle{


  font-size: 25px;
  margin-top: 1.6vh;
  height: 34px;
  margin-top: 2.5vh;
  letter-spacing: 1px;

}

.expand--header .puzzles{
  display: none;
}

.expand--map .puzzles{
  display: none;
}

.expand--indice .puzzles{
  display: none;
}

.expand--puzzle .row__footer #puzzletittle {
  display: none;
}

.expand--puzzle .row__footer #indicetittle {
  display: block;
  align-items: center;
  text-align: center;
}

.expand--indice .row__footer .puzzle {
  display: none;
}

.expand--puzzle .row__footer .grid__content--default .puzzle {
  display:block;
  /* transition: width 0.5s; */
  width: 200%;
  margin-left: 10%;
  padding: 0;
}
.expand--puzzle .row__puzzle {
    height: 567px;
}

.expand--indice .row__puzzle {
    height: 50px;
}

.point{
  display:block;
  height: 100%;
  position: relative;
  padding: 0;
}

.expand--stuff .point{
  display: none;
}

.row + .row {
    border-top: solid 1px;
}

.column {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    transition: width 0.5s ease-in-out;
}

.grid__content{
  width:100%;
  height: 100%;
  margin: auto;
  position: relative;
}

.row .row__header{
  height: 50%;
}

.grid__content--closed {
    display: none;
}

.column + .column {
    border-left: solid 0.5px;
}

.column .column__map {
  width:50%;
}

.column {
  width:50%;
}

.expand--header .row__header {
    height: calc(100% - 20vh);
}

.expand--header .row__footer {
    height: 100px;
}

.expand--map .row__header #stickertittle {
  font-size: 25px;
  margin-top: 1.6vh;
  height: 34px;
  margin-top: 4vh;
  letter-spacing: 1px;
}

.expand--header .row__footer .grid__content--closed {
    display: block;
}

.expand--header .row__footer #maptittle{
  font-size: 25px;
  margin-top: 7vh;
  height: 34px;
  letter-spacing: 1px;
}

.expand--header .row__footer #stickertittle{
  font-size: 25px;
  text-align: center;
  height: 50px;
  letter-spacing: 1px;
}

.expand--map .row__footer #stickertittle{
  font-size: 25px;
  height: 34px;
  margin-top: 15vh;
  letter-spacing: 1px;
  text-align: center;
}

.expand--puzzle .row__header #stickertittle{
  font-size: 25px;
  height: 34px;
  margin-top: 4vh;
  letter-spacing: 1px;
  text-align: center;
}
.expand--map .row__footer #puzzletittle {
  font-size: 25px;
  height: 34px;
  margin-top: 15vh;
  letter-spacing: 1px;
  text-align: center;
}

.expand--map .row__footer #indicetittle {
  font-size: 25px;
  height: 34px;
  letter-spacing: 1px;
  margin-top: -6vh;
  text-align: center;
}


.expand--header .row__footer #indicetittle{
  font-size: 25px;
  height: 34px;
  margin-top: 2vh;
  letter-spacing: 1px;
}

.expand--puzzle .row__footer #indicetittle{
  font-size: 25px;
  height: 34px;
  margin-top: 3vh;
  letter-spacing: 1px;
}

.expand--puzzle .row__footer #maptittle{
  font-size: 25px;
  height: 34px;
  margin-top: 3vh;
  letter-spacing: 1px;
  margin-left: 4vh;
}

.expand--indice .row__header #stickertittle{
  font-size: 25px;
  height: 34px;
  margin-top: 4vh;
  letter-spacing: 1px;
  text-align: center;
}

.expand--indice .row__footer #puzzletittle {
  font-size: 25px;
  height: 34px;
  margin-top: 3vh;
  letter-spacing: 1px;
  text-align: center;
  margin-left: 19vh;
}

.expand--header .point{
  display: none;
  }

.expand--header .maps{
  display: none;
}

.expand--stuff .maps{
  display: none;
}

.expand--indice .maps{
  display: none;
}

.expand--indice .point{
  display: none;
}

.expand--footer .row__header {
    height: 50px;
}

.expand--footer .row__footer {
    height: 617px;
}

.expand--footer .row__header .grid__content--closed {
    display: block;
}

.expand--footer .row__header .grid__content--default {
    display: none;
}

.row__header .grid__content--center {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-self: center;
}

.expand--puzzle .row__footer .point {
    display: none;
}

 .expand--puzzle .row__footer .grid__content--closed #maptittle {
    display: block;
    position: absolute;
    top: 40vh;
    left: 10px;
}

.expand--puzzle .row__footer .grid__content--closed {
    display: block;
    margin: 0;

}



.expand--header .row__footer .grid__content--default {
    display: none;
}

.expand--map .column__stuff {
    width: 0%;
    padding: 0;
    margin: 0;
}

.expand--map .point {
    display: none;
}

.expand--map .row__footer .grid__content--closed {
    width: 50px;
    display: block;
    writing-mode: vertical-rl;
    /* text-orientation: upright; */
    margin: auto;
}

.expand--map .column__map {
    width: 325px;
}

.expand--map .row__footer .grid__content--closed #indicetittle {
  letter-spacing: 1px;
}

.expand--map .row__footer .grid__content--closed h1 {
  margin-right: 0.5em;
}

.expand--map .row__footer #maptittle {
    display: none;
}

.expand--stuff .column__map {
    width: 50px;
    margin: 0;
}

.expand--stuff .column__map .map {
    display: none;
}

.expand--stuff .column__stuff {
    width: 325px;
}

.expand--stuff .row__header {
    height: 50px;
}

.expand--puzzle .row__indice {
    height: 50px;
}
.expand--puzzle .row__footer #maptittle {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(-180deg);

}

.expand--indice .row__indice {
    height: 567px;
}

.expand--indice .row__footer .grid__content {
    display: block;
    margin: 0;
}

.expand--indice .row__footer #indicetittle {
    display: none;
}

.expand--indice .row__footer .grid__content--closed {
  display: block;
  margin: 0;
  padding: 0;
}

.expand--indice .row__footer .grid__content--closed #maptittle {
  display: block;
  writing-mode: vertical-rl;
  transform-origin: center;
  transform: rotate(-180deg);
  position: absolute;
  top:40vh;
}

.expand--indice .row__footer .grid__content--closed #puzzletittle {
  display: block;
  transform-origin: center;
  position: absolute;
}

.expand--indice .row__footer #maptittle {
  font-size: 25px;
  height: 34px;
  margin-top: 3vh;
  letter-spacing: 1px;
  margin-left: 6vh;
}

.expand--indice .row__footer .grid__content--default .point {
  display:none;
}

.show-0 .sticker:nth-child(1) {
  display: block;
}

.show-1 .sticker:nth-child(2) {
  display: block;
}

.show-2 .sticker:nth-child(3) {
  display: block;
}

.show-3 .sticker:nth-child(4) {
  display: block;
}

.show-4 .sticker:nth-child(5) {
  display: block;
}

.show-5 .sticker:nth-child(6) {
  display: block;
}

.show-6 .sticker:nth-child(7) {
  display: block;
}

.show-0 .map:nth-child(1) {
  display: block;
}

.show-1 .map:nth-child(2) {
  display: block;
}

.show-2 .map:nth-child(3) {
  display: block;
}

.show-3 .map:nth-child(4) {
  display: block;
}

.show-4 .map:nth-child(5) {
  display: block;
}

.show-5 .map:nth-child(6) {
  display: block;
}

.show-6 .map:nth-child(7) {
  display: block;
}

.show-0 .puzzle:nth-child(1) {
  display: block;
}

.show-1 .puzzle:nth-child(2) {
  display: block;
}

.show-2 .puzzle:nth-child(3) {
  display: block;
}

.show-3 .puzzle:nth-child(4) {
  display: block;
}

.show-4 .puzzle:nth-child(5) {
  display: block;
}

.show-5 .puzzle:nth-child(6) {
  display: block;
}

.show-6 .puzzle:nth-child(7) {
  display: block;
}

.show-0 .indicess:nth-child(1) {
  display: block;
}

.show-1 .indicess:nth-child(2) {
  display: block;
}

.show-2 .indicess:nth-child(3) {
  display: block;
}

.show-3 .indicess:nth-child(4) {
  display: block;
}

.show-4 .indicess:nth-child(5) {
  display: block;
}

.show-5 .indicess:nth-child(6) {
  display: block;
}

.show-6 .indicess:nth-child(7) {
  display: block;
}