body {
height: 100vh;
background-position: center;
background-image: url(wallpaper2.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#item_container, #user_input_container {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column wrap;
}

#itemframe {
margin-top: 1rem;
width: auto;
height: auto;
max-width: 50%;
max-height: 300px;
box-shadow: 0px 0px 30px black;
border-radius: 5px;
}

input {
margin-top: 1rem;
padding: 0.2rem;
width: 15rem;
box-shadow: 0px 0px 30px black;
}

#user_select_container {
border: 2px solid black;
border-radius: 10px;
background-color: white;
width: 15rem;
max-height: 19rem;
overflow: scroll;
position: absolute;
transform: translateY(50%) translateY(2rem);
box-shadow: 0px 0px 30px black;
}

#user_select_container.invisible {
display: none;
}

.item_selector {
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition-property: background-color color;
transition-duration: 0.1s;
}

.item_selector.invisible {
display: none;
}

.item_selector:hover {
background-color: #333;
color: white;
}

#previous_attempts {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column nowrap;
margin-top: 1rem;
}

.attempt {
height: 3rem;
width: 20rem;
display: flex;
align-items: center;
justify-content: center;
background-color: grey;
margin-bottom: 1rem;
border-radius: 10px;
font-size: 1.2rem;
}

.attempt.successful {
background-color: #7BFF7B;
}

.attempt.wrong {
background-color: #FF7481;
}