*{
    padding:0;
    margin:0;
}
body{
    background-image: url("alexey-kurbatov-hexagon-floor-1.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh;
}
.container{
    width:99%;
    height:80vh;
    overflow:hidden;
    display:flex;
    justify-content: center;
    align-items: center;
}
.input_container{
    width:400px;
    height:450px;
    text-align:center;  
}
input{
    width:300px;
    margin-top:30px; 
    border-radius:5px;
    border:none; 
    
}
select{
    width:205px;
    margin-top:30px; 
    padding: 5px 0;
    border-radius:5px;
    border:none;
}
#submit{
    cursor:pointer;
    width:70px;
    padding:2px 0;
    background-color: red;
    margin-top:165px;
    border-radius: 50%;  
    opacity:0;
    animation:submit 3s 12s forwards;  
}
@keyframes submit{
    0%{
        width:0;
    }
    100%{
        width:120px;
        padding:5px;
    opacity:1;
    }
}
#eye_img{
    position:absolute;
    border-radius:50%;
    width:200px;
    height:230px;
    z-index: -1;
    margin-top:150px;
    opacity:0;
    animation:player1 3s 9s forwards;
   
}
marquee{
    color:red;
    font-size:70px;
    border:none;
}
#player1_name{ 
    animation:player1 3s forwards;
}
#player2_name{ 
    opacity:0;
    animation:player1 3s 3s forwards;
}
#rounds{
    opacity:0;
    animation:player1 3s 6s forwards;

}
@keyframes player1{
    0%{
        width:0;
        opacity:0;
    }
    100%{
        opacity:1;
        width:300px;
       padding:10px 0;
       font-size:30px;
    }
}