/*Import font from Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');

/*Whole Page*/
/*The code used to style the background of the body was taken from the following resources:
https://www.w3schools.com/css/css3_gradients.asp
https://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats/ */
body{
    text-align: center;
    font-family: 'Electrolize', sans-serif;
    background-image: linear-gradient(to bottom right, lightblue, white);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.vertical-margin{
    margin-top:20px;
    margin-bottom:20px;
}

.horizontal-margin-single{
    margin-left:auto;
    margin-right:auto;
}

h1{
    letter-spacing: 10px;
}

/*Home page*/
/*The code used to style the background of the home page was taken from the following resources:
https://www.w3schools.com/css/css3_gradients.asp */
#home-page{
    width:60%;
    border-style: solid;
    border-radius:10px;
    background-image: linear-gradient(to bottom right, lightgreen, green);
    padding:15px;
    box-shadow: 5px 5px green;
}

#settings{
    width:50%;
}

#username{
    width:60%;
}

#about, #instructions, #settings{
    border-style: solid;
    border-color: grey;
    box-shadow: 5px 5px green;
    padding:10px;
}

/*The below code used to style the difficult switch was taken from the 
/* following resource from geekgsforgeeks
/* https://www.geeksforgeeks.org/how-to-create-toggle-switch-by-using-html-and-css/ */
 .toggle {
    position : relative ;
    display : inline-block;
    width : 100px;
    height : 52px;
    background-color:lightgray;
    border-radius: 30px;
    border: 2px solid gray;
}
       
.toggle:after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: gray;
    top: 1px;
    left: 1px;
    transition:  all 0.5s;
}
       
.checkbox:checked + .toggle::after {
    left : 49px;
}
       
.checkbox:checked + .toggle {
    background-color: lightgray;
}
       
.checkbox {
    display : none;
}

/*Game Page*/
/*The code used to style the background of the home page was taken from the following resources:
https://www.w3schools.com/css/css3_gradients.asp */
#game-page{
    display:none;
    width:50%;
    border-style: solid;
    border-radius:10px;
    background-image: linear-gradient(to bottom right, lightgreen, green);
    box-shadow: 5px 5px green;; 
}

#prompt-area{
    height:80px;
}

#game-table td{
    padding:40px;
    background-color:cadetblue;
    border: 2px solid;
    border-radius: 30%;
    box-shadow: 5px 5px green;
}

#score-area .fa-solid{
    padding:30px;
}

#guess-again{
    margin:15px;
}

#gold{
    color:gold;
} 

#silver{
    color:silver;
} 

#bronze{
    color:#cd7f32;
}
  
  
#leaderboard td, #leaderboard th{
    padding:15px;
}

button{
    font-family: 'Electrolize', sans-serif;
    border-style: solid;
    width:100px;
    font-weight: bold;
    box-shadow: 1px 1px grey;
}

#leaderboard,#found-table{
    border-style: solid;
    background-image: linear-gradient(to bottom right, lightgreen, green);
    box-shadow: 5px 5px green;
}


/*Media queries for game page*/
@media only screen and (max-width: 570px) {
    #game-table td {
        padding:25px;
    }
    #score-area .fa-solid{
        padding:20px;
    }
  }

  @media only screen and (min-width: 2000px) {
    #game-page {
       font-size:x-large;
    }
    #prompt-area{
        height:150px;
    }
}
@media only screen and (max-width: 1400px) {
    #game-page {
        width:75%;
    }
  }
  @media only screen and (max-width: 980px) {
    #game-table td {
        padding:25px;
    }
    #score-area .fa-solid{
        padding:16px;
    }
  }    
  @media only screen and (max-width: 800px) {
    #game-page{
        width:90%;
    }
    
    #game-table td {
        padding:25px;
        font-size: medium;
    }
    #score-area .fa-solid{
        padding:12px;
        font-size:medium;
    }
    #leaderboard {
        width:60%;
    }
  } 
  @media only screen and (max-width: 600px) {
    #game-table td {
        padding:15px;
        font-size: small;
    }
    #score-area .fa-solid{
        padding:5px;
        font-size:medium;
    }
  } 

  @media only screen and (max-width: 450px) {
    #game-page{
        width:95%;
    }
    
    #game-table td {
        padding:10px;
        font-size: x-small;
    }
    #leaderboard td, #leaderboard th{
        padding:8px;
    }

  }      

/*Media queries for home page*/
  @media only screen and (min-width: 2000px) {
    #home-page {
        font-size:x-large;
    }
    button{
        height:80px;
        width:200px;
        font-size:x-large;
    }
  }
@media only screen and (max-width: 1040px) {
    #home-page {
        font-size:small;
    }
  }
  @media only screen and (max-width: 1300px) {
    #home-page {
        width:75%;
    }
  }
  @media only screen and (max-width: 810px) {
    #home-page {
        width:90%;
    }
  }
  @media only screen and (max-width: 530px) {
    .toggle {
        width:60px;
        height:32px;
    }
    .toggle:after{
        width:30px;
        height:30px;
    }
    .checkbox:checked + .toggle::after {
        left : 29px;
    }
  }