/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  font-family: Verdana;
   margin: 0 auto;
}
.container{
  height: 100vh;
  width: 100%;
}
.lvl1{
  background-image: url("https://i.pinimg.com/1200x/6d/60/0d/6d600d2923147e34bb6cc25947444036.jpg");
  background-repeat: inherit;
  background-position: center;
}

.lvl2{
  background-image: url("https://techdeckwizard.neocities.org/green.png");
  background-repeat: no-repeat;
  background-position: inherit;
  background-size: cover;
}
.tooltip1 .tooltiptext1 {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}
.tooltip1:hover .tooltiptext1 {
  visibility: visible;
}
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}
  

.align-center{
    align-items: center;
}

.justify-center{
  justify-content: center;
}
.justify-evenly{
  justify-content: space-evenly;
}
.justify-around{
  justify-content: space-around;
}
.justify-between{
  justify-content: space-between;
}

.row {
  flex-direction: row;
}

.col{
  flex-direction: column;
}
.w-80{
  width: 80%;
}
.w-50{
  width: 50%;
}
.w-25{
  width: 25%;
}
.w-20{
  width: 20%;
}
.pointer{
  cursor: pointer;
}
.stamp1{
  width: 100px;
  cursor: pointer;
  border-radius: 10px;
  margin-left: -30px;
  top: -30px;
  position: relative;
  transform: rotate(-0.02turn);
}
.hover-bigger:hover{
    transform: scaleX(1.2);
    transform: scaleY(1.1);
}
.hover-jiggle:hover{
  transform: rotate(0.023turn);
}
.absolute {
  position: absolute;
}
.stamp2{
  width: 100px;
  cursor: pointer;
  border-radius: 10px;
  left: 36px;
  top: -107px;
  position: relative;
  transform: rotate(-0.02turn);

}


.stamp3{
  cursor: pointer;
  border-radius: 10px;
  position: relative;
  transform: rotate(0.04turn);
  top: -30px;
  right: 131px;
  width: 100px;
  height: 120px;
}


body{
    width:100%;
    height:auto;
    background-color: #1A2C42;
}


/*animations*/
/* roll container moves once, then stays put */
.roll{
  width: 5%;
  height: 100%;
  background-color: azure;
  border: solid black 1px;

  /* duration, timing, delay, iterations, fill-mode */
  animation: roll 10s linear 0s 1 forwards;
  display: flex;
  overflow: hidden;
}

/* define the roll animation */
/*@keyframes roll{*/
/*  from { transform: translateX(-100%); }*/
/*  to   { transform: translateX(0); }*/
/*}*/

/* the grid “spinner” runs a finite number of times, then freezes */
.rotate{
  width:100%;
  height:100%;
  background-size: 5px 5px;
  background-color: azure;
  background-image:
    linear-gradient(to right, black 1px, transparent 1px),
    linear-gradient(to bottom, black 1px, transparent 1px);

  /* 0.5s * 20 = 10s total; freeze on the last frame */
  animation: rotate 0.5s linear 0s 20 forwards;
  overflow: hidden;
}
/*ocean pic url('https://i.pinimg.com/1200x/03/19/83/03198330f7c19196dde853796287bf06.jpg'); */
/*@keyframes rotate{*/
/*  from { transform: translateX(-100%); }*/
/*  to   { transform: translateX(100%); }*/
/*}*/
/* the sheet expands once, then stays wide */
.sheet{
  background-image: url("https://i.pinimg.com/1200x/03/19/83/03198330f7c19196dde853796287bf06.jpg");
  background-position: bottom; ;
  background-size: cover;
  height: 700px;
  animation: sheet 10s linear 0s 1 forwards;
  z-index: -11;
  border-radius: 4px;
  display:flex;
}

/*@keyframes sheet{*/
/*  50% { width: 80%; }*/
  100% { width: 80%; } /* hold the width at the end */
/*}*/

.light-container{
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  color: white;
  padding: 10px;
}

.light-container img{
  margin-bottom: 5px;
}