/*using an external font*/
@font-face {
    font-family: "rainyhearts";
    src:
        local("rainyhearts"),
        url("/assets/rainyhearts.ttf");
        font-weight: normal;
        font-style: normal;
}

/*scrolling enabled*/
html{
    overflow-y: scroll;
}

/*body styling*/
body {
    background-color:#696880;
    font-family: "rainyhearts";
    margin: 0;
    position: absolute;
    color: white;
    padding-top: 50px;
}

/*menu bar styling*/
ul {
    position: fixed;
    top: 0;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 10px solid #333 ;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    border: 5px solid #333;
    font-size: 20px;
}

li a:hover {
    background-color: #ffc93c;
}

.active {
    background-color:#37355d;
    border: 5px solid #37355d;
}

/*class for image position*/
.positioned-image {
    position: absolute;
    top: 692px; 
    left: 80px; 
    width: 30px; 
    height: 30px;
}

/*adjusting position of the game*/
#animal-shelter-game {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
}