body{
    background-image: url(robot.jpeg);
    background-repeat: no-repeat;
    background-size: cover;

}

.header{
    display: flex;
    justify-content: center;
}

#heading{
    color: black;
    font-size: 90px;
    margin-top: 0;
    font-family: "Codystar", sans-serif;
    margin-bottom: auto;
    

}

.name{
    display: flex;
    justify-self:center;
    height: 50px;
}

p{
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    color: rgb(183, 244, 14);
    font-weight: 700;
}

.container{
    background-color: rgba(253, 253, 253, 0.9);
    width: 30%;
    padding:20px;
    border: 6px solid #998d8d;
    display: flex;
    justify-self: center;
    flex-direction: column;
    justify-items: center;
    border-image: linear-gradient(to bottom, turquoise, greenyellow) 1 0;
    margin-top: 40px;
}

h2{
    font-family: "Roboto", sans-serif;
    font-size: 22px;
}

h3{
    font-family: "Roboto", sans-serif;
    opacity: 70%;
}

#guess {
    padding:10px;
    /* width: 110px; */
    font-family: "Roboto", sans-serif;
    font-size: 15px; 
    justify-self: center;
}

#btn{
    background-color: cadetblue;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
    color: white;
    margin-top: 20px;
    padding:20px;
    border-radius:20px;
    border:none;
}

@media all and (max-width:1055px){
    #heading{
        font-size: 70px;
    }
}

@media all and (max-width: 824px){
    #heading{
        font-size: 50px;
    }
    h2{
        font-size: 15px;
    }

    h3{
        font-size: 10px;
    }
}

@media all and (max-width: 593px){
    #heading{
        font-size: 30px;
    }
    h2{
        font-size: 15px;
    }

    h3{
        font-size: 10px;
    }
    .container {
        width: 40%;
    }
}