body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: monospace;
}

#home-page {
    width: 100%;
    min-width: 21%;
    max-width: 1500px;
    margin: 5px auto;
    min-height: 100%;
    background-color: rgba(167, 198, 245, 0.616);
}

/*links*/
a:active {
    color: cornsilk;
}

a:link {
    color: red;
}

a:visited {
    color: rgb(255, 102, 0);
}

ul a:hover {
    background-color: rgba(96, 238, 108, 0.568);
    padding: 6px;
    border-radius: 8px;
    font-size: 1rem;
}

a:focus {
    color: darkgreen;
}

a {
    text-decoration: none;
}

/*buttons*/
button {
    height: 30px;
    background-color: rgba(153, 235, 72, 0.78);
    border-radius: 20px;
}

/*nav*/
nav {
    width: 100%;
    height: 80px;
    background-color: rgba(233, 246, 55, 0.883);
    line-height: 50px;
    border-radius: 20px;
}

nav ul li {
    display: inline-block;
    margin-right: 2rem;

}

nav ul {
    float: right;
    margin: 0;
}

/* Hide the link that should open and close the topnav on large screens */
.topnav .icon {
    display: none;
}

/*features*/
#features {
    width: 42%;
    margin: 20px auto;
    background: url('./img/el5.webp') no-repeat top left;
    border: 5px solid rgba(15, 119, 5, 0.931);
    padding: 10px;

}

#features button {
    margin: 10px 10px;
}

/*courses*/
#courses {
    margin: 0;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    text-align: center;
}

#courses button {
    margin: 20px 0;
}

#courses img {
    width: 90%;
    height: 120px;
    border: 5px solid brown;
}

/*footer*/
footer {
    text-align: center;
    line-height: 50px;
    background-color: rgba(209, 39, 39, 0.767);
    height: 50px;
    border-radius: 20px;
}

/*media queries*/
@media only screen and (max-width:900px) {

    /* When the screen is less than 900 pixels wide, hide all links, except for the last one. Show the link that contains should open and close the topnav (.icon) */
    .topnav li:not(:last-child) {
        display: none;
    }

    .topnav .icon {
        float: right;
        display: block;
    }

    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    .topnav.responsive li {
        background-color: rgba(233, 246, 55, 0.883);
        float: none;
        display: block;
        text-align: center;
    }

    #features {
        width: 90%;
        margin: 20px auto;
        background: url('./img/el5.webp') repeat top right;
        border: 5px solid rgba(15, 119, 5, 0.931);
        padding: 10px;
    }

    #courses {
        margin: 0 auto;
        display: grid;
        grid-template-columns: 100%;
        text-align: center;
    }

    #courses img {
        width: 90%;
        height: 230px;
        border: 5px solid brown;

    }
}