* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-size: 16px;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    touch-action: manipulation;

    overscroll-behavior: none;
}

html, body {
    background-color: #F0F0F0;
    /* color: #F2CB05; */
}

body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

header {
    margin: 16px;
    margin-bottom: 0;
    text-align: center;
    max-height: 10dvh;
}

header img {
    max-height: 10dvh;
}

.wrapper {
    flex: 100;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%
}

.navigator-wrapper {
    display: flex;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.navigator-wrapper .monme span {
    font-size: 48px;
}

.navigator-wrapper .back {
}

.button-wrapper {
    /* height: calc( 90dvh - 16px ); */ 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    flex: 100;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%
}

.button-wrapper > div {
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 128px;
}

.colour-a {
    background-image: linear-gradient(0deg, rgb(255, 40, 0) 90%, rgb(255, 209, 209) 10%);
    background-size: 32px 32px;
    color: white;
    text-shadow: black 0 0 16px;
}

.colour-b {
    background-image: linear-gradient(90deg, rgb(0, 65, 255) 90%, rgb(180, 235, 250) 10%);
    background-size: 32px 32px;
    color: white;
    text-shadow: black 0 0 16px;
}

.colour-c {
    background-image: linear-gradient(1deg, rgb(250, 245, 0) 90%, rgb(255, 255, 153) 10%);
    background-size: 32px 32px;

    background-image:  repeating-linear-gradient(45deg, rgb(250, 245, 0) 25%, transparent 25%, transparent 75%, rgb(250, 245, 0) 75%, rgb(250, 245, 0)), repeating-linear-gradient(45deg, rgb(250, 245, 0) 25%, rgb(255, 255, 153) 25%, rgb(255, 255, 153) 75%, rgb(250, 245, 0) 75%, rgb(250, 245, 0));
    background-position: 0 0, 20px 20px;
    background-size: 40px 40px;

    color: white;
    text-shadow: black 0 0 16px;
}

.colour-d {
    color: white;
    text-shadow: black 0 0 16px;
    background: repeating-linear-gradient( 45deg, rgb(53, 161, 107), rgb(53, 161, 107) 10px, rgb(135, 231, 176) 10px, rgb(135, 231, 176) 50px );
}

.register {
    display: flex;
    flex-direction: column;
}

.register label {
    margin-top: 16px;
}

.register select, .register input {
    padding: 8px;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;

    border: 1px solid #000000;
    box-shadow: 0 0 4px 0 #000000;
    margin: 8px 0;
    font-weight: bold;
    background-color: #FFFFFF;
    color: #000000;
    font-size: 20px;
}

.list {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.list a {
    padding: 8px;
    box-shadow: 0 0 4px 0 black;
    border-radius 4px;
    font-size: 36px;
}