html {
    width:100%;
    scrollbar-width:thin;
    overflow-x:clip;
    background:var(--color-white);
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    width:100%;
    overflow-x:clip;
    background:none;
    container-type: inline-size;
}

#wall {
    background-color:#99f0ff;
    background-image:
    radial-gradient(at 52% 67%, hsla(219,98%,76%,1) 0px, transparent 50%),
    radial-gradient(at 91% 20%, hsla(28,89%,78%,1) 0px, transparent 50%),
    radial-gradient(at 34% 47%, hsla(144,63%,79%,1) 0px, transparent 50%),
    radial-gradient(at 49% 2%, hsla(29,96%,65%,1) 0px, transparent 50%);
    position:fixed;
    top:0;
    left:0;
    width:calc(100% - (var(--padding) * 2));
    height:calc(100% - (var(--padding) * 2));
    margin:var(--padding);
    border-radius:var(--radius);
    display:flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap:var(--gap);
    padding:0 var(--padding);
}

main {
    width:50cqw;
    min-width:400px;
    min-height:calc(100% - (var(--padding) * 2));
    margin:calc(var(--padding) * 2) auto;
    display:flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    border-radius:var(--radius);
    overflow-x: clip;
    background:var(--color-super-white);
    box-shadow: var(--shadow);
    flex:1;
    container-type: inline-size;
}
body:not(#index) main {
    margin-top:100px;
    border-top:solid 100px var(--color-white);
}
main > :first-child {
    padding-top:0;
}

main header {
    padding:0 var(--padding) calc(var(--padding) * 2) var(--padding);
    background:var(--color-white);
}

#question-form textarea {
    height:10em;
}

.width-limiter {
    width:100%;
}
.medium {
    max-width:900px;
}
.narrow {
    max-width:600px;
}

.color-blue   { color:var(--color-blue) !important; }
.color-red    { color:var(--color-red) !important; }
.color-green  { color:var(--color-green) !important; }
.color-pink   { color:var(--color-pink) !important; }
.color-orange { color:var(--color-orange) !important; }
.color-yellow { color:var(--color-yellow) !important; }
.color-gray   { color:var(--color-gray) !important; }
.color-white  { color:var(--color-white) !important; }

.bg-blue   { background:var(--color-blue) !important; }
.bg-red    { background:var(--color-red) !important; }
.bg-green  { background:var(--color-green) !important; }
.bg-pink   { background:var(--color-pink) !important; }
.bg-orange { background:var(--color-orange) !important; }
.bg-yellow { background:var(--color-yellow) !important; }
.bg-gray   { background:var(--color-gray) !important; }
.bg-white  { background:var(--color-white) !important; }


/* Button */
.buttons {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:20px;
    padding:60px 0;
}
.button {
    gap:10px;
    padding:10px;
    background:var(--color-blue);
}
.button i {
    font-size:1.6em;
}
.button:is(.bg-blue, .bg-red, .bg-green, .bg-pink, .bg-orange, .bg-gray) {
    color:var(--color-white) !important;
}
.backlink {
    margin-inline:var(--padding);
    padding:0 0 var(--padding) 0;
}


.text-link a {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:calc(var(--gap) / 2);
    font-weight:bold;
    border:solid 1px var(--color-black);
    padding:5px 10px;
    border-radius:100px;
    width:fit-content;
    color:var(--color-black);
}
.text-link i {
    font-size:1.4em;
    color:var(--color-gray);
}
.text-link a:hover {
    background:var(--color-white);
    color:var(--color-black);
}


main h1 {
    text-align:center;
    line-height:1.2;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
main h1 > strong {
    font-size:1.4em;
}
main h1 > span {
    font-size:0.6em;
    font-weight:normal;
    padding-left:40px;
}

main em {
    font-style:normal;
    font-weight:bold;
}


.nothing {
    padding:40px 5px;
    font-weight:bold;
    text-align:center;
    border:solid 1px var(--color-text);
    margin:40px 0;
}


/* Dialog */
main dialog {
    scrollbar-width: none;
    margin-top:0;
}
main dialog h2 {
    font-size:1.6em;
}


.caution {
    border:solid 2px var(--color-red);
    padding:var(--padding);
    color:var(--color-red);
    border-radius:var(--radius);
    background:var(--color-white);
    font-weight:bold;
}



/* Media Query */
@media ( width <= 920px ) {
    #wall {
        margin:0;
        border-radius:0;
        width:100%;
        height:100%;
    }
    body {
        min-height:auto;
    }
    main {
        width:calc(100% - (var(--padding) * 2));
        max-width:600px;
        overflow-y: visible;
        min-width:auto;
        min-height:auto;
        margin:var(--padding) auto;
    }
}
@media ( width <= 720px ){

}
@media ( width <= 560px ){

}