html, body {
    overflow-x: hidden;
}

body {
    font-family: monospace;
    margin: 0;
    position: relative;
}

a {
    text-decoration: none;
}

/* Navbar styles */
.navbar {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color: darkcyan;
    color: white;
    font-weight: bold;
    font-size: large;
}

.navbar>li {
    display: inline-block;
    padding: 15px;
}

.navbar>.title {
    user-select: none;
}

.button {
    cursor: pointer;
    color: white;
}

.button:hover {
    color: darkcyan;
    background-color: white;
}

.r-float {
    float: right;
}

.current-link {
    background-color: white;
    color: darkcyan;
}

/* Dropdown styles */
.dropdown {
    position: relative;
    cursor: pointer;
    --bg-color: rgb(1, 112, 112);
    --fg-color: white;
}

.dropdown-content {
    position: absolute;
    background-color: var(--bg-color);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-top: 5px;
    transform: translate(100%, 5px);
    transition: transform 0.4s ease-in-out;
}

.dropdown-content a {
    color: white;
    text-align: center;
    padding: 12px 16px;
    display: block;
}

.dropdown-content a:hover {
    background-color: var(--fg-color);
    color: var(--bg-color);
}

.dropdown.active .dropdown-content{
    display: block;
    transform: translate(-75%, 5px);
}

/* Hamburger menu styles and animations */
.bar-1, .bar-2, .bar-3 {
    width: 25px;
    height: 3px;
    background-color: white;
    transition: 0.4s;
}

.bar-2 {
    margin: 6px 0;
}

.active.bar-1 {
    transform: translate(0, 9px) rotate(-45deg);
}

.active.bar-2 {
    opacity: 0;
}

.active.bar-3 {
    transform: translate(0, -9px) rotate(45deg);
}

/*Error styles*/
div.msg {
    padding: 5px 0;
    text-align: center;
    font-size: large;
    color: white;
}

div.err {
    background-color: red;
}

div.success {
    background-color: rgb(3, 190, 3);
}