body {
  color:            #ffffff;
  background:       #152219;
}

* {
  font-size:          20px;
  letter-spacing:     2px;
  font-family:        'Barlow Condensed', sans-serif;
}

/* Titles */
.game-title {
  background-color: #344e41;
  background-image:   url(../images/bo_play_pattern.png);
  position:           relative;
  left:               -6px;
  margin:             0;
  padding:            10px;
  width:              80%;
  text-align:         left;
  font-family:        'Expletus Sans', cursive;
  font-size:          75px;
  font-style:         normal;
  color:            #696968;
  -webkit-text-stroke: 1px #c6c3ba;
  line-height:        2;
}

.game-subtitle {
  position:            absolute;
  margin:              0;
  margin-top:          -40px;
  margin-left:         450px;
  font-family:         'Supermercado One', cursive;
  font-size:           60px;
  color:             #344e41;
  filter:              drop-shadow(2px 2px 10px #b2ceb3);
  -webkit-text-stroke: 1px #46684c;
}

div {
  text-align: center;
}

/* Bio & Pic Section */
#bio-div {
  position:            relative;
  top:                 40px;
  left:                50px;
  width:               300px;
  height:              300px;
  padding:             10px;
  margin-left:         10px;
}

.bio-image {
  width: 300px;
  height: 300px;
  border-radius: 25px;
}

#container {
  position:            absolute;
  top:                 180px;
  left:                500px;
}

/* Game Section */
#game-section {
  float:               left;
  background-color:  #46684C;
  width:               500px;
  height:              750px;
  padding-top:         4px;
  padding-right:       14px;
  padding-left:        14px;
  margin-bottom:       50px;
  border:              7px ridge #B2CEB3;
  border-radius:       14px;
  box-shadow:          inset -1px -1px #658E64, 0px 1px #C6C3BA;
}

#explanation {
  text-align:          justify;
}

#hint-text {
  background-color: #C6C3BA;
  color:            #344E41;
  text-align:       left;
  padding:          6px;
}

#current-name, #guessed-letters {
  font-size:            120%;
  }

  #guessed-letters {
    min-height:         20px;
    border:             2px ridge #B2CEB3;
    border-radius:      14px;
    background-color: #658E64;
  }
  
  #wins {
    font-size:          175%;
    color:            #a53860; 
    filter:              drop-shadow(5px 5px 10px #c5e9c6);
              -webkit-text-stroke: 1px #ffffff;
    }
  


/* MEDIA QUERIES */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 640px) {

* {
  font-size:          13px;
  letter-spacing:     1px;
  font-family:        'Nova Slim', cursive;
}

/* Titles */
.game-title {
  margin:             0;
  padding:            4px;
  width:              100%;
  font-size:          50px;
  }

.game-subtitle {
  margin-top:          -18px;
  margin-left:         80px;
  font-size:           40px;
  color:               #ffffff;
  -webkit-text-stroke: 2px #46684c;
  }

#bio-div {
  display: none;
  }

#container {
    position:           absolute;
    top:                94px;
    left:               10px;
  }

/* Game Section */
#game-section {
  width:               454px;
  height:              456px;
  padding-top:         0px;
  padding-right:       10px;
  padding-left:        10px;
  margin-bottom:       10px;
  border:              4px ridge #B2CEB3;
}

#current-name, #guessed-letters {
  font-size:            160%;
  }

}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 641px) {

  * {
    font-size:          15px;
    letter-spacing:     1px;
    font-family:        'Nova Slim', cursive;
  }
  
  /* Titles */
  .game-title {
    margin:             0;
    padding-top:        8px;
    padding-bottom:     8px;
    width:              99%;
    font-size:          60px;
    }
  
  .game-subtitle {
    margin-top:          -50px;
    margin-left:         136px;
    font-size:           50px;
    color:               #c2e5d0;
    -webkit-text-stroke: 2px #46684c;
    }
  
  /* Bio & Pic Section */
  #bio-div {
    position:            relative;
    top:                 10px;
    left:                50px;
    width:               220px;
    height:              220px;
    padding:             0px;
    margin-left:         0px;
  }

  .bio-image {
    width:                90%;
    height:               85%;
  }
  
  #container {
      position:           absolute;
      top:                370px;
      left:               18px;
    }
  
  /* Game Section */
  #game-section {
    width:               560px;
    height:              530px;
    padding-top:         0px;
    padding-right:       10px;
    padding-left:        10px;
    margin-bottom:       10px;
    border:              7px ridge #B2CEB3;
  }
  
  #current-name, #guessed-letters {
    font-size:            140%;
    }
  
  }


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

  * {
    font-size:          18px;
    letter-spacing:     2px;
    font-family:        'Barlow Condensed', sans-serif;
  }
  
  /* Titles */
  .game-title {
    margin:             0;
    padding-top:        8px;
    padding-bottom:     8px;
    width:              88%;
    font-size:          65px;
    }
  
  .game-subtitle {
    margin-top:          -60px;
    margin-left:         176px;
    font-size:           54px;
    color:             #c2e5d0;
    -webkit-text-stroke: 2px #46684c;
  }
  
  /* Bio & Pic Section */
  #bio-div {
    position:            relative;
    top:                 30px;
    left:                50px;
    width:               240px;
    height:              200px;
    padding:             0px;
    margin-left:         0px;
  }

  .bio-image {
    width:                80%;
    height:               80%;
  }
  
  #container {
      position:           absolute;
      top:                380px;
      left:               80px;
    }
  
  /* Game Section */
  #game-section {
    width:               584px;
    height:              640px;
    padding-top:         0px;
    padding-right:       10px;
    padding-left:        10px;
    margin-bottom:       10px;
    border:              7px ridge #B2CEB3;
  }
  
  #current-name, #guessed-letters {
    font-size:            120%;
    }
  
}


/* Large devices (laptops/desktops, 960px and up) */
@media only screen and (min-width: 960px) {

  body {
    color:            #ffffff;
    background:       #152219;
  }
  
  * {
    font-size:          20px;
    letter-spacing:     2px;
    font-family:        'Barlow Condensed', sans-serif;
  }
  
  /* Titles */
  .game-title {
    background-color: #344e41;
    background-image:   url(../images/bo_play_pattern.png);
    position:           absolute;
    top:                -20px;
    left:               -6px;
    margin:             0;
    padding:            10px;
    width:              80%;
    text-align:         left;
    font-family:        'Expletus Sans', cursive;
    font-size:          75px;
    font-style:         normal;
    color:            #696968;
    -webkit-text-stroke: 1px #c6c3ba;
    line-height:        2;
  }
  
  .game-subtitle {
    position:            relative;
    margin:              0;
    top:                 70px;
    left:                12px;
    font-family:         'Supermercado One', cursive;
    font-size:           60px;
    color:             #344e41;
    filter:              drop-shadow(2px 2px 10px #b2ceb3);
    -webkit-text-stroke: 1px #46684c;
  }
  
  div {
    text-align: center;
  }
  
  /* Bio & Pic Section */
  #bio-div {
    position:            relative;
    top:                 100px;
    left:                8px;
    width:               300px;
    height:              300px;
    padding:             10px;
    margin-left:         10px;
  }
  
  .bio-image {
    width: 280px;
    height: 280px;
    border-radius: 25px;
  }
  
  #container {
    position:            absolute;
    top:                 180px;
    left:                350px;
  }
  
  /* Game Section */
  #game-section {
    float:               left;
    background-color:  #46684C;
    width:               500px;
    height:              750px;
    padding-top:         4px;
    padding-right:       14px;
    padding-left:        14px;
    margin-bottom:       50px;
    border:              7px ridge #B2CEB3;
    border-radius:       14px;
    box-shadow:          inset -1px -1px #658E64, 0px 1px #C6C3BA;
  }
  
  #explanation {
    text-align:          justify;
  }
  
  #hint-text {
    background-color: #C6C3BA;
    color:            #344E41;
    text-align:       left;
    padding:          6px;
  }
  
  #current-name, #guessed-letters {
    font-size:            120%;
    }
  
    #guessed-letters {
      min-height:         20px;
      border:             2px ridge #B2CEB3;
      border-radius:      14px;
      background-color: #658E64;
    }
    
    #wins {
      font-size:          175%;
      color:            #a53860; 
      filter:              drop-shadow(5px 5px 10px #c5e9c6);
                -webkit-text-stroke: 1px #ffffff;
      }
    
}