*{
    margin:0;
    padding:0;
   
}

body{
    background-color:#a6b1e1;
    color:aliceblue;
    text-align:center;
}

.container{
    height:60vh;
    display:flex;
    justify-content: center;
    align-items: center;
}

.game{
    height:50vmin;
    width:50vmin;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    gap: 1vmin;
    z-index: 2;
}

.box{
    height:16vmin;
    width:16vmin;
    font-size:7vmin;
    border-radius:1rem;
    border:none;
    box-shadow: 2px 2px 0.5rem rgba(255, 255, 255, 0.845);
    background-color: #424874;
    color:azure;
    cursor:pointer;

}

#res{
    background-color: #ffffff;
    color: #212529;
    padding:0.8rem;
    border:none;
    border-radius: 0.5rem;
    font-size: 1.25rem;
    cursor:pointer;
    
}
#res:hover{
    background-color:#424874;
    color: #ffffff;
    transition:0.3s ease-in-out all;
    cursor:pointer;
}

#new{

    background-color: #ffffff;
    color: #212529;
    padding:1rem;
    border:none;
    border-radius: 1rem;
    font-size: 1.25rem;
}

.msg-container{
    height:20vmin;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    line-height: 1;
   
}
#new{
    margin-top:30px;
    font-size:1.5rem;
    display: inline-block;
   
}
#new:hover{
    background-color: #424874;
    color: #ffffff;
    transition:0.3s ease-in-out all;
    cursor:pointer;
}

#msg{
    color: #424874;
    font-size:5vmin;
    display:inline-block;
    line-height: 1;
    margin-bottom:0px;
    
}

.hide{
    display:none;
}

h1{
    margin-top:10px;
    font-size:3rem;
    font-family:Georgia, 'Times New Roman', Times, serif;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 0;
  background-color: rgba(3, 3, 3, 0.5);
  color: #ffffff;
  font-size: 14px;
  position: fixed;;
}

.footer .c{
    margin-left:45px;
}

.stars {
  background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
  opacity: 0.8;
  animation: moveStars 200s linear infinite;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  background-repeat: repeat;
  pointer-events: none; /* Allows clicks to pass through */
  z-index:1;
}
@keyframes moveStars {
  0% { background-position: 0 0; }
  100% { background-position: -10000px 5000px; }
}