* {
  margin: 0px;
  padding: 0px;
}

body {
  background-image: url(../img/bodyBackground.png);
  background-position: center;
  background-size: cover;
}

#characterObj {
  width: 1000px;
  height: 400px;
  border-radius: 20px;
  padding: 10px 150px 10px 150px;
  background-image: url(../img/background4.jpg);
  background-position: center;
  background-size: cover;
  border: 5px solid rgb(68, 68, 68);
  position: relative;
}

main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 2rem;
  margin-top: -2px;
}

#characterContainer {
  display: flex;
  justify-content: center;
  width: 100%;
  background: #282828;
}

#characterContainer {
  background-image: url(../img/background2.jpg);
  background-position: center;
  background-size: cover;
}

#controls {
  display: flex;
  justify-content: center;
}


#container {
  margin: 50px auto 10px auto;
  padding: 20px 200px 20px 200px;
  /* background: #111; */
  /* background-image: linear-gradient(180deg, #111, #151515, #111); */
  background-image: radial-gradient(rgb(28, 28, 28), #111);
  border-radius: 30px;
  width: 650px;
  border: 5px solid #3f1c5a;
  box-shadow: 10px 20px 30px #131313;
  display: flex;
  flex-direction: column;
}

.btn {
  font-size: 20px;
  width: 150px;
  /* opacity: 0.8; */
  /* color: white; */
  padding: 10px;
  border-radius: 10px;
  /* transition: opacity 0.1s; */
  margin: 10px;
  font-family:monospace;
}

button:hover {
  cursor: pointer;
  opacity: 1;
}

#imageTitle {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 0px;
  background: #111;
  scale: 1.5;
}

#imageTitle img{
  height: 30px;
  background: #111;

}

#textBox{
  height: 50px;
  width: 300px;
  margin-right: 300px;
  margin-top: 20px;
  padding: 10px;
  background-color: lightblue;
  position: absolute;
  font-family:monospace;
  font-size: 12px;
}

#timer {
  height: 50px;
  width: 100px;
  position: absolute;
  margin-left: 600px;
  margin-top: 50px;
  color: white;
  font-size: 25pt;
}

#showFood{
    height: 100px;
    width: 200px;
    position: absolute;
    margin-left: 380px;
    margin-top: 150px;
    color: white;
    font-size: 20pt;
    text-align: right;
    opacity: 0;
    transition: opacity 3s ease;
}
#showFood.show {
  opacity: 1;
}

#showFoodPoison{
  height: 100px;
  width: 200px;
  position: absolute;
  margin-left: 380px;
  margin-top: 220px;
  color: rgb(115, 206, 115);
  font-size: 20pt;
  text-align: right;
  opacity: 0;
  transition: opacity 1s ease;
}
#showFoodPoison.showPoison{
  opacity: 1;
}

/* Collect Name */
.inputInfo{
  margin: 10px auto 10px auto;
  height: 5%;
}
.inputInfo button{
  padding: 6px 20px 6px 20px;
  background-color: #EC5070;
  border-radius: 5px;;
  font-size: 20px;
  font-family: monospace;
}
#inputName{
  height: 30px;
  width: 300px;
  text-align: center;
  margin-right: 50px;
  background-color: lightcyan;
  border: #EC5070 3px solid;
  font-size: 15px;
}

/* Display Name */
#nameValue{
  position: absolute;
  color: white;
  bottom: 270px;
  margin-left: 450px;
  font-size: 30px;
}

/* ! Search Stop and Reset Buttons */
#SSRBtns {
  height: 2rem;
  width: 600px;
  margin: 10px auto 20px auto;
  display: flex;
  justify-content: space-around;
  font-family: monospace;
}
#SSRBtns button{
  /* background-color: #00BEAC; */
  /* background-color: #1A57B9; */
  background-image: linear-gradient(180deg, #1e61cd, #103879);
  color: rgb(214, 214, 214);
  border: 2px #103879 solid;
  padding: 8px 50px 8px 50px;
  border-radius: 7px;
}
#SSRBtns button:hover{
  background-image: linear-gradient(180deg, #103879, #1e61cd);
  border: 2px #1e61cd solid;
  font-size: 13px;
}

/* ! CONTROL PANELS */
#controlBttns{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

/* ! EMOTIONAL BTTNS */
#emotionBttns{
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgb(38, 38, 38);
  border-radius: 15px;
  border: 4px rgb(79, 79, 79) double;
}
.emotionBttnsTop, 
.emotionBttnsBottom {
  display: flex;
  flex-direction: row;
}
.emotionBtn {
  background-image: linear-gradient(180deg, #00BEAC, #007e71);
  border: 3px #009182 solid;
}
.emotionBtn:hover {
  background-image: linear-gradient(180deg, #007e71, #00BEAC);
  border: 3px #00BEAC solid;
  font-size: 19px;
}

/* ! SECOND BTTNS */

.secondBttns {
  display: flex;
  flex-direction: column;
  background-color: rgb(38, 38, 38);
  border: 4px rgb(79, 79, 79) double;
  border-radius: 15px;
}
.secondBttns button{
  background-image: linear-gradient(180deg, #662D91, #3a1953);
  border: 3px #3a1953 solid;
  color: white;
}
.secondBttns button:hover{
  background-image: linear-gradient(180deg, #3a1953, #662D91);
  border: 3px #662D91 solid;
  color: white;
  font-size: 19px; 
}


#extraBorder{
  border: 5px white solid;
}

@media only screen and (max-width: 600px) {
  * {
    margin: 0px;
    padding: 0px;
  }
  body{
    margin: 0px;
    width: 100vw;
    overflow-x: hidden;
    padding: 0px;
  }

  #container {
    width: 100vw;
    margin: 0px;
    padding: 20px 150px 20px 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #characterObj {
    width:500px;
  }
  #emotionBttns{
    width: 400px;
    align-items: center;
    margin: 0 auto;
  }
  .secondBttns{
    width: 400px;
    align-items: center;
  }
  #SSRBtns{
    width: 100vw;
    text-align: center;
  }
  
  #controlBttns{
    display: flex;
    flex-direction: column;
  }
}