/**********************************************************************************/
/* Main & Default */
/**********************************************************************************/
body { /* Page Background */
    background-color: rgb(25, 25, 25);
    color: white;
    text-align: center;
    font-family: "Arial Rounded MT", sans-serif;
    font-style: normal;
    margin: 0;
    max-width: initial;
    overflow-x: hidden;
    padding: 0;
    padding-bottom: 100px;
}
main {
    min-height: 80vh;
}
button { /* Toggle Pointer Clicker */
    cursor: pointer;
}
p {
    font-family: "Arial Rounded MT", sans-serif;
    color: white;
    overflow-x: hidden;
}
p.title {
    font-family: "Arial Rounded MT", sans-serif;
    text-align: center;
    font-size: 20px;
    overflow-x: hidden;
}
.entryBox { /* Default Container */
    display: flex;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    justify-content: left;
    align-items: center;
    width: 95.5vw;
    max-width: 600px;
    /* border: 1px solid orangered; */
}
.entryBoxPage { /* Default Container */
    display: block;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    justify-content: left;
    align-items: center;
    width: 95.5vw;
    max-width: 600px;
    /* border: 1px solid orangered; */
}
.entryBoxQ { /* Default Container */
    display: block;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 95.5vw;
    max-width: 600px;
    z-index: 5;
    position: relative;
    /* border: 1px solid orangered; */
}
.entryBoxG { /* Default Container */
    display: block;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 95.5vw;
    max-width: 600px;
    min-height: 130px;
    z-index: 4;
    position: relative;
    /* border: 1px solid orangered; */
}
.entryBoxC { /* Default Container */
    background-color: transparent;
    border: none;
    display: flex;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    justify-content: left;
    align-items: center;
    width: 80vw;
    max-width: 400px;
    /* border: 1px solid orangered; */
}
.subtext { /* Links */
    margin-top: 20px;
    font-size: 14px;
    padding-bottom: 20px;
}
.privacy { /* Links */
    margin: 0px;
    margin-top: 20px;
    font-size: 12px;
    padding-bottom: 20px;
}
/* Page Titles */
h1 { /* Main Page Title */
    display: block;
    font-family: "Arial Rounded MT", sans-serif;
    color: white;
    font-size: 36px;
    font-weight: bold;
    height: auto;
    width: 100vw;
    max-width: 570px;
    overflow-x: hidden;
    margin: 0 auto;
    margin-top: 4px;
    /* padding-bottom: 4px; */
    margin-bottom: 4px;
    background-color: rgb(40, 40, 40);
    /* border-top: 1px solid rgb(120, 120, 120);
    border-bottom: 1px solid rgb(120, 120, 120); */
    border-radius: 4px;
    align-items: right;
    justify-content: right;
}
.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.rulehead { /* Rules Page Title */
    font-family: "Arial Rounded MT", sans-serif;
    color: white;
    font-size: 36px;
    font-weight: bold;
    margin-top: 7px;
    height: 70px;
    width: 100vw;
    max-width: 300px;
    overflow-x: hidden;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    /* display: flex; */
}
.logo {
    width: 300px;
    max-width: 80vw;
    align-items: center;
    vertical-align: middle;
    margin: auto;
    overflow-x: hidden;
    background-color: transparent;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}
/* Upper Left Icon */
.homeicon {
    margin: 2px;
    margin-top: 7px;
    width: 50px;
    max-width: 10vw;
    height: 50px;
    max-height: 10vw;
    z-index: 2;
    margin-left: 10px;
}
a { /* Icon Link */
    /* width: 100vw; */
    text-align: left;
    font-weight: bold;
    color: white;
    overflow-x: hidden;
}
/* Navigation Menu */
.menuButton {
    display: block;
    /* position: absolute; */
    align-items: right;
    justify-content: right;
    margin: 0px;
    margin-right: 7px;
    margin-top: 12px;
    background: transparent;
    border: none;
    height: 40px;
    max-width: 10vw;
    width: 40px;
    max-height: 10vw;
    /* border: 1px solid yellow; */
}
img.menuImage {
    width: 100%;
    height: auto;
}
.menuBox {
    display: flex;
    visibility: hidden;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    width: 95.5vw;
    max-width: 540px;
    justify-content: right;
    align-items: right;
    z-index: 12;
    /* border: 1px solid orange; */
}
.menu {
    display: block;
    width: 140px;
    max-width: 540px;
    margin-top: -20px;
    align-items: right;
    background-color: rgb(50, 50, 50);
    border: 1px solid rgb(120, 120, 120);
    /* border: 1px solid yellow; */
    border-radius: 8px;
    /* padding-bottom: 10px; */
}
.menuItem {
    display: block;
    width: 100px;
    font-size: 16px;
    text-align: left;
    margin-left: 10px;
    padding: 10px;
    padding-right: 10px;
    border-bottom: 1px solid rgb(120, 120, 120);
    text-decoration: none;
}
.lastMenuItem {
    display: block;
    width: 100px;
    font-size: 16px;
    text-align: left;
    /* position: relative; */
    margin-left: 10px;
    padding: 10px;
    padding-right: 10px;
    text-decoration: none;
}
/* DropDowns */
.dropdown { /* Dropdown Container */
    display: block;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 95.5vw;
    max-width: 540px;
    background-color: rgb(40, 40, 40);
    border-top: 1px solid rgb(120, 120, 120);
    border-bottom: 1px solid rgb(120, 120, 120);
    /* height: 2px; */
    /* border-radius: 8px; */
}
.ddHead {
    display: flex;
    width: 100%;
    background-color: rgb(40, 40, 40);
    height: 40px;
    border: none;
    border-bottom: 1px solid rgb(60, 60, 60);
    /* border-radius: 8px; */
    align-items: center;
    padding: 0px;
}
.ddName {
    width: 75%;
    /* height: 40px; */
    font-size: 15px;
    color: white;
    overflow-x: hidden;
    text-align: left;
    padding-left: 20px;
}
.ddIcon {
    width: 25%;
    /* height: 40px; */
    font-size: 15px;
    color: white;
    overflow-x: hidden;
    text-align: right;
    border-radius: 4px;
    margin: 0px;
    padding-right: 20px;
}
.ddBody {
    /* display: none; */
    align-items: center;
    padding: 0px;
    margin-top: -10px;
    padding-bottom: 10px;
    background-color: rgb(40, 40, 40);
    /* height: auto; */
    /* transition: height var(--transition-duration, 1s); */
    /* transition-duration: 1s;
    transition-property: height; */
    /* transition: height 0.5s ease-in-out; */
    border-bottom: 1px solid rgb(120, 120, 120);
}
/* Multi-Use Components */
h2 { /* Page Subtitle/Section Title */
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0px;
    padding: 0px;
    font-family: "Arial Rounded MT", sans-serif;
    font-weight: bold;
}
.title { /* Welcome and Hint Titles */
    margin-top: 0px;
    margin-bottom: -10px;
    font-weight: bold;
    font-family: "Arial Rounded MT", sans-serif;
}
.rules { /* Rules and Welcome Section Headers */
    font-family: "Arial Rounded MT", sans-serif;
    font-style: normal;
    font-weight: bold;
    color: white;
    margin: 4px;
    margin-top: 20px;
    margin-left: 20px;
    font-size: 16px;
    text-align: left;
}
ul {
    padding-left: 2em;
}
.bullet { /* Rules, Welcome, and Hint Non-bullet Rows */
    list-style: disc;
    color:white;
    font-style: normal;
    font-family: "Arial", sans-serif;
    font-size: 12px;
    margin: 3px;
    margin-left: 20px;
    margin-right: 20px;
    overflow-x: hidden;
    text-align: left;
}
li.bullet { /* Rules, Welcome, and Hint Bulleted Rows */
    text-indent: -1.5em;
    padding-left: 2em;
}
.key { /* Rules, Welcome, and Hint Bold Words */
    font-weight: bold;
    color: rgb(90, 180, 250);
}
.close { /* Welcome and Hint Close Button */
    background-color: rgb(40, 40, 40);
    color: rgb(20, 110, 220);
    position: absolute;
    border: 0px;
    top: 10px;
    right: 10px;
    font-size: 14px;
    font-weight: bold;
}
/* Google Ads */
.adsbygoogle {
    max-height: 100px;
    /* height: 100px; */
    bottom: 0;
    position: absolute;
    /* z-index: 6; */
    background-color: white;
}
/**********************************************************************************/
/* Pop-Up Windows */
/**********************************************************************************/
/* Hint Components */
.hint {
    display: none;
    top: 120px;
    transform: translateX(-50%);
    left: 50%;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    padding-top: 10px;
    padding-bottom: 15px;
    width: 94.5vw;
    max-width: 540px;
    background-color: rgb(40, 40, 40);
    z-index: 7;
    border: 2px solid rgb(20, 110, 220);
    border-radius: 8px;
}
.circle-container {
    display: flex;
    margin: 0 auto;
    margin-top: -5px;
    margin-bottom: 10px;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    max-width: 540px;
    background-color: transparent;
    /* border: 1px solid orangered; */
}
.circle {
    width: 15px;
    height: 15px;
    border: 2px solid rgb(90, 180, 250);
    background-color: rgb(20, 50, 110);
    border-radius: 50%;
}
/* Welcome Components */
.welcome {
    display: block;
    top: 70px;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 15px;
    width: 95.5vw;
    max-width: 540px;
    background-color: rgb(40, 40, 40);
    z-index: 8;
    border: 2px solid rgb(20, 110, 220);
    border-radius: 8px;
}
.closeWelcome { /* Welcome and Hint Close Button */
    display: block;
    background-color: rgb(40, 40, 40,0);
    color: rgb(20, 110, 220);
    position: absolute;
    border: 0px;
    margin: 0 auto;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    width: 95vw;
    max-width: 530px;
}
.intro {
    color:white;
    font-style: normal;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    margin: 3px;
    margin-left: 20px;
    overflow-x: hidden;
    text-align: left;
}
/* Victory Components */
.victory {
    display: none;
    top: 80px;
    transform: translateX(-50%);
    left: 50%;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    padding-top: 20px;
    width: 95.5vw;
    max-width: 600px;
    height: 230px;
    background-color: rgb(40, 40, 40);
    z-index: 9;
    border: 2px solid rgb(20, 110, 220);
    border-radius: 8px;
}
.victor {
    margin: 5px;
    margin-top: 10px;
}
p.word { /* Word of the Day */
    font-size: 32px;
    /* color: rgb(20, 110, 220); */
    color: rgb(70, 160, 250);
    margin: 0px;
}
.congrats {
    margin-top: 0px;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    font-family: "Arial Rounded MT", sans-serif;
}
button.share{
    border: 2px solid white;
    border-radius: 4px;
    width: 150px;
    height: 30px;
    background-color: rgb(20, 110, 220);
    font-size: 15px;
    font-weight: bold;
    color: white;
    overflow-x: hidden;
    margin: 0px;
    margin-top: -10px;
    padding: 0px;
    text-align: center;
    font-family: "Arial Rounded MT", sans-serif;
}
.diffnote {
    color:white;
    font-style: normal;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    margin: 15px;
    vertical-align: top;
    overflow-x: hidden;
    text-align: center;
}
/**********************************************************************************/
/* Gameplay Elements */
/**********************************************************************************/
/* Question Components */
p.rating { /* Word Rating */
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin-left: 5%;
    overflow-x: hidden;
    width: 90%;
    /* border: 1px solid yellow; */
}
.hintbutton {
    background-color: rgb(0, 0, 0, 0);
    border: 0px;
    margin-right: 5%;
    /* border: 1px solid yellow; */
    padding: 0px;
    margin-bottom: 5px;
    margin-top: -2.5px;
}
img.hintbutton {
    width: 40px;
    /* max-width: 5vw; */
    height: auto;
    z-index: 3;
}
.hinttext {
    width: 50px;
    font-size: 16px;
    height: auto;
    margin-left: 5%;
    margin-top: 0px;
    z-index: 3;
    /* border: 1px solid yellow; */
}
input.question{
    border: 2px solid rgb(20, 110, 220);
    border-radius: 4px;
    width: 75%;
    height: 40px;
    background-color: rgb(10, 25, 55);
    font-size: 15px;
    color: white;
    overflow-x: hidden;
}
button.question{
    border: 2px solid white;
    border-radius: 4px;
    width: 15%;
    height: 45px;
    background-color: rgb(20, 110, 220);
    font-size: 15px;
    font-weight: bold;
    color: white;
    overflow-x: hidden;
    margin: 0px;
    margin-top: 1px;
    padding: 0px;
    text-align: center;
    font-family: "Arial Rounded MT", sans-serif;
    vertical-align: top;
}
.autocomplete { /* Dropdown Container */
    display: flex;
    align-self: center;
    justify-content: right;
    margin-top: 2px;
    overflow-x: hidden;
    width: 91%; /* Fit Screen Width */
    max-width: 540px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    /* border: 1px solid red; */
}
.suggestion-list { /* Suggestion Dropdown */
    font-family: 'Arial';
    width: 83%;
    word-break: break-word;
    white-space: pre;
    text-align: left;
    max-height: 250px;
    background-image: linear-gradient(to top, rgba(10,55,110,0) 0px, rgba(10,55,110,1) 10px,  rgba(10,55,110,1) 100%);
    overflow-x: hidden;
    padding: 2px;
    z-index: 4;
    /* word-wrap: normal; */
    /* margin-left: 0vw; */
}
.diffcontainer {
    display: flex;
    /* align-self: right; */
    justify-content: left;
    /* margin-top: 4px; */
    overflow-x: hidden;
    height: 30px;
    width: 83%;
    max-width: 540px;
    position: absolute;
    margin-right: 17%;
    z-index: 0;
    /* transform: translateX(-50%); */
    /* left: 50%; */
    /* margin: 0 auto; */
    /* margin-left: 3vw; */
    /* margin-right: 3vw; */
    /* border: 1px solid orange; */
}
.guess-list { /* Guesses Remaining Dropdown */
    font-family: 'Arial';
    width: 83%;
    word-break: break-word;
    white-space: pre;
    text-align: left;
    display: none;
    /* height: 0px; */
    max-height: 250px;
    background-image: linear-gradient(to top, rgba(10,55,110,0) 0px, rgba(10,55,110,1) 10px,  rgba(10,55,110,1) 100%);
    overflow-x: hidden;
    padding: 2px;
    z-index: 4;
    /* word-wrap: normal; */
    /* margin-left: 0vw; */
}
/* Guess Components */
input.guess{
    border: 2px solid rgb(20, 110, 220);
    border-radius: 4px;
    width: 75%;
    height: 40px;
    background-color: rgb(10, 25, 55);
    font-size: 15px;
    color: white;
    overflow-x: hidden;
    margin-top: 40px;
}
button.guess{
    border: 2px solid white;
    border-radius: 4px;
    width: 15%;
    height: 45px;
    background-color: rgb(20, 110, 220);
    font-size: 15px;
    font-weight: bold;
    color: white;
    overflow-x: hidden;
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-family: "Arial Rounded MT", sans-serif;
}
/* Difficulty Components */
p.diffEasy {
    text-align: left;
    align-items: left;
    vertical-align: top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin-top: 6px;
    overflow-x: hidden;
    /* width: 100%; */
    width: 150px;
    min-width: 150px;
    position: absolute;
    transform: translateX(calc(100%-150px));
    z-index: 0;
    /* color: rgb(20, 110, 220); */
    /* border: 1px solid yellow; */
}
.easy { /* Rules, Welcome, and Hint Bold Words */
    font-weight: bold;
    color: rgb(90, 180, 250);
    z-index: 0;
}
.easy.active {
    /* color: rgb(20, 50, 110); */
    color: rgb(90, 180, 250);
    z-index: 0;
}
p.diffHard {
    text-align: left;
    vertical-align: top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin-top: 6px;
    overflow-x: hidden;
    width: 100%;
    min-width: 50px;
    margin-left: 210px;
    margin-right: -250px;
    position: absolute;
    z-index: 0;
    /* color: rgb(20, 110, 220); */
    /* border: 1px solid yellow; */
}
.hard { /* Rules, Welcome, and Hint Bold Words */
    font-weight: bold;
    /* color: rgb(20, 50, 110); */
    color: rgb(90, 180, 250);
    z-index: 1;
}
.hard.active {
    color: rgb(90, 180, 250);
    z-index: 0;
}
.slider {
    width: 50px;
    height: 20px;
    background-color: rgb(10, 25, 55);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    border: 1px solid white;
    margin-left: 150px;
    margin-right: 5px;
    margin-top: 4px;
    z-index: 0;
}
.knob {
    width: 12px;
    height: 12px;
    border: 2px solid white;
    border-radius: 8px;
    background-color: rgb(20, 110, 220);
    transition: transform 0.3s ease-in-out;
    margin: 2px;
    z-index: 0;
}
.knob.active {
    transform: translateX(30px);
    z-index: 0;
}
/* Gameplay Shared Components */
p.count {
    /* flex: 1.7; */
    width: 17%;
    top: 0%;
    text-align: right;
    vertical-align: top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: white;
    margin-top: 5px;
    margin-left: 0;
    padding: 0;
    overflow-x: hidden;
    /* border: 1px solid yellow; */
}
em { /* Count, Difficulty Emphasis */
    color:white;
    font-style: normal;
    font-family: "Arial Rounded MT", sans-serif;
    font-size: 15px;
    overflow-x: hidden;
}

/**********************************************************************************/
/* Tables */
/**********************************************************************************/
/* Core Structure */
.left-text {
    text-align: left;
    font-size: 15px;
    width: 75%;
    background-color: rgb(40, 40, 40);
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
}
.right-text {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    width: 25%;
    overflow-x: hidden;
    padding-left: 0px;
    padding-right: 0px;
    background-color: rgb(40, 40, 40);
}
table {
    margin: auto;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    width: 90%;
    /* border: 1px solid white; */
    border-top: solid 1px white;
    border-bottom: solid 1px white;
    overflow-x: hidden;
    /* margin: 0 auto; */
    max-width: 540px;
    /* margin-top: 40px; */
    /* margin-bottom: -36px; */
}
table.questiontable {
    /* margin-top: 40px; */
    margin-bottom: 40px;
    /* background-color: rgb(20, 20, 40); */
}
table tr:first-child {
    display: none;
}
table td {
    height: 40px;
    padding-left: 8px;
    padding-right: 8px;
    border: 2px solid white;
    border-radius: 8px;
    border-collapse: separate;
}
/* Question Formats */
.answerNo {
    border-color: rgb(240, 80, 90);
    background-color: rgb(55, 40, 40);
}
.answerRarely {
    border-color: rgb(220, 145, 45);
    background-color: rgb(55, 50, 30);
}
.answerSometimes {
    border-color: rgb(180, 180, 50);
    background-color: rgb(55, 55, 25);
}
.answerUsually {
    border-color: rgb(60, 140, 60);
    background-color: rgb(35, 60, 40);
}
.answerYes {
    border-color: rgb(60, 150, 200);
    background-color: rgb(35, 50, 50);
}
.answerIrrelevant {
    border-color: black;
    background-color: rgb(45, 45, 45);
}
.answerOther {
    border-color: rgb(140, 135, 135);
    background-color: rgb(45, 45, 45);
}
/* Guess Formats */
.correctGuess {
    border-color: rgb(0, 200, 80);
    color: rgb(0, 200, 80)
}
.closeGuess {
    border-color: rgb(220, 200, 0);
    color: rgb(220, 200, 0)
}
.incorrectGuess {
    border-color: rgb(200, 0, 0);
    color: rgb(200, 0, 0);
}