/* Base Tags */
html {
    min-height: 100%;
}

body {
    min-height: 100%;
    overflow-y: scroll;
    background: linear-gradient(128deg, hsl(221, 40%, 90%), hsl(278, 40%, 90%));
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, 'Noto Sans JP', 'Yu Gothic', sans-serif;
}

.wrapper {
    position: relative;
    margin: 0 auto;
    padding-top: 100px;
    max-width: 780px;
}

header {
    position: fixed;
    top: 16px;
    left: 10px;
    right: 10px;
    z-index: 100;
    max-width: 780px;
    margin: 0 auto;
    /* margin-bottom: 12px; */
    padding: 12px;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 12px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .1);
    backdrop-filter: blur(4px);
    transition: ease-in-out .2s;
}

header a.title {
    color: rgb(116, 156, 250);
    text-decoration: none;
    white-space: nowrap;
    transition: color .12s ease-in-out;
}

header a.title:hover {
    color: rgb(76, 115, 206);
}

.modal-open header {
    top: -62px;
}

footer {
    margin-top: 40px;
    padding-bottom: 100px;
}

footer .copyright {
    text-align: center;
}

.main {
    margin: 16px;
}

h1 {
    margin: 0;
    margin-left: 18px;
    font-size: 24px;
}

.birth-year {
    color: rgb(174, 174, 174);
    transition: color .2s;
}

.birthday-field:hover .birth-year {
    color: currentColor;
}

.link-icon {
    font-size: 12px;
}

.box {
    border-radius: 12px;
    box-sizing: border-box;
    padding: 28px;
    background-color: rgba(255, 255, 255, .8);
}

.thumbnail {
    border-radius: 6px;
    background-color: rgba(255, 255, 255, .8);
    outline: solid 3px rgba(255, 255, 255, .5);
}

.thumbnail button {
    outline: none;
    border: none;
    border-radius: 6px;
    vertical-align: bottom;
}

.thumbnail button:focus {
    outline: solid 3px rgba(78, 131, 229, .5);
}

.thumbnail img {
    border-radius: 6px;
}


@media (min-width: 992px) {
    .ratio-sm-4x3 {
        --bs-aspect-ratio: calc(3 / 4 * 100%);
    }

    .ratio-sm-16x9 {
        --bs-aspect-ratio: calc(9 / 16 * 100%);
    }
}

.checklist {
    list-style: none;
    padding-left: 20px;
}

.checklist li {
    padding-left: 4px;
}

.checklist li::marker {
    font-family: bootstrap-icons !important;
    content: "\F584";
}

.checklist li.checked::marker {
    content: "\F26D";
}

.links {
    margin: 5px auto;
    padding: 0 5px;
    display: flex;
    justify-content: center;
    gap: 5px;
    list-style: none;
    text-align: center;
}

.sawaki-btn {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background-color: transparent;
    font-size: 18px;
    text-decoration: underline;
    border: dotted 1px rgba(0, 0, 0, .3);
    border-radius: 8px;
    transition: background-color .12s;
}

.sawaki-btn:hover {
    background-color: rgba(0, 0, 0, .2);
}

.links li {
    display: flex;
    justify-content: center;
    align-items: center;
}

.links li.unlock-ramen {
    display: none;
}

.links li a,
.links li button {
    display: block;
    padding: 0 12px;
    height: 42px;
    line-height: 42px;
    background: rgba(255, 255, 255, .3);
    color: #333;
    border: solid 1px rgba(0, 0, 0, .3);
    text-decoration: none;
    border-radius: 12px;
    transition: background-color .12s ease-in-out;
}

.links li a:hover,
.links li button:hover {
    background: rgba(193, 193, 193, .5);
}

.link li a .bi {
    font-size: 28px;
}

.ramen-vertical-images {
    position: relative;
    overflow: hidden;
}

.ramen-vertical-images .scroller {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
    overflow-x: scroll;
}

.ramen-vertical-images .row {
    width: 800px;
}

.ramen-vertical-images .scrollable {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    background: linear-gradient(to right, transparent, rgba(250, 250, 250, .8));
    pointer-events: none;
    transition: right .24s ease-in-out;
}

.ramen-vertical-images[data-scrolled="true"] .scrollable {
    right: -60px;
}

.ramen-vertical-images .scrollable .icon {
    display: block;
    margin-left: 0;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgba(51, 51, 51, 0.5);
    color: rgb(255, 255, 255);
    animation: 2s ease-in-out 1s infinite right-bounce;
    transition: .2s;
}

.ramen-vertical-images .scrollable .icon .bi {
    width: 28px;
    height: 28px;
    font-size: 28px;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

.ratio-3x4 {
    --bs-aspect-ratio: calc(4 / 3 * 100%);
}

/* Perfectly CSS */
.perfectly-css {
    padding: 0 12px 9px;
    width: 100px;
    /* letter-spacing: 8px; */
    border: solid 2px #333;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 24px;
    animation: 4s ease-in-out 1s infinite perfectly-css;
    animation-delay: 2s;

}

@keyframes perfectly-css {

    0%,
    100% {
        letter-spacing: normal;
    }

    10% {
        letter-spacing: 8px;
    }

    11% {
        letter-spacing: normal;
    }

    28% {
        width: 100px;
    }

    40% {
        width: auto;
        letter-spacing: 2px;
    }

    41% {
        width: 100px;
        letter-spacing: normal;
    }
}

/* Responsive */
@media screen and (min-width: 576px) {
    .ramen-vertical-images {
        margin-bottom: 0;
    }

    .ramen-vertical-images .scroller {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .ramen-vertical-images .row {
        width: auto;
    }

    .ramen-vertical-images .scrollable {
        display: none;
    }
}

/* Masu */
.pinocchiop-masu {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 100px;
    animation: 2s ease-in-out 1s infinite masu-bounce;
}

.ztmy-card {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 100px;
    animation: 2s ease-in-out 1s infinite masu-bounce;
    animation-delay: .5s;
}

/* Ramen animation */
.ramen {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 130px;
    height: 300px;
    opacity: 0.8;
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, .2));
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.ramen .donburi {
    position: absolute;
    right: 28px;
    bottom: 0;
    width: 100px;
    background-color: transparent;
    padding: 0;
    border: none;
    outline: none;
    pointer-events: all;
    cursor: pointer;
    transition: all .2s;
}

.ramen .donburi img {
    pointer-events: none;
}

.ramen .men {
    position: absolute;
    right: 0;
    bottom: -140px;
    width: 100px;
    animation: 2s ease-in-out 1s infinite ramen-bounce;
    transition: all .2s;
}


/* Ramen overflow */
.ramen[data-overflow] {
    animation: .2s ease-in-out 1s infinite ramen-overflow;
}

.ramen[data-overflow] .donburi {
    pointer-events: none;
}

.ramen[data-overflow] .men {
    animation-name: ramen-bounce-overflowed;
}

/* Ramen infected */
body.ramen-infected {
    background-image: url(images/20240423_125856.jpg);
    background-position: center;
    background-size: cover;
}

body.ramen-infected .page-title {
    color: white;
    text-shadow: 1px 1px 4px black;
}

body.ramen-infected .links li.unlock-ramen {
    display: block;
}


/* Scrollbar */
:not(.scrollbar-default)::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: #f0f3f8;
}

:not(.scrollbar-default)::-webkit-scrollbar-track {
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
    background-color: #f0f3f8;
}

:not(.scrollbar-default)::-webkit-scrollbar-track-piece {
    background-color: #f0f3f8;
}

:not(.scrollbar-default)::-webkit-scrollbar-thumb {
    /* background-color: #77a7ff; */
    background: linear-gradient(110deg, #8e9fff, #a573f1);
    border: solid 2px #f0f3f8;
    border-radius: 10px;
}

:not(.scrollbar-default)::-webkit-scrollbar-corner {
    background-color: #b2b2b2;
    border: solid 2px #f0f3f8;
    border-radius: 10px;
}


/* Keyframes */
@keyframes masu-bounce {
    0% {
        transform: translateY(0);

    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes right-bounce {
    0% {
        transform: translateX(0);

    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes ramen-overflow {
    0% {
        transform: translate(0, -20px);

    }

    50% {
        transform: translate(-80px, -80px) rotate(-10deg) scale(1.2);
    }

    100% {
        transform: translate(0, -20px);
    }
}

@keyframes ramen-bounce {
    0% {
        bottom: -140px;
    }

    50% {
        bottom: -50px;
    }

    100% {
        bottom: -140px;
    }
}

@keyframes ramen-bounce-overflowed {
    0% {
        bottom: -140px;
    }

    50% {
        bottom: 0px;
    }

    100% {
        bottom: -140px;
    }
}