@background-color: #17e0ff;
@text-color: rgb(255, 255, 255);


body {
    margin: 0;
    padding: 0;
    background-color: @background-color;
}

.header {
    text-align: center;
    background-color: darken(@background-color, 10%);

    h1 {
        background-color: darken(@background-color, 10%);
        margin: 0;
        padding: 20px;
    }

    .logo {
        width: 32px;
        height: 32px;
    }
}

.topnav {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    background-color: darken(@background-color, 10%);
    position: relative;
    overflow: hidden;

    a {
        display: block;
        color: black;
        padding: 16px;
        text-decoration: none;
        float: left;


        /* Active/current link */
        &.active {
            background-color: darken(@background-color,20%);
            color: white;
        }

        /* Links on mouse-over */
        &:hover:not(.active) {
            background-color: #555;
            color: white;
        }


        &.icon {
            background-color: darken(@background-color,25%);
            display: none;
            position: absolute;
            right: 0;
            top: 0;
            &:hover {
                background-color: darken(@background-color,30%);
                color: white;
            }
        }
    }
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky+.content {
    padding-top: 50px;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
    margin-left: 0;
    padding: 1px 16px;
    height: 1000px;
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
    .topnav {
        a {
            text-align: center;
            float: none;

            &.icon {
                display: block;
            }
        }

        #myLinks {
            display: none;
        }
    }
}