* {
    border: 0.1px solid rgba(0,0,0,0);
    /* border: 0.1px red solid; */
    font-family: 'Orbitron', sans-serif;
}

body {
    background-image: url('../images/controller.svg');
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    background: linear-gradient(-45deg, #bfbfbf, #99BDE4, #23A6D5, #2B6CC4);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}

.container {
    background-image: url('../images/controller.svg');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    max-height: 900px;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

/*----------------------------------------------*/

#out_guessed_letter {
    font-size: 5vw;
    /* max-width: 100vh; */
}

#in_name {
  width: 50%;
  margin: 10px auto;
  text-align: center;
}

#in_name::placeholder {
  text-align: center;
}

#div_start_game {
    /* margin-top: 50%; */
    padding-top: 25%;
    color: rgb(84, 139, 223);
}

#div_game_elements {
    padding-top: 25%;
}

h3 {
    font-size: 4rem;
    color: black;
}

#btn_new_word,
#btn_main_menu,
#btn_start_game {
    background:rgb(84, 139, 223);
    color:#fff;
    border:none;
    position:relative;
    height:60px;
    font-size:1.6rem;
    padding:0 2rem;
    cursor:pointer;
    transition:800ms ease all;
    outline:none;
}

#btn_new_word:hover,
#btn_main_menu:hover,
#btn_start_game:hover{
    background:rgb(255, 255, 255);
    color:rgb(84, 139, 223);
}

#btn_new_word:before,button:after,
#btn_main_menu:before,button:after,
#btn_start_game:before,button:after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    height:2px;
    width:0;
    background: rgb(17, 32, 240);
    transition:400ms ease all;
}

#btn_new_word:after,
#btn_main_menu:after,
#btn_start_game:after {
    right:inherit;
    top:inherit;
    left:0;
    bottom:0;
}

#btn_new_word:hover:before,button:hover:after,
#btn_main_menu:hover:before,button:hover:after,
#btn_start_game:hover:before,button:hover:after {
    width:100%;
    transition:800ms ease all;
}

.player_values {
    color: blue;
    font-weight: bolder;
    font-size: 2.5em;
}

#out_wrong_guesses {
    color: white;
    font-size: 2vh;
}
/* ---------- CUSTOM MEDIA QUERIES ------------ */
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {

    #out_guessed_letter {
        font-size: 7vw;
        transform: scale(1, 3);
    }

}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  #out_guessed_letter {
      font-size: 4vw;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}