body {
    background-color: black;
}
.container {
    background-image: url("../images/StarNightPhotobooth.png");
    height: 700px;
    max-width: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
}
.btnclick{
    background-color: blue;border-style: solid; border-color: rgb(255, 255, 255);color:white;padding: 15px;margin: 10px; font-size: 3vw; color: white;
    transition: all 0.2s;
    box-shadow: 0 0px 20px rgb(255, 255, 255);
}
.btnclick:hover{
    background-color: black;
    box-shadow: 0 0px 20px blue; transform: scale(1.1);
    
    box-shadow: 0 0px 20px blue; transform: scale(1.1);
        
      transform: translate3d(0px, -6px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform-style: preserve-3d;
        
      }


.skillsheader{ 
    font-family: 'roboto'; color: white; text-align: center; padding: 5px;
    margin-left: auto; margin-right: auto; margin-top: 40px; text-transform: uppercase; font-family: 'Montserrat'; 
      
    background: Blue; border-style: solid; border-color: rgb(255, 255, 255);color:white;padding: 15px;margin: 10px; font-size: 3vw; color: white;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 10px;}

.skill-box{display: flex; flex-wrap: wrap; width: 100%; height: 150px;}
.skill-item{font-size: 20px; color: white; background: blue; border-style: solid; border-color: rgb(255, 255, 255);color:white; padding: 15px;margin: 10px; font-size: 3vw; color: white; margin-left: 10px; padding: 10px; font-weight: bold; height: 40px; width: auto;padding-bottom:60px !important; margin-bottom: 10px; box-shadow: 0 0px 10px rgb(255, 255, 255); border-radius: 5px; }
  
  .skill-item:hover{ box-shadow: 0 0px 20px blue; transform: scale(1.1);}
.skill-item{transition: all 0.2s;}
.skill-item:hover{ box-shadow: 0 0px 20px blue; transform: scale(1.1); background-color: black;
    
  transform: translate3d(0px, -6px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform-style: preserve-3d;
    
  }
 
  .scatter-container {
    position: relative;
    width: 100vw;
    height: 700px;
    background-image: url("../images/wood.png");
    background-repeat: no-repeat;
    background-size: cover;
    border: 8px solid white;
    overflow: hidden;
    margin: auto;
  }

  .scatter-image {
    position: relative;
    width: 120px;
    height: auto;
    transform-origin: center center;
    pointer-events: none;
  }