* {
    font-family: "Inter", sans-serif;
}

html {
    background-color: rgb(17, 75, 122);
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

main {
    height: 100%;
    width: 900px;
    margin: 0 auto;
}

nav {
    width: 100%;
    height: 50px;
    background-color: #101a29;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul a:hover {
    backdrop-filter: brightness(80%);
}

ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
}

ul li {
    float: left;
}

#roulette-above {
    height: 25vh;
    display: flex;
    flex-direction: column;
    margin: 1em;
}

#roulette-above img {
    margin: auto;
    max-width: 45vh;
}

#roulette-above p {
    margin: 0 auto;
    color: white;
    filter: opacity(40%);
}

#roulette-container {
    background-color: #fff;
    box-shadow: 0 0 1em #aaa;
    padding: 5vh 15vh;
    text-align: center;
}

.button {
    cursor: pointer;
    border: none;
    padding: 1em;
}

.button:hover {
    filter: brightness(120%);
    transition: 0.1s;
}

.button:active {
    background-color: white;
    box-shadow: 0 0 1em #fff;
}

#button-start {
    background-color: rgb(17, 75, 122);
    text-align: center;
    padding: 2em;
    width: 20vh;
    color: white;
    box-shadow: 0 0 1em #aaa;
}

.button-restart {
    background-color: rgb(194, 0, 0);
    color: white;
    margin: 1em;
}


.map-entry {
    background-color: #ddd;
    box-shadow: 0 0.5em 1em #999;
    margin: 2em 0;
    padding: 1em 1em;
    height: 22vh;
    display: flex;
    animation: 2s linear fadein;
}

.entry-left {
    height: 100%;
    position: relative;
}

.entry-right {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.entry-left img {
    aspect-ratio: 16 / 9;
    width: auto;
    height: 100%; 
    object-fit: cover;
    filter: blur(2px);
}


.entry-left h2, .entry-left p {
    position: absolute;
    text-overflow: "..";
    overflow-x: hidden;
    white-space: nowrap;
    text-shadow: black 0px 1px 5px;
    -webkit-text-stroke: black;
    -webkit-text-stroke-width: 3px;
    paint-order: stroke fill;
    color:white;
    margin: 0.5px;
    width: 95%;
    text-align: left;
    user-select: none;
    pointer-events: none    
}

.entry-left h2 {
    font-size: 3.5vh;
    bottom: 1vh;
    left: 1vh;
}

.entry-left p {
    font-size: 2vh;
    bottom: 5vh;
    left: 1.15vh;
    max-height: 2.5vh;

}

.entry-right {
    padding: 1em;
    height: 100%;
    flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto */
    min-width: 0;   /* let flexbox actually shrink below content size */
}

.entry-right input {
    padding: 1em 4px;
    font-size: 2vh;
}

.entry-buttons {
    display: flex;
}

.entry-buttons button {
    padding: 1em;
    width: 50%;
}

.entry-submit {
    background-color: green;
}

.entry-giveup {
    background-color: crimson;
}

.entry-skip {
    background-color: orange;
}

#increment {
    width: 200px;
    padding: 2em 1em;
    margin: 0 1em;
    background-color: #eee;
    border: none;
}


@media (width <= 900px) {
    main {
        margin: 0;
    }
    #roulette-container {
        padding: 0;
        width: 600px;
    }
    #roulette-above img {
        margin: 0;
        float: left;
    }
    #roulette-above {
        width: 600px;
    }
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}