body{
    margin: 0;
    border: 0;
    background-color: rgb(25, 32, 51);
}

.container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: rgb(17, 19, 24);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
.assetRow{
    display: flex;
    width: 100%;
    height: 10vh;
    justify-content: space-between;
}
.item{
    width: 10vh;
    height: 10vh;
    text-align: center;
    align-items: center;
}

.hidden{
    position: absolute;
    opacity: 0;
    text-align: center;
    margin-bottom: 4px;
    width: 15vh;
    padding: 3px;
    border: gray 1px solid;
    border-radius: 10px;
    background-color: white;
    color: black;
    transition: .5s ease-in;
}

.person{
    width: 10vh;
    height: 10vh;
}

.person p:hover + .hidden{
    opacity: 1;
}

a{
    text-decoration: none;
    color: white;
}

.hiddenimg{
    position: absolute;
    opacity: 0;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }


.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.modal-content p{
    color:black;
    font-family: Helvetica, Sans-Serif;
    font-size:x-large;
    padding-left: 50px;
    padding-right: 50px;
    font-weight: bold;  
    text-align: center;
}

.modal-content ul li{
    color:white;
    font-family: Helvetica, Sans-Serif;
    font-size: large;
    padding-left: 50px;
    padding-right: 75PX;
    text-align: center;
}

#hidden{
    display: hidden;
}

/*some stuff i found*/

.folder {
    transition: all 0.2s ease-in;
    transform: scale(.6);
  }
  .folder_back {
    position: relative;
    width: 100px;
    height: 80px;
    background: #47c5ff;
    border-radius: 0px 5px 5px 5px;
  }
  .folder_back::after {
    content: "";
    position: absolute;
    bottom: 98%;
    left: 0;
    width: 30px;
    height: 10px;
    background: #47c5ff;
    border-radius: 5px 5px 0 0;
  }
  .folder_back .paper {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 10%);
    width: 70%;
    height: 80%;
    background: #e6e6e6;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
  }
  .folder_back .paper:nth-child(2) {
    background: #f2f2f2;
    width: 80%;
    height: 70%;
  }
  .folder_back .paper:nth-child(3) {
    background: white;
    width: 90%;
    height: 60%;
  }
  .folder_back .folder_front {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(116, 213, 252);
    border-radius: 5px;
    transform-origin: bottom;
    transition: all 0.3s ease-in-out;
  }
  .folder:hover {
    transform: translateY(-8px);
  }
  .folder:hover .paper {
    transform: translate(-50%, 0%);
  }
  .folder:hover .folder_front {
    transform: skew(15deg) scaleY(0.6);
  }
  .folder:hover .right {
    transform: skew(-15deg) scaleY(0.6);
  }

/*[출처] [Web] Pure CSS Icon Effect - Folder Open Animation Effect|작성자 JeromeBaek
This is the only thing i will copy, since it fits the aesthetic really well.*/


/* below this line is area specific styles*/
#fruit p:hover + .hiddenimg{
    opacity: 1;
    transition: 1s ease-in-out;
}


#nightstand p:hover + .hiddenimg{
  opacity: 1;
  transition: 1s ease-in-out;
}

#bed p:hover + .hiddenimg{
  opacity: 1;
  transition: 1s ease-in-out;
}


.animation-container {
display: none;
width : 200px;
height : 300px;
}

.visible{
display: block;
position: absolute;
top: 30%;
left: 45%;
}

.coinContainer {
position: relative;
top : 30px;
height : 300px;
width : 190px;
transform : scale(0.5) translateX(0) scaleY(0.7);
}

.y-axis-container {
 animation: bounce infinite 2.6s ease-in-out;
}

.shadow {
 animation: scaling  infinite 2.6s ease-in-out;
}

.coin {
position : absolute;
height : 300px;
left : 0;
width: 170px;
background : gold;
border-radius : 100%;
overflow : hidden;
}

.side-coin {
position : absolute;
left : 85px;
height : 300px;
width: 35px;
background : #f5b642;
}

.side {
position: absolute;
background : #f5b642;
left : 22px;
width : 165px;
height : 304px;
top: -2px;
}

.shine {
width : 400px;
height : 20px;
background : rgba(255,255,255,0.65);
transform: rotate(25deg);
animation : shine 5s;
}

.flash {
z-index: 200;
position : absolute;
width : 15px;
height : 15px;
background : white;
top: 30px;
right : 20px;
animation : flash 7s;
}

.dai {
position : absolute;
width: 100px;
height : 100px;
background : #faf20a;
border: 1px solid white;
transform : rotate(53deg) skew(26deg);
top: 94px;
left : 35px;
overflow : hidden;
}

.cutout {
z-index : 20;
width : 150%;
height : 150%;
background : #ffee38;
transform : rotate(45deg);
position : absolute;
top : 29px;
left : 29px;
}

.dai-shadow {
z-index : 20;
width : 150%;
height : 150%;
background : rgba(0,0,0,0.07);
transform : rotate(45deg);
position : absolute;
top : 29px;
right : 29px;
}

.inner-dai {
position : relative;
background : white;
height : 70px;
width: 70px;
top : 15px;
left : 15px;
}

.inner-inner-dai {
position : relative;
background : #ffee38;
width: 20px;
height : 20px;
top : 25px;
left : 25px;
}

.shadow {
position : relative;
left : calc(50% - 60px);
top : -40px;
background : rgba(0,0,0,0.2);
height : 30px;
width : 100px;
animation : scaling 2.6s;
border-radius: 100%;
}

@keyframes bounce {
20% {
  animation-timing-function: ease-out;
  transform: translateY(-60px);
}

 50% {
  animation-timing-function: ease-out;
  transform: translateY(-80px);
}
}

@keyframes scaling {
20% {
  transform: scale(0.6);
}

50% {
  transform: scale(0.5);
}
}

@keyframes flash {
0% {
  transform : rotate(0deg) scale(0);
}
8% {
  transform : rotate(0deg) scale(0);
}
10% {
  transform : rotate(150deg) scale(1.8);
}
15% {
  transform : rotate(45deg) scale(0);
}
100% {
  transform : rotate(45deg) scale(0);
}
}


@keyframes shine {
20% {
  transform : rotate(25deg) translateY(400px);
}

100% {
  transform : rotate(25deg) translateY(400px);
}
}