@charset "UTF-8";

html {font-family: "source-han-sans-japanese", "Playball", sans-serif;
font-weight: 400;
font-style: normal;
}
.game {
position: relative;
font-size: 1.25rem;
color: #111;
min-height: 40vh;
background-image: url("../images/最初背景.png");
background-size: cover;
background-position: center;
background-repeat: repeat;
}
.game::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 0;
}
.game > * {
position: relative;
z-index: 1;
}

.problems {
position: relative;
background-image: url("../images/moskau.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.problems::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 0;
}
.problems > * {
position: relative;
z-index: 1;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.results {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.3rem;
line-height: 0.5rem;
position: relative;
background-image: url("../images/moskau.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.results::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 0;
}
.results > * {
position: relative;
z-index: 1;
}
.iwai {
font-family: "Playball", "source-han-sans-japanese", sans-serif;
font-size: 1.75rem;
}
fieldset{
border: none;
}
legend {
font-size: 1.125rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
button {
font-family: inherit;
padding: 0.6rem 1rem;
border: 2px solid #111;
color: #eee;
background-color: #3838ff;
}
button:hover {
color: #4a4f7a;
background-color: #abe1fa;
}
button:active {
transform: translateY(1px);
background-color: #8bc1da;
}
button:focus-visible {
outline: 3px solid #111;
outline-offset: 2px;
}
.send {
color: #222;
background-color: #ffc5c5;
border-radius: 0.5rem;
}
.send:hover {
background-color: #eaa9a9;
}
.send:active {
transform: translateY(1px);
}
.send:focus-visible {
outline: 3px solid #111;
outline-offset: 2px;
}

.quiz-restart {
color: #222;
background-color: #ffc5c5;
border-radius: 0.5rem;
}
.quiz-restart:hover {
background-color: #eaa9a9;
}
.quiz-restart:active {
transform: translateY(1px);
}
.quiz-restart:focus-visible {
outline: 3px solid #111;
outline-offset: 2px;
}
.worksbutton{
font-weight: 700;
  letter-spacing: 0.05em;
}
.diffi-set > div {
display: flex;
flex-direction: column;
min-height: 23px;
}
.works {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.works-sub {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.settings{
position: relative;
font-size: 1rem;
color:#050505;
background-image: url("../images/moskau.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.settings::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 0;
}
.settings > * {
position: relative;
z-index: 1;
}
.settings summary{
font-size: 0.9375rem;
}
.quiz-pool {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 0;
list-style: none;
padding-left: 0;
background-color: #3838ff;
}
.datas {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
list-style: none;
padding-left: 0;
}
.datas div button {
  text-align: left;
}
.right {
display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.control{
padding-left: 0.5rem;
width: 300px;
font-size: 0.625rem;
}
.right .datas {
margin-top: 2.5rem;
}
.is-active {
color: #4a4f7a;
background-color: #abe1fa;
}
.is-hidden {
display: none;
}
.supecially-hidden {
visibility: hidden;
pointer-events: none;
}