/*Remove default browser default*/
* {
    padding: 0;
    margin: 0;
}


/*Body format*/
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}


/*Main format*/
main {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*Running game interface*/
#runner_game {
    width: 100%;
    max-width: 500px;
    height: 40vw; 
    max-height: 200px;
    position: relative;
    border-radius: 8px;
    border: 5px solid #333;
    background-image: url(../img/background.png);
    background-size: cover;
    overflow: hidden;
}


/*Carrot*/
#runner {
    width: 4%;
    height: 25%;
    background-image: url(../img/carrot.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 10%;
}


/*Obstacle*/
#obstacle {
    width: 5%;
    height: 15%;
    background-image: url(../img/blender.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
}


/*Mute and play background section format*/
#options {
    width: 100%;
    max-width: 500px;
    margin-bottom: 2rem;
    background-color: #fff;
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: 5px 10px 5px #888888;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/*Mute and play fomat*/
#options a{
    color: #555;
    font-size: 1rem;
}

/*Hover effect for mute and play*/
#options a:hover {
    color: #007bff;
}


/* For tablets */
@media (max-width: 767px) {
    /* reduces size */
    #score {
        flex-direction: column;
        align-items: stretch;
    }

    /* reduces size */
    #rules {
        flex-direction: column; 
        align-items: stretch;
    }

    /* Changes size */
    #rules h1 {
        font-size: 1.3rem; 
    }

    /* Changes size */
    #rules p {
        font-size: 0.9rem;
    }
}

/* For phones */
@media (max-width: 480px) {
    /* Changes size */
    #runner {
        width: 8%; 
        height: 35%;
    }

    /* Changes size */
    #obstacle {
        width: 10%;
        height: 20%;
    }

    /* Changes size */
    #options a {
        font-size: 1.2rem;
        padding: 0.5rem;
    }

    /* Changes size */
    #score h1 {
        font-size: 1.2rem;
    }

    /* Changes size */
    #score p {
        font-size: 0.8rem;
    }
}