@import url('https://fonts.googleapis.com/css?family=UnifrakturMaguntia');

body,html{
    height: 100%;
}
/* Changes the style of the body */
body{background-image: url("../images/Photo-Harry-Potter-Wallpapers.jpg");
     background-size: cover;
     background-repeat: no-repeat}

.headerFont{
    font-family: 'UnifrakturMaguntia', cursive;
    color: beige;
    text-align: center;
}     

#heading1{
    font-size: 70px;
    margin:2%;
    
}

#heading2{
    font-size: 30px;
    position: absolute;
    right :10%;
}

#heading3{
    font-size: 40px;
    position: absolute;
    width:50%;
    margin:3% 25%;
}

#divControl{
    position:absolute;
    top:40%;
    margin-left: 20%;
    width:100%;
}

#divButton{
    float: left;
    width:70%;
    
}

.controlButton{
    font-size: 18px;
    padding:3px 15px;
    margin:0 10px;
    border-radius: 8px;
    background-color: gold;
}

#tries{
    position: absolute;
    color:gold;
    /* background: white; */
    width:30%;
    right:10%;
    font-size: 25px;
    
}

/* Style for the div section with the word to be guessed */
#wordGen{
    color:rgb(207, 4, 4);
    position: absolute;
    text-align: center;
    top:55%;
    left:20%;
    width: 60%;
    /* height: 10%; */
}

/* Style for the grid containing the key buttons */
.grid{
    display:grid;
    position: absolute;
    grid-template-columns: repeat(7,20px); /* grid has 7 columns*/
    grid-gap: 25px;
    top:65%;
    left:20%;
    margin: 0 20%;
}


/* style for the alphabet buttons */
.btnKey{
    font-size: 14px;
    padding: 10px 20px 10px 10px; 
    border-radius: 20px;
    background-color: gold;
}

/* style for the paragraph with the word to be guessed */
#wordGuess{
    height: 10%;
    font-size: 30px;
}

.tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color:white;
    color:black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }

 #wordGen:hover .tooltiptext{
    visibility: visible;
 } 

.alertModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 20%;
    right: 25%;
    top: 20%;
    width: 60%; /* Full width */
    height: 100%; /* Full height */
    
}

 .modal-header {
    background-color: #711313;
    margin: 10%; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 90%; /* Could be more or less, depending on screen size */
    height:20%;
  }

  #alertImg{
      position: absolute;
      width: 20%;
      height:20%;
  }

  #alertId{
      position: absolute;
      left:35%;
      margin:10px;
      font-size: 25px;
      font-family: 'UnifrakturMaguntia', cursive;
      overflow-wrap: break-word;
      text-align: center;

  }

#divBtnAlert{
    top : 30%;
    position: absolute;
    width: 100%;
}
  #btnYes{
      position: absolute;
      left :45%;
  }

  #btnNo{

        position: absolute;
        left :60%;
  }