@media (max-width: 768px) {
    .img-profile {
        margin-top: 45% !important;
        width: 60%;
        height: 60%;
    }


    .yuji_font {
        font-size: 1.8em;
    }

    .licorice_font {
        font-size: 1.2em;
    }

    .link-container {
        width: 100%;
    }

    .container-contact-links {
        margin-top: 18%;
    }

    .menu-background {
        left: 0;
        width: 90%;
        margin-left: 4.5%;
        margin-right: 4.5%;
    }
}

@media (min-width: 769px) {
    .img-profile {
        margin-top: 7% !important;
        width: 30%;
        height: 30%;
    }

    .yuji_font {
        font-size: 3em;
    }

    .licorice_font {
        font-size: 1.8em;
    }

    .menu-background {
        width: 80%;
        margin-left: unset;
        margin-right: unset;
    }
}

.img-profile {
    display: block;
    margin: auto;
}

.container-info {
    text-align: center;
    margin-top: 18px;
    margin-bottom: 12px;
}

.container-contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.link-container {
    padding: 8px;
    margin: 4px;
    border: 1px solid black;
    border-radius: .25rem;
}

.contact-link {
    color: forestgreen;
    padding: 8px;
    margin: 8px;
    text-decoration: none;
    font-family: cursive;
}

.yuji_font {
    font-family: 'Yuji Hentaigana Akebono', cursive;
}

.licorice_font {
    font-family: 'Licorice', cursive;
}

.bg-play-store {
    color: #084298;
    background-color: #cfe2ff;
    border-color: #b6d4fe;
}

.bg-link-in {
    color: #41464b;
    background-color: #e2e3e5;
    border-color: #d3d6d8;
}

.menu {
    width: 2.5em;
    z-index: 12;
}

.button-header {
    cursor: pointer;
    display: inline-flex;
    text-align: center;
    height: 2.5em;
    border-color: #d3d6d8;
    border-radius: .3em;
    background: border-box #e2e3e5;
}

a.button-header  {
    text-decoration: none;
}

.button-header > button {
    font-family: cursive;
    border-block-color: none;
}

.button-header-shadow {
    box-shadow: 0 0 .5em 0 #cfe2ff;
}

.menu img {
    text-align: center;
    font-size: medium;
    margin: auto;
}

.menu-btn-clicked {
    box-shadow: 0 0 2em 0.5em #cfe2ff;
}

.menu-background {
    margin-top: 0.3%;
    position: absolute;
    z-index: 10;
    height: 90%;
    background: border-box #12182080;
    border-radius: .5em;
}

.menu-items {
    background: radial-gradient(#cfe2ff, transparent);
    text-align: center;
    margin-bottom: 35vh;
    margin-top: 35vh;
    list-style-type: none;
}

.menu-item {
    border: none;
    background: none;
    width: 100%;
    font-size: xx-large;
    font-family: 'The Nautigal', cursive;
    cursor: pointer;
}

.menu-item:hover {
   text-shadow: 0 0 4px black;
}

.menu-items li {
    display: inline-block;
}

.menu-notice {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5vh;
    text-align: center;
    text-justify: inter-word;
    color: white;
    background: border-box #616366;
    border-bottom-left-radius: .3em;
    border-bottom-right-radius: .3em;
    font-family: 'Yuji Hentaigana Akebono', cursive;
    font-size: medium;
}

.menu-desktop-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #71787ea6;
    border: 1px solid #71787ea6;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.15s, 0.15s, 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-delay: 0s, 0s, 0s, 0s;
}

.menu-desktop-btn:hover {
   background-color: #acbac7a6;
}

.menu-desktop {
    display: none;
}

.menu-desktop-anim {
    display: block;
    position: absolute;
    margin-top: 0.3em;
    animation-duration: 3s;
    animation-name: desktop-menu-anim;
    animation-iteration-count: 1;
}

@keyframes desktop-menu-anim {
    from {
        display: none;
        opacity: 0.0;
    }

    to {
        display: block;
        opacity: 1.0;
    }
}