*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
/* ↑ reset css from https://piccalil.li/blog/a-more-modern-css-reset/ */

@font-face {
    font-family: "Genkai Mincho";
    src: url("./Genkai-Mincho-font/genkai-mincho.ttf") format("truetype");
}
@font-face {
    font-family: "onryou";
    src: url("./onryou-font/onryou.TTF") format(truetype);
}

html, body {
    font-family: 'Genkai Mincho','serif';
    color: red;
    background-color: rgb(14, 13, 13);
    background-image: url("./img/human.png");
    background-repeat: no-repeat;
    /* icecreamで代用中 */
    background-position: right top;
}

header {
    background-color: rgb(3, 1, 26);
    color: white;
    padding: 5% 8%;
    text-align: end;
}
header > p {
    font-family: 'onryou','serif';
    color: rgb(214, 214, 214);
}

form {
    width: 100%;
}
.button {
    display: block;
    margin: auto;
    width: 25%;
    padding: 1%;
    margin: auto;
}
input {
    margin: 3%;
    padding: 0.2%
}
.ynbutton {
    width: 100%;
    text-align: center;
    margin: auto;
}
.ynbutton > button {
    display: inline-block;
}

section {
    width: 100%;
    max-width: 500px;
    padding: 20% 3%;
    margin: 5% auto;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}
section p {
    margin: 5%
}
#section1 p {
    font-family: 'onryou', 'serif';
    font-size: x-small;
    margin:0; padding: 0;
    text-align: end;
}

#janken div {
    display: inline-block;
    width:100%;
    text-align: center;
}
#janken button {
    width: 30%;
    aspect-ratio: 1/1;
    border: 0;
    background-size: contain;
    background-repeat: none;
}
#janken button:hover {
    opacity: 0.7;
}
#janken #gu {
    background-image: url("./img/gu.jpg");
}
#janken #tyoki {
    background-image: url("./img/tyoki.jpg");
}
#janken #pa {
    background-image: url("./img/pa.jpg");
}

#winlose {
    font-family: 'onryou', 'Genkai Mincho', 'serif';
    font-size: x-large;
}

#wrap2 {
    margin: 10% 5%;
}

footer {
    text-align: end;
    font-family: 'onryou', 'serif';
    font-size: smaller;
    background-color: rgb(3, 1, 26);
    padding: 1% 3%;
}