@font-face {
        font-family: Minecraft;
        src: url('MinecraftFont.otf');
    }

    @font-face {
        font-family: Minecraft;
        font-weight: bold;
        src: url('MinecraftBold.otf');
    }

    .menu-container {
        position: relative;
        display: flex;
        align-items: center;
        padding: 20px;
        margin-bottom: 20px;
        color: #CDCDCD;
        background: #232323;
        z-index: 1;
        user-select: none;
        -webkit-user-select: none;
    }

    .menu-logo {
        line-height: 0;
        margin: 0 20px;
    }

    .menu-logo img {
        max-width: 250px;
        max-height: 40px;
        flex-shrink: 0;
    }

    .menu-container a {
        color: #232323;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .menu-container a:hover {
        color: #00C6A7;
    }

    .menu-container input {
        display: block;
        width: 35px;
        height: 25px;
        position: absolute;
        cursor: pointer;
        opacity: 0;
        z-index: 2;
        -webkit-touch-callout: none;
    }

    /* Burger Menu */

    .menu-container span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #CDCDCD;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
    }

    .menu-container span:first-child {
        transform-origin: 0% 0%;
    }

    .menu-container span:nth-child(3) {
        transform-origin: 0% 100%;
    }

    .menu-container input:checked~span {
        opacity: 1;
        transform: rotate(45deg) translate(3px, -1px);
        background: #232323;
    }

    .menu-container input:checked~span:nth-child(4) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    .menu-container input:checked~span:nth-child(3) {
        transform: rotate(-45deg) translate(-5px, 11px);
    }

    .menu ul {
        list-style: none;
    }

    .menu li {
        padding: 10px 0;
        font-size: 22px;
    }

    @media only screen and (max-width: 767px) {
        .menu-container {
            flex-direction: column;
            align-items: flex-end;
        }

        .menu-logo {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        .menu-logo img {
            max-height: 30px;
        }

        .menu {
            position: absolute;
            width: 300px;
            top: 0;
            right: -300px;
            margin: -20px;
            padding: 75px 50px 50px;
            background: #CDCDCD;
            -webkit-font-smoothing: antialiased;
            transform-origin: 0% 0%;
            transform: translateX(0%);
            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        }

        .menu-container input:checked~.menu {
            transform: translateX(-100%);
        }
    }

    @media only screen and (min-width: 768px) {
        .menu-container {
            width: 100%;
        }

        .menu-container a {
            color: #CDCDCD;
        }

        .menu-container input {
            display: none;
        }

        /* Burger Menu */
        .menu-container span {
            display: none;
        }

        .menu {
            width: 100%;
            position: relative;
            display: flex;
            justify-content: space-between;
        }

        .menu ul {
            display: flex;
        }

        .menu li {
            padding: 0 20px;
        }
    }