html{
  font-family: "Comic Sans MS";
  font-weight: bold;
  color: #190c00;
  margin: 0;
}

.ubtn {
  background-color: #fbeee079;
  border: 2px solid #422800;
  border-radius: 30px;
  box-shadow: #301d00 4px 4px 0 0;
  color: #352000;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 18px;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

body {
    font-size: 1.25em;
    height: 100dvh;
    width: 100dvw;
    background-image: url("./media/Table.webp");
    overflow:hidden;
    margin: 0;
}

.stage{
  padding: 5%;
  overflow: hidden;
  transition: all 1s ease-out;
  position:absolute;
  bottom:0; top:0; left:0; right: 0;
}

.flexStage{
  padding: 0;
  display: flex;
  flex-direction: row;
  margin-left: 0;
  width: 500dvw;
}

.login_stage{
  background-color: rgba(0, 0, 0, 0.5);
}

.title_logo{
  width: 100%;
  height: 50%;
  background-image: url(./media/logo.webp);
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
}

.o_container{
  transition: all 1s ease-out;
  overflow: hidden;
}

@media (orientation: portrait) {
  .o_container{
    width: 100dvw;
    height: 100dvh;
  }
}
@media (orientation: landscape) {
  .o_container{
    width: 50dvw;
    height: 100dvh;
  }
}

.m_container{
  height: 100%;
  overflow: hidden;
  margin: auto;
  padding:0;
}

.m_folder{
  max-width: calc(100vh * (972/1144));  
}

.m_card{
  max-width: calc(100vh * (1080/750));
}

.i_container{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.folder{
    background-image: url(./media/Folder.webp);
    background-position: center;
    background-size: 100% 100%;
    margin: auto;
    padding: 5%;
    max-height: 60%;
    aspect-ratio: 744/889;
}

.clipboard{
  position: relative;
  background-image: url(./media/ClipBoardBack.webp);
  background-position: center;
  background-size: 100% 100%;
  padding: auto;
  padding: 7%;
  max-height: 60%;
  aspect-ratio: 744/889;
}

.clipboard_clip{
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-image: url(./media/ClipBoardClip.webp);
  background-position: center;
  background-size: 100% 100%;
  z-index: 10;
  content: " ";
  pointer-events: none;
}

.clipboard>.paper_clear{
margin:auto;
}

.paper_note{
  background-image: url(./media/paper.webp);
  font-size: 60%; 
  font-family: cursive;
  height: 80%;
  background-position: center;
  background-size: auto 100%;
  transform: rotate(1deg);
  padding: 3%;
  aspect-ratio: 7/9.25;
  padding-left: 5%;
  line-height: 103%;
  text-align: left;
}

.clipboard>.paper_note{
  margin:auto;
  padding-top:10%
}

.paper_clear{
  background-image: url(./media/paperClear.webp);
  font-size: 60%; 
  font-family: "American Typewriter, serif";
  height: 90%;
  background-color: white;
  padding: 2%;
  text-align: left;
  aspect-ratio: 7/9.25;
}

.menu_item:hover{
  color: brown;
  user-select: none;
}

.below{
  position:absolute;
  top: 150vh !important;
  bottom: -250vh !important;
}

.above{
  position:absolute;
  top: -250vh !important;
  bottom: 150vh !important;
}

.hidden_explanation{
  display: none;
}

.hidden{
  display: none;
}

#next_button{
  font: bolder;
  font-size: larger;
  color: white;
  position: fixed;
  right: 0;
  width: 5dvw;
  height: 100%;
  background-color: rgba(252, 89, 92, 0);
  background-image: linear-gradient(90deg, rgba(0,0,0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  border:none;
}

#prev_button{
  font: bolder;
  font-size: larger;
  color: white;
  position: fixed;
  left: 0;
  width: 5dvw;
  height: 100%;
  background-color: rgba(252, 89, 92, 0);
  background-image: linear-gradient(-90deg, rgba(0,0,0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  border:none;
}

#tablet{
  background-image: url(./media/Tablet.webp);
  background-size: 100% 100%;
  padding-top: 8%;
  padding-bottom: 18%;
  padding-left: 9%;
  padding-right: 9%;
  aspect-ratio: 596/842;
  max-height: 80%;
  }

  #tablet_content{
      width: 100%;
      height: 100%;
      border: none;
      font-size: 150%;
      overflow: auto;
  }

/*stamp screen*/
#r_stamp{
  border: black dashed 2px;
  height: 20%;
  width: 80%;
  margin: auto;
}

#r_just{
  font-family: cursive;
  text-align: left;
}

#r_sign{
  font-family: cursive;
  text-align: right;
  width: 100%;
}

#stamp_container{
  align-items: center;
  justify-content: space-around;
  display: flex;
  flex-direction: row;
  height: 30%;
  margin: auto;
}

.stamp{
  margin: 10%;
  height: 60%;
  width: 60%;
  font-size: 200%;
  font-weight: bolder;
  transition-duration:0.4s;
  text-transform: uppercase;
  border-radius: 1rem;
  font-family: 'Courier';
  -webkit-mask-image: url(./media/Stamp_texture.webp);
  -webkit-mask-size: 944px 604px;
  mix-blend-mode: multiply;
  background: none;
  text-align: center;
}

.inter_stamp{
  font-size: 200%;
  font-weight: bolder;
  transition-duration:0.4s;
  text-transform: uppercase;
  border-radius: 1rem;
  font-family: 'Courier';
  -webkit-mask-image:  url(./media/Stamp_texture.webp);
  -webkit-mask-size: 944px 604px;
  mix-blend-mode: multiply;
  background: none;
  text-align: center;
  color: black;
  border: 0.5rem solid black;
  -webkit-mask-position: 13rem 6rem;
  transform: rotate(-14deg);
  border-radius: 0;
}

.inter_stamp:hover{
  color: #0A9928;
  border: 0.5rem solid #0A9928;;
}

.hazard{
  border: 4px solid transparent;
}

.safe{
  border: 4px solid transparent;
}

.suspicious{
  border: 4px solid transparent;
}

.scam_msg{
    border: 4px dashed red !important;
}

.legit_msg{
    border: 4px dashed green !important;
}

.conf_msg{
  border: 4px dashed gray !important;
}

.scam{
  color: rgb(179, 29, 41);
  border: 0.5rem double rgb(179, 29, 41);
  transform: rotate(3deg);
  -webkit-mask-position: 2rem 3rem;
}

.scheck{
  color: blue;
  border: 0.5rem double blue;
  transform: rotate(3deg);
  -webkit-mask-position: 2rem 3rem;
}

.undecided{
  transform: rotate(12deg);
  color:  goldenrod;
  border: 3px solid goldenrod;
}

.legit{
  color: #0A9928;
  border: 0.5rem solid #0A9928;
  -webkit-mask-position: 13rem 6rem;
  transform: rotate(-14deg);
  border-radius: 0;
}
/*stamp screen*/

/* flippable card */
.flipable{
  border: 2px black solid; border-radius: 10px;
  transition: transform 330ms linear;
  transform-style: preserve-3d;
  background-color: white;
  box-sizing: content-box;
}

.thickness{
  background-color: black;
  position: absolute;
  top: 0;
  left: -2px;
  bottom: 0;
  width: 5px;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
  z-index: -20;
  content: '';
}

.flipping{
  transform: rotateY(90deg);
}
.flipped{
  transform: rotateY(180deg);
}

.frontside {
  background-image: url(./media/Card/CardFront.webp);
  background-size: 100% 100%;
  border:inherit;
  border-radius: inherit;
  background-color: white;
  position: absolute;
  left: -2px;
  top: -2px;
  width: 100%;
  height: 100%;
}

.backside {
  background-image: url(./media/Card/CardBack.webp);
  background-size: 100% 100%;
  border:inherit;
  border-radius: inherit;
  background-color: white;
  position: absolute;
  left: -2px;
  top: -2px;
  width: 100%;
  height: 100%;
  transform:  translateZ(-5px) rotateY(-180deg);
}

.RegisterInput{
  font-size: inherit;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: black dotted 1px;
}

#IDInput{
  width: 99%;
  font-size: inherit;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  text-align: center;
  background: rgb(232, 225, 195);
}

#NICKInput{
  font-size: inherit;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: black dotted 1px;
}

#flipper{
  margin-right: auto;
  pointer-events: auto;
  width: 8%;
  aspect-ratio: 1/1;
  border: solid brown 5px;
  border-radius: 100%;
  background-image: url(./media/Card/Flip.webp);
  background-size: cover;
}

#confirm{
  margin-left: auto;
  pointer-events: auto;
  width: 8%;
  aspect-ratio: 1/1;
  border: solid brown 5px;
  border-radius: 100%;
  background-image: url(./media/Card/Confirm.webp);
  background-size: cover;
}

.hui{
  opacity: 0;
  pointer-events: none;
}

#container:hover > .hui{
  opacity: 1;
}

.complete_in_list{
  color: goldenrod;
  text-shadow: 1px 1px 2px black;
}
/*end of flipable card*/