body
{
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position:center;
	background-size:100% 100%;
	user-select : none;
  overflow: hidden;
}
#playDiv{
    margin-top: 55vh;
}
.showletter{
 	  position: absolute;
    top: 50%;
    left:55%;
    transform: translate(-50%, -50%);
    color:#ffffff;
  	font-size: 3vw;
}
#mainDiv{
    margin-top: -1%;
}
.stars{
 margin-left:5%;
}
#starDiv2{
 margin-left:9%; 
}
.cards{
	margin-top: 3%;
 	position: relative;
  text-align: center;
}
.windowImg{
	height:35vh;
  pointer-events:none;
}
.modalImg{
	height:50vh;
}
.pictures{

  height:18vh;
  position: absolute;
  left: 50%;
  top:86%;
  transform: translate(-50%, -50%);
  margin-top: -30%;
}
.noPadding
{
	padding : 0%;
}
#logos
{
	 margin-top:0.5%;
}
#soundDiv{
  margin-left: 2%;
}
#starDiv{
  margin-left: 31%;
}
.modal-content
{
background-color: #9e599c;
}
.modal 
{
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   padding-top: 100px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: hidden; 
   background-color: rgba(0,0,0,0.6); 
   padding:10%;
}
#lastMsg{
    margin-top: 15%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 9vw;
}
@media only screen and (max-width: 480px) {
#mainDiv{
  margin-top:0%;
}
}
@media only screen and (min-width: 1900px) {
.showletter {
    position: absolute;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 3vw;
}

#modalImg{
    height: -webkit-fill-available;
}
#responseBox{
  width: 17vw;
  height: 26vh;
}
}