/* Style for the screens */
.screen {
    display: none;
  }
  
  #screen1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen1 .container {
  max-width: 100%;
  max-height: 100%;
}

#screen1 video {
/*    width: 50vw;*/
    height: 50vh;
    position: absolute;
    top: 40%;
    left: 32%;
    object-fit: cover;
}

#screen1 button {
  position: absolute;
  bottom: 15px;
  left: 46%;
/*  margin-top: 20px;*/
}


#photoPreview{
  background-size: contain;
  width: 300px;
  height: 300px;
}
  
  /* Style for the inputs and button in Screen 2 */
  #nameInput,
  #messageInput,
  #submitBtn {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  
  /* Style for the success message in Screen 3 */
  #screen3 {
    text-align: center;
  }
  
#uploadNoteBtn{
  position: absolute;
  top: 50%;
  left: 44%;
}

#success-msg{
  position: absolute;
  top: 40%;
  left: 32%;
}

@media only screen and (max-width:900px){
  #screen1 video{
    top: 20%;  
    left: 50%;
    transform: translateX(-50%) !important;  
    width: 300px;  
    height: 300px;
  }  

  #screen1 button{
    left: 40%;
    bottom: 20%;
  }

  #custom-form{
    position: absolute;
    bottom: 25%;
    left:20%;
  }

  #uploadNoteBtn{
    left: 33%;
  }

  #success-msg{
  position: absolute;
  top: 40%;
  left: 8%;
}

}