.clickable {
    cursor: hand;
    cursor: pointer;
}

.curvedLeftAngles {
    border-radius: 10px 0px 0px 10px;
}

.navbar.coloring {
    background-color: dimgray;
    color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media (hover: hover) {
    .navbar {
        z-index: 50;
        height: 80px;
        justify-content: flex-end;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        position: fixed;
        right: 0;
        top: 0px;
    }
    .navbar .button {
        position: relative;
        z-index: 50;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 200px;
        height: 100%;
        transition: color 500ms;
    }
    .navbarText {
        font-size: 20px;
    }
    .leftBracketNavbar {
        flex-direction: row;
    }
    .navbar .button:before {
        content: "";
        position: absolute;
        width: 60%;
        height: 5px;
        bottom: 12px;
        left: 20%;
        background: linear-gradient(45deg, rgba(0, 200, 0, 1) 0%, rgba(0, 100, 254, 1) 100%);
        visibility: hidden;
        transform: scaleX(0);
        transition: .25s linear;
        border-radius: 10px;
    }
    .navbar .button:hover:before {
        visibility: visible;
        transform: scaleX(1);
    }
}

@media (hover: none) {
    @media (orientation: portrait) {
        body {
            margin-top: 80px;
        }
        .navbar .button {
            height: 80px;
        }
        .navbarText {
            font-size: 5vw;
        }
        .topbar {
            height: 80px;
        }
        .topbar .homeButton {
            height: 80px;
        }
    }
    @media (orientation: landscape) {
        body {
            margin-top: 40px;
        }
        .navbar .button {
            height: 40px;
        }
        .navbarText {
            font-size: 2vw;
        }
        .topbar {
            height: 40px;
        }
        .topbar .homeButton {
            height: 40px;
        }
    }
    .navbar {
        position: absolute;
        z-index: 50;
        justify-content: flex-end;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        position: fixed;
        right: 0px;
        top: 0px;
        width: 100%;
    }
    .navbar .button {
        z-index: 50;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
    }
    .topbar {
        background-color: lightgray;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .topbar .homeButton {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 30px;
    }
    .topbar .logo {
        height: 80%;
    }
    .topbar .logoDitta {
        height: 50%;
        margin-left: 40px;
    }
    .hamIcon {
        display: inline-block;
        cursor: pointer;
        position: absolute;
        right: 30px;
    }
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }
    .change .bar1 {
        transform: rotate(-45deg) translate(-8px, 6px);
    }
    .change .bar2 {
        opacity: 0;
    }
    .change .bar3 {
        transform: rotate(45deg) translate(-8px, -8px);
    }
    .hidden {
        display: none;
    }
    .hideWithTopbar {
        display: none;
    }
}

.menuHint {
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
}