@charset "utf-8";

@media (max-width: 575px) { 
  #cover{
  }
  #infoScreen{
    height:auto;
    width:400px;
    left: 50%;
    margin:140px 0 -230px -200px;
    padding: 3rem 3rem;
    font-size: 1rem
  }
  #infoScreen h2{
    font-size: 1.2rem
  }
  #cancel{
    font-size:40px;
  }  
}

@media (min-width: 576px) and (max-width: 767px) { 
  #cover{
  }
  #infoScreen{
    height:auto;
    width:500px;
    left: 50%;
    margin:140px 0 -280px -250px;
    padding: 3rem 5rem;
    font-size: 1.25rem
  }
  #infoScreen h2{
    font-size: 1.5rem
  }
  #cancel{
    font-size:60px;
  }  
}

@media (min-width: 768px) { 
  #cover{
  }
  #infoScreen{
    height:auto;
    width:700px;
    left: 50%;
    margin:140px 0 -380px -350px;
    padding: 3rem 7rem;
    font-size: 1.25rem
  }
  #infoScreen h2{
    font-size: 1.5rem
  }
  #cancel{
    font-size:60px;
  } 
}

#cover{
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,0.8);
  z-index:2000;
  width:100%;
  height:100%;
  display:none;
  opacity:2;
}
#infoScreen{
  position:fixed;
  z-index:2001;
  display:none;
  opacity:2;
  border:none;
  background-color: #fff;
  box-shadow: 0 0 25px rgba(0,0,0,0.4);
}
#cancel{
  display:block;
  position:absolute;
  color:black;
  text-decoration:none;
  text-align:center;
  font-weight:bold;
  top:3px;
  right:2px;
  height:60px;
  width:60px;
}