body{
    margin: 0;
    overflow: hidden;
    display: flex;
}

body:has(.noScroll){
    overflow: hidden;
}

#TEXTCOLOR{
    font-size: x-large;
    font-weight: 100;
    color: rgb(134, 23, 47);
    text-shadow: -1px -1px 0 #ffbdbd, 1px -1px 0 #ffa1a1, -1px 1px 0 #ffffff, 1px 1px 0 #851515;
    width: 400px;
    height: 800px;
}

button{
    background: none;
    border: none;
    
}

button img{
    width: 100px;
}

.hoverable:hover{
    transform: scale(110%);
}

body:has(.bearcursor){
    cursor: url(../img/tender-heart2.png), auto;
}

.pinkBG{
  width: 100%;
  height: 100%;
  background-image: url(../img/background.gif);
  background-repeat: repeat;
  position: absolute;
}


.container{
    display: grid;
    object-fit: cover;
    padding: 10px;
}

.flexcontainer{
    z-index: 20;
    display: flex;
    justify-content: center;
    /* background-color: red; */
    flex-wrap: wrap;
    width: 100px;
}

.draggable{
    width: 100%;
    height: 100%;
    position: absolute;
}

.modal{
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    width: 600px;
    height: 700px;
    
}

.modalcontainer{
    border: 2px solid #32a1ce ;
    padding: 5px;
    background-color: white; 
    overflow-y: scroll;
}

.modal.active{
    transform: translate(-50%, -50%) scale(1);
}

.modalheader{
    padding: 10px, 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #32a1ce;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */

    background-color: white;
    
}

.modalheader .title{
    font-size: 2.25rem;
    font-weight: bold;
}


.modalbody{
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    
}
.modalbody .modaltext{
    font-size: 1.25rem;
    padding: 20px;
}

.modalimage{
    width: 100%;
    height: 100%;
}


#overlay{
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: palevioletred;
    z-index: 9;
    pointer-events: none;
}

#overlay.active{
    opacity: .8;
    pointer-events: all;
}

/* --- THE FRIDGE --- */

#backbutton{
    z-index: 8;
    position: absolute;
    top: 40px;
    left: 900px;
}
#backbutton img{
    width: 300px;
    height: 100px;
}

#fridge {
    align-items: center;
    position: absolute;
    top: -4vh;
}
#fridge img{
    width: 1000px;
    height: 1500px;
}

#HOLDER{
    position: absolute;
    width: 600px;
    height: 700px;
    top: 10%;
    left: 18%;
    overflow-y: scroll;
    overflow-x: hidden;
}


.container:has(#PICTURE1){
    height: 1500px;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(40, 1fr);
}

.modal:has(.KIDART){
    left: 75%;
    top: 70%;
}


.modalcontainer:has(.KIDART){
    background-color: rgb(255, 255, 249);
    
    width: 80%;
    height: 70%;
    border-radius: 10px;
    max-width: 80%;
    max-height: 70%;
}


.modalkidart{
    width: 120%;
    height: 100%;
    transform: translate(-150%);
    position: fixed;
    left: 45%;
    top: -25%;
    align-items: center;
    display: flex;
    justify-content: center;
}
.modalkidart img{
    max-width: 100%;
    max-height: 100%;
    border: 2px solid white;
    border-radius: 2px;
    
}

.modal #sticker1{
    position: fixed;
    top: -5%;
    left: 30%;
    transform: translate(-50%, -50%);
    z-index: -5;
}
.modal #sticker2{
    position: fixed;
    z-index: -5;
}
.modal #deco2{
    position: fixed;
    top: 65%;
    left: -45%;
}

#PICTURE1{
    grid-area: 1 / 1 / 10 / 5;
    border: thick double #32a1ce;
    border-radius: 2%;
   transform: rotate(5deg);
}

#PICTURE1 img, #PICTURE2 img, #PICTURE3 img, #MAGNET1 img, #PICTURE4 img,#PICTURE5 img, #MAGNET3 img,#MAGNET2 img,#MAGNET4 img,#MAGNET5 img{
    width: 100%;
    height: 100%;
    min-width: 0;
    max-height: 100%;
    
}


#PICTURE2{
    grid-area: 2 / 6 / 10 / 10;
    border: thick double #ed81fc;
    border-radius: 2%;
    transform: rotate(-2deg);
    z-index: 0;
}

#PICTURE3{
    grid-area: 9 / 4 / 17 / 8;
    border: thick double #22ac34;
    border-radius: 2%;
    transform: rotate(10deg);
    z-index: 2;
}

#PICTURE4{
     grid-area: 10 / 1 / 15 / 6;
    border: thick double #fdf46f;
    border-radius: 2%;
    transform: rotate(-13deg);
    z-index: 1;
}
#PICTURE5{
    grid-area: 12 / 7 / 21 / 11;
    border: thick double #7dff8f;
    border-radius: 2%;
    transform: rotate(2deg);
    z-index: 1;
}


#FRIDGEART img{
    position: absolute;
    width: 300px;
    height: 150px;
    left: 350px;
    top: 0px;;
}

#rainbow{
    position: absolute;
    
}
#topdivider{
    position: absolute;
    left: 300px;
    top: 20px;
}


#MAGNET1, #MAGNET2,#MAGNET3,#MAGNET4,#MAGNET5,#FRIDGEART, #description{
    filter: drop-shadow(5px 5px 4px #331fa5);
}

#MAGNET1{
    grid-area: 1 / 5 / 4 / 7;
    z-index: 1;
}

#MAGNET4{
    grid-area: 8 / 4 / 10 / 5;
    transform: rotate(10deg);
    z-index: 3;
}

#description{
    background-color: rgb(250, 249, 243);
    border: 2px dashed rgb(224, 73, 174) ;
    border-radius: 10%;
    width: 600px;
    height: 500px;
    position: absolute;
    top: 150px;
    left: 900px;
    z-index: 5;
    padding: 10px;

}
#descGIF{
    position: absolute;
    z-index: 6;
    top: -180px;
    left: 960px;
    width: 110%;
}
#descGIF img{
    width: 30%;
    height: 20%;
}

/*  ---- MAIN PAGE ----  */


#COMPUTERBACKGROUND{
    position: absolute;
    min-width: 100vmax;
    min-height: 100vmax;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    pointer-events: none;
    
}

#blogbutton{
    z-index: 10;
}
#fridgeicon{
    z-index: 10;

}

#searchbar{
    position: absolute;
    left: 0;
    top: 100vh;
    transform: translate(-.5%, -80%);

}
#searchbar img{
    width: 2000px;
    height: 50px;
}

.applabel{
    font-size: 1.25rem;
    z-index: 10;
    color: rgb(255, 255, 255);
    text-shadow: -1px -1px 0 #9c9c9c, 1px -1px 0 #9c9c9c, -1px 1px 0 #9c9c9c, 1px 1px 0 #9c9c9c;
}

#contain1{
    position: absolute;
    top: 75%;
    left: 40px;
}

#contain2{
    position: absolute;
    left:40px;
    top: 5%;
}

#contain3{
    position: absolute;
    top: 5%;
    left: 200px;
}