/* --------------- Global Properties -------------- */
/* html {
  background-color: black;
} */

/* body{
  background-color: black; 
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(19,59,3,1) 100%);
} */


/* --------------- Title -------------- */
#container-banner{
  background-image: url("/imagescomp/MarbleFloor_Cabinet.png");
  background-size: contain;
}

#cabinet-of-curiosity{
  font-family: 'Cinzel', serif;
  color: rgba(166,124,0,0.7);
  text-shadow: 3px 3px 2px black;
}

/* --------------- Cabinet -------------- */
#div-cabinet{
  margin: 0;
  padding: 0;
  height: 500px;
  border-style: solid;
  border-width: 30px;
  border-image: url(imagescomp/frame_brown.png) 45;  
  background-color: white;
}

.cab-door{
  margin: 0px;
  padding: 0px;
  
  background-image: url(./imagescomp/MarbleFloor_Cabinet.png);  
  background-size: contain;
}

.row{
  background-color: white; /* White behind beetles */
}

.cabinet-imgs{
  height: 500px;
}

#the-cabinet{
  margin: 0px;
  padding: 0px;  
  height: 440px; /* Cabinet is 500px and border is 30px*/
}

/* User to center cabinet */
#center-cabinet{ 
  padding: 0;
  margin: 0;
  border: 0;
  background-image: url("/imagescomp/MarbleFloor_Cabinet.png");
  background-size: contain;
}

#cabinet-floor{
  background-image: url("/imagescomp/MarbleFloor_Cabinet.png");
  background-size: contain;
  background-position: top right;
  height: 45vh;
}

#faqs{
  background-image: url("/imagescomp/MarbleFloor_Cabinet.png");
}

/* --------------- Buttons -------------- */
#btn-logout{  
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 5px 5px;
  border-radius: 10px;
  transition-duration: 0.2s;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  display: none;
  margin-right: 5px;
}
#btn-logout:hover {
  background-color: chocolate;
}
#btn-logout:active {
  background-color: pink;
  transform: translateY(4px);
}

#btn-login{
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 5px 5px;
  border-radius: 10px;
  transition-duration: 0.2s;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;  
}

#btn-login:hover {
  background-color: chocolate;
}

#btn-login:active {
  background-color: pink;
  transform: translateY(4px);
}

#my-wallet{
  background-color: lightcoral; /* Green */
  border: none;
  color: white;
  padding: 5px 5px;  
  border-radius: 10px;  
  display: inline-block;
  font-weight: bold;
  margin-right: 5px;
}

/* --------------- Media queries -------------- */
@media screen and (max-width: 1450px){
  #div-cabinet{
    height: 400px;    
  }
  #the-cabinet{
    height: 340px;
  }
  .cabinet-imgs{
    height: 400px;
  }
  #cabinet-of-curiosity{ 
    font-size: 70px;
  }
}

@media screen and (max-width: 1150px){
  #div-cabinet{
    height: 330px;    
  }
  #the-cabinet{
    height: 270px;
  }
  .cabinet-imgs{
    height: 330px;
  }
  #cabinet-of-curiosity{ 
    font-size: 55px;
  }
}

@media screen and (max-width: 992px){
  .cabinet-imgs{
    height: auto;
    width: inherit;
    padding: 0 16px;
  }

  #center-cabinet{
    padding: 0 29px;
  }

  #div-cabinet{
    height: 350px;    
  }
  #the-cabinet{
    height: 290px;
  }

  #cabinet-of-curiosity{ 
    font-size: 55px;
  }
}

@media screen and (max-width: 768px){
  #btn-logout{
    font-size: 0.9rem;
  }
  #my-wallet{
    font-size: 0.9rem;
  }
  #btn-adventurer{
    font-size: 0.9rem;
    width: 95vw;
    max-width: 95%;        
  }
  #btn-return-cabinet{
    font-size: 0.9rem;
    width: 95vw;
    max-width: 95%;        
  }
}

@media screen and (max-width: 700px){
  #center-cabinet{
    padding: 0 27px;
  }
}

@media screen and (max-width: 600px){
  #center-cabinet{
    padding: 0 24px;
  }

  #btn-logout{
    font-size: 0.85rem;
  }
  #my-wallet{
    font-size: 0.85rem;
  }
  #btn-adventurer{
    font-size: 0.85rem;
  }
  #btn-return-cabinet{
    font-size: 0.85rem;
  }
}

@media screen and (max-width: 500px){
  #cabinet-of-curiosity{ 
    font-size: 45px;
  }
}

@media screen and (max-width: 400px){
  #center-cabinet{
    padding: 0 22px;
  }
  #cabinet-of-curiosity{ 
    font-size: 45px;
  }

} 

@media screen and (max-width: 300px){
  #center-cabinet{
    padding: 0 20px;
  }
} 

@media screen and (max-width: 200px){
  #center-cabinet{
    padding: 0 18px;
  }
}