* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@view-transition {navigation: auto;}

body {
  margin: auto;
  max-width: 20lh;
  padding: .5lh;
  font-family: system-ui, sans-serif;
  font-size: 1.1rem;
  line-height: 2lh;
  color: #080a0d;
  -webkit-font-smoothing: antialiased;
  background-color: #f0f0f2;
}

.index {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
grid-gap: 1lh;
}

.index a {
display: flex;
flex-direction: column;
padding: 5px;
border-radius: 5px;
font-size: 1rem;
}

.index img {
    width: 100%;
    height: 5lh;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #e3e4e6;
}

a {
  color: unset;
  text-decoration: none;
  border-bottom: none;
}

header {
  font-weight: 500;
  margin-top: .5lh;
}

main {
  margin-trim: block-end;
  padding: 1lh 0;
  text-wrap: pretty;
}

hr {
  border: 1px solid #e3e4e6;
  border-radius: 5px;
}

footer {
  margin-trim: block-end;
  font-size: .9rem;
}

footer p {
  margin-block: .5lh;
}



noscript {
    background-color: #BD0404;
    display: flex;
    padding: 1em;
    margin: 0 0 3em;
}

#game img {
max-width:100%;
border-radius: 5px;
max-height: 50vh;
margin: 1lh auto;
display: flex;
border: 1px solid #e3e4e6;
}

input {
    width: 90%;
    padding: .71em 1em;
    border-radius: 5px;
    border: 1px solid #dde3ec;
    font-size: 1em;
    margin: 1em auto;
    display: block
}

.buttons {
align-content: center;
display: flex;
justify-content: center;
align-items: center;
gap: .3lh;}

button {
width: 8em;
font-size: 1em;
border-radius: .5em;
padding: .7em;
border: none;
font-weight: 500;
color: #fff;
cursor: pointer;
margin: .2lh;
}

button#submitGuess {
    background-color: #2e943a;
}

button#hintButton {
    background-color: #0949ac;
}

button#skipButton, button#showAnswers {
    background-color: #a30d30;
}

button#showAnswers {
margin: 0lh auto;
display: none;
}

#answersList {
margin: 2lh 0;
grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
grid-gap: 2lh;
}

#answersList div {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
flex-direction: column;
}

#answersList img {
width: 25vh;
height: 100%;
border-radius: 5px;
border: 1px solid #e3e4e6;
}

#playmore {display:none;}
#score {display:none;}

#finalScore {
    text-align: center;
    font-weight: 700;
    font-size: 1.5em;
    margin: 1em 0
}

#message {
color: #fff;
text-align: center;

font-family: ui-monospace, monospace;
font-size: .9rem;
position: absolute;
top: 0px;
position: fixed;
width: 100%;
left: 0px;
padding: .5lh;
}

#message:empty {
    visibility: hidden
}