body {
    background-color: #333333;  
    margin: 0px;
}

.helptext {
    color: rgb(250, 240, 145);
    font-family:system-ui,'Segoe UI';
}

.titletext {
    color: rgb(160, 190, 90);
    font-family:system-ui,'Segoe UI';
}

.centredtext {
    text-align: center;
}

.guesslist {
    display: flex;
    flex-direction: column;
}

.columntitles {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.columntitle {
    color: rgb(160, 190, 90);
    font-family:system-ui,'Segoe UI';
    font-weight: bold;
    flex: 1 1 0%;
    text-align: center;
    margin-bottom: 5px;
}

.guessrow {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.guessresult {
    color: rgb(250, 235, 140);
    font-family:system-ui,'Segoe UI';
    flex: 1 1 0%;
    text-align: center;
    font-size: 20px;
    text-transform: capitalize;
    white-space: nowrap;
}

.guesslist {
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 2fr 1fr repeat(6, 2fr);
}

.inputarea {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 1vw;
    gap: 2vw;
}

input {
    font-family:system-ui,'Segoe UI';
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
}

.inputcontainer {
    position: relative;
    display: inline-block;
} 

button {
    font-family:system-ui,'Segoe UI';
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
}

.message {
    color: rgb(160, 190, 90);
    font-family:system-ui,'Segoe UI';
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

.message a {
    color: rgb(250, 240, 145);
}

.dropdown {
    font-family: system-ui,'Segoe UI';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.dropdownitem {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.image {
    height: 35px;
    object-fit:contain;
}

.bigimage {
    height: 170px;
    object-fit:contain;
}

.tooltip {
    font-family: system-ui,'Segoe UI';
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: white;
    border-radius: 6px;
    font-weight: bold;
}

.tooltipcontent {
    font-family: system-ui,'Segoe UI';
    background-color: #fff;
    color: #333333;
    text-align: center;
    white-space: nowrap;
    border-radius: 6px;
    position: absolute;
    padding: 6px;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.tooltipcontent::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.tooltip:hover .tooltipcontent {
    opacity: 1;
}

.separator {
    width: 150vw;
    border-bottom: rgb(160, 190, 90) solid 2px;
    margin-top: 10px;
    margin-bottom: 10px;
}