html, body {
   padding: 0;
   margin: 0;
   font-family: "Liberation Sans", sans-serif;
   scroll-behavior: smooth;
}
 a {
   color: inherit;
   text-decoration: underline;
}
 * {
/*   box-sizing: border-box;*/
}
 :root {
   --color-background: #101010;
   --color-text: #ddd;
}
 ::-webkit-scrollbar {
   width: 5px;
}
 ::-webkit-scrollbar-track {
   background: transparent;
}
 ::-webkit-scrollbar-thumb {
   background-color: #ccc;
   border-radius: 20px;
   transition: background-color 0.2s ease-in-out;
}
 ::-webkit-scrollbar-thumb:hover {
   background-color: #a0a0a0;
}
 body {
   background-color: var(--color-background);
   color: #ccc;
   height: 100vh;
   overflow: auto;
   transition: color 0.5s ease-in, background-color 0.5s ease-out;
}
 @media screen and (max-width: 800px) {
   body .medium-up {
     display: none;
  }
}
 nav {
   align-items: center;
   background-color: #202020;
   color: #eee;
   display: flex;
   flex-flow: row wrap;
   height: 60px;
   justify-content: left;
   padding: 0 20px;
   min-width: 100%;
}
 nav .hamburger {
   display: none;
}
 @media screen and (max-width: 800px) {
   nav .hamburger {
     align-items: center;
     background-color: #101010;
     border: 2px solid #a0a0a0;
     border-radius: 5px;
     color: #eee;
     display: flex;
     flex-flow: column;
     font-weight: normal;
     height: 2.3rem;
     justify-content: space-evenly;
     margin: 0 10px 0 0;
     padding: 5px;
     transition: transform 0.2s ease-in-out;
     width: 2.5rem;
  }
   nav .hamburger .line {
     border: 2px solid #eee;
     border-radius: 5px;
     height: 0;
     transition: transform 0.2s ease-in-out, width 0.2s ease-in-out;
     width: 90%;
  }
   nav .hamburger.active {
     transform: rotate(90deg);
  }
}
 nav h1 {
   font-size: 1.1rem;
   font-weight: 600;
}
 nav ul {
   align-items: center;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
   list-style: none;
   flex: 1;
}
 nav ul li {
   cursor: pointer;
   white-space: nowrap;
}
 nav ul li.divider {
   flex: 1;
}
 nav ul li.left {
   padding-right: 40px;
}
 @media screen and (max-width: 800px) {
   nav ul li.left {
     padding-right: 15px;
  }
}
 nav .nav-links {
   flex: 1;
}
 @media screen and (max-width: 800px) {
   nav .nav-links {
     height: calc(100vh - 60px);
     left: -100vw;
     position: absolute;
     top: 60px;
     transition: left 0.2s ease-in-out;
     width: 100vw;
     z-index: 10;
  }
   nav .nav-links ul {
     align-items: flex-start;
     display: flex;
     background-color: #202020;
     border-right: 2px solid #a0a0a0;
     flex-flow: column;
     margin: 0;
     height: 100%;
     position: relative;
     width: 300px;
  }
   nav .nav-links li {
     font-size: 1.5rem;
     padding: 10px 10px 10px 0;
  }
   nav .nav-links .nav-link-background {
     background-color: #202020;
     height: 100%;
     left: 0;
     opacity: 0;
     position: fixed;
     top: 60px;
     transition: opacity 0.2s ease-in-out;
     width: 0;
  }
   nav .nav-links.active {
     left: 0;
  }
   nav .nav-links.active .nav-link-background {
     opacity: 0.8;
     width: 100%;
  }
}
 nav .nav-links svg {
   height: 32px;
   width: 32px;
}
 .modal-container {
   animation: 0.2s modal-animation;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transition: opacity 0.2s ease-in-out;
   z-index: 100;
}
 .modal-container .modal-background {
   top: 0;
   left: 0;
   position: absolute;
   background-color: #202020;
   opacity: 0.8;
   width: 100%;
   height: 100%;
}
 @keyframes modal-animation {
   from {
     opacity: 0;
  }
   to {
     opacity: 1;
  }
}
 .modal-container .modal {
   color: #202020;
   position: absolute;
   top: 30%;
   left: 50%;
   line-height: 1.5rem;
   transform: translate(-50%, -30%);
   background-color: #eee;
   padding: 20px;
   border-radius: 5px;
   max-height: 90vh;
   max-width: 700px;
   min-width: 350px;
   overflow: auto;
}
 .modal-container .modal a {
   color: #0090ff;
}
 .modal-container .modal .modal-buttons {
   display: flex;
   flex-flow: row-reverse wrap;
   justify-content: space-between;
}
 .modal.settings-modal .beta {
   color: #eee;
   background-color: #0090ff;
   border-radius: 4px;
   display: inline-block;
   font-size: 0.8rem;
   padding: 0 6px;
}
 button {
   margin-top: 20px;
   background-color: #202020;
   color: #eee;
   font-weight: 600;
   border: 0;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
}
 button.danger {
   background-color: #d03030;
   color: #ddd;
}
 button.action {
   background-color: #0090ff;
   color: #ddd;
}
 button:hover {
   box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.2);
}
 .button-input {
   display: flex;
   flex-flow: row;
   justify-content: center;
   align-items: center;
   margin: 20px auto;
}
 .button-input button, .button-input input {
   height: 30px;
   margin: 0;
}
 .button-input button {
   border-radius: 5px 0 0 5px;
   align-items: center;
   display: flex;
   padding: 0 15px;
}
 .loader {
   align-items: center;
   display: flex;
   height: calc(100vh - 125px);
   justify-content: center;
}
 .loader .spinner {
   width: 40px;
   height: 40px;
   margin: 100px auto;
   background-color: var(--color-text);
   border-radius: 100%;
   animation: animation 1s infinite ease-in-out;
}
 @keyframes animation {
   0% {
     transform: scale(0);
  }
   100% {
     transform: scale(1);
     opacity: 0;
  }
}
 .share-action .actions {
   margin-left: 15px;
}
 .share-action button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   padding: 5px 10px;
}
 main {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: center;
   height: calc(100vh - 60px);
}
 main .error {
   align-items: center;
   display: flex;
   flex-flow: row;
   justify-content: center;
   height: calc(100vh - 60px);
}
 main .left-container {
   height: calc(100vh - 60px);
   overflow-y: auto;
   padding: 0 20px;
   width: 70%;
}
 @media screen and (max-width: 800px) {
   main .left-container {
     width: 100%;
     height: 60%;
  }
}
 main .left-container h1 {
   color: var(--color-text);
}
 main .right-container {
   background-color: #202020;
   height: calc(100vh - 60px);
   overflow-y: auto;
   padding: 0 20px;
   width: 30%;
}
 @media screen and (max-width: 800px) {
   main .right-container {
     width: 100%;
     height: 40%;
  }
}
 #game .banner {
   background-color: #202020;
   color: #eee;
   margin: 20px;
   padding: 10px;
   position: relative;
}
 #game .banner .close {
   cursor: pointer;
   position: absolute;
   right: 20px;
   top: 20px;
}
 #game .article-container {
   color: var(--color-text);
   font-family: monospace;
   font-size: 1.3rem;
   line-height: 2rem;
   height: calc(100vh - 125px);
   overflow: auto;
   padding: 0 20px;
   -webkit-overflow-scrolling: touch;
}
 @media screen and (max-width: 800px) {
   #game .article-container {
     font-size: 1.1rem;
     line-height: 1.7rem;
     height: calc(100% - 65px);
  }
}
 #game .article-container .word {
   box-sizing: border-box;
   border: 1px solid transparent;
}
 #game .article-container .word.selected {
   color: #0090ff;
}
 #game .article-container .caviarded {
   background-color: var(--color-text);
   border: solid 1px var(--color-text);
   position: relative;
   display: inline;
}

 #prompt {
  margin: 1rem;
 }

 #prompt span {
  margin: 0 0 0 10px;
  font-size: large;
  display: inline-block;
 }

 #prompt span.punct {
    margin: 0;
 }
 #game .article-container .caviarded:nth-of-type(5n) {
   border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}
 #game .article-container .caviarded:nth-of-type(5n + 1) {
   border-radius: 225px 30px 255px 30px/30px 255px 30px 225px;
}
 #game .article-container .caviarded:nth-of-type(5n + 2) {
   border-radius: 200px 30px 255px 20px/20px 215px 30px 250px;
}
 #game .article-container .caviarded:nth-of-type(5n + 3) {
   border-radius: 220px 50px 215px 30px/40px 240px 20px 210px;
}
 #game .article-container .caviarded:nth-of-type(5n + 4) {
   border-radius: 30px 255px 30px 225px/30px 225px 30px 250px;
}
 #game .article-container .caviarded.word-length {
   cursor: pointer;
   user-select: none;
}
 #game .article-container .caviarded.word-length::after {
   align-items: center;
   content: attr(data-word-length);
   color: var(--color-background);
   display: flex;
   height: 100%;
   left: 0;
   justify-content: center;
   opacity: 1;
   position: absolute;
   top: 0;
   transition: opacity 0.2s ease-in-out;
   width: 100%;
}
 #game .article-container .caviarded.word-length:active::after, #game .article-container .caviarded.word-length:focus::after, #game .article-container .caviarded.word-length:focus-within::after {
   opacity: 1;
}
 #game .right-container, #game .left-container {
   padding: 0;
}
 #game .guess-history, #game .game-information {
   color: #ddd;
   max-height: 100%;
   width: 100%;
}
 @media screen and (max-width: 800px) {
   #game .guess-history, #game .game-information {
     height: 100%;
  }
}
 #game .guess-history {
   padding: 0;
}
 #game .guess-history table {
   border-collapse: collapse;
   text-align: left;
   width: 100%;
}
 #game .guess-history table thead {
   font-weight: bold;
   border-bottom: 3px solid #ddd;
}
 #game .guess-history table tbody tr {
   border-bottom: 1px solid #303040;
}
 #game .guess-history table tbody tr:hover, #game .guess-history table tbody tr.selected {
   background-color: #303040;
}
 #game .guess-history table tbody tr:hover.clickable, #game .guess-history table tbody tr.selected.clickable {
   cursor: pointer;
   background-color: #a0a0a0;
}
 #game .guess-history table td, #game .guess-history table th {
   padding: 10px;
}
 #game .game-information {
   border-bottom: 2px solid #a0a0a0;
   margin-bottom: 50px;
   padding: 0 20px;
}
 #game .game-information a {
   color: #0090ff;
}
 #game .guess-input {
   align-items: center;
   display: flex;
   flex-flow: row;
   justify-content: center;
   background-color: #202020;
   height: 65px;
   width: 100%;
}
 #game .guess-input .article-navigation {
   align-items: center;
   background-color: #101010;
   border: 1px solid #ddd;
   border-right: 0;
   cursor: pointer;
   display: flex;
   height: 40px;
   justify-content: center;
   width: 40px;
}
 #game .guess-input input {
   height: 40px;
   font-size: 1rem;
}
 #game .guess-input input[type="text"] {
   border: 0;
   border-radius: 0;
   background-color: #eee;
}
 #game .guess-input input[type="submit"] {
   background-color: #101010;
   border: 1px solid #ddd;
   border-left: 0;
   color: #eee;
   cursor: pointer;
   padding: 0 20px;
   transition: background-color 0.2s ease-in-out;
}
 #game .guess-input input[type="submit"]:hover {
   background-color: #303040;
}
 #new-custom-game .left-container {
   color: var(--color-text);
}
 #new-custom-game form {
   margin-bottom: 50px;
}
 #new-custom-game .url-input {
   border: 1px solid #eee;
   padding: 10px 0 10px 10px;
}
 #new-custom-game .url-input input {
   border: 0;
   height: 40px;
   margin: 0 0 0 5px;
}
 #new-custom-game .url-copy {
   align-items: center;
   display: flex;
   flex-flow: row wrap;
}
 #new-custom-game .url-copy input[type="text"] {
   background-color: #fff;
   border: 1px solid #ddd;
   color: #202020;
   height: 41px;
   padding: 10px;
}
 #new-custom-game input[type="submit"], #new-custom-game input[type="button"] {
   background-color: #101010;
   border: 1px solid #ddd;
   color: #eee;
   cursor: pointer;
   height: 41px;
   margin: 0;
   padding: 0 20px;
   transition: background-color 0.2s ease-in-out;
}
 #new-custom-game input[type="submit"]:disabled, #new-custom-game input[type="button"]:disabled {
   background-color: #303040;
   cursor: not-allowed;
}
 #new-custom-game input[type="submit"]:hover, #new-custom-game input[type="button"]:hover {
   background-color: #303040;
}
 #archives .list-filters {
   align-items: center;
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-end;
   margin-bottom: 40px;
}
 #archives .list-filters label {
   color: var(--color-text);
   margin-left: 15px;
}
 #archives .list-filters select {
   background-color: #202020;
   border: 1px solid #ddd;
   border-radius: 5px;
   color: #ddd;
   height: 30px;
   padding: 0.3rem 1rem;
   margin: 0 0 0 5px;
}
 #archives .list-filters button {
   border: 1px solid #ddd;
   height: 30px;
   padding: 5px 8px;
   margin: 0 0 0 5px;
}
 #archives .archive-grid {
   display: grid;
   grid-auto-rows: 1fr;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 50px;
   margin-bottom: 50px;
   padding: 0 30px;
   width: 100%;
}
 #archives .archive-grid .archive-item {
   background-color: #202020;
   border: 1px solid #ddd;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
   max-width: 400px;
   min-height: 150px;
   transition: background-color 0.2s ease-in-out;
   width: 100%;
}
 #archives .archive-grid .archive-item:not(.completed):hover {
   background-color: #303040;
   cursor: pointer;
}
 #archives .archive-grid .archive-item .archive-info {
   align-items: flex-start;
   display: flex;
   flex-flow: column;
   justify-content: flex-start;
   padding: 10px;
}
 #archives .archive-grid .archive-item .archive-info h3 {
   margin: 0 0 15px 0;
}
 #archives .archive-grid .archive-item .article-difficulty {
   width: 10px;
   display: flex;
   flex-flow: column;
}
 #archives .archive-grid .archive-item .article-difficulty .difficulty {
   display: flex;
   flex: 1;
}
 #archives .archive-grid .archive-item .article-difficulty .difficulty.active {
   border: 1px solid #ddd;
}
 #archives .archive-grid .archive-item .article-difficulty .difficulty.active.level-0 {
   background-color: greenyellow;
}
 #archives .archive-grid .archive-item .article-difficulty .difficulty.active.level-1 {
   background-color: gold;
}
 #archives .archive-grid .archive-item .article-difficulty .difficulty.active.level-2 {
   background-color: orange;
}
 #archives .archive-grid .archive-item .article-difficulty .difficulty.active.level-3 {
   background-color: tomato;
}
 #archives .archive-grid .archive-item .article-difficulty .difficulty.active.level-4 {
   background-color: crimson;
}
 #archives .empty-state {
   color: var(--color-text);
   text-align: center;
}
 #archives .right-container {
   display: flex;
   flex-flow: column;
}
 #archives .right-container h3 {
   margin-top: 50px;
}
 #archives .right-container .separator {
   flex: 1;
}
 #archives .right-container .reset-account {
   margin: 20px 0 20px auto;
}
 .modal.sync-modal input {
   font-family: monospace;
   width: 90%;
}
 .modal.sync-modal .qr-code {
   margin-bottom: 20px;
   text-align: center;
}
 .modal.sync-modal .qr-code .mask {
   align-items: center;
   border: 1px solid #a0a0a0;
   color: black;
   cursor: pointer;
   display: flex;
   position: absolute;
   left: calc(50% - 64px);
   justify-content: center;
   font-size: 30px;
   height: 128px;
   width: 128px;
   background: #ddd;
}
 #about .left-container {
   color: var(--color-text);
}
 #about .left-container a {
   color: #0090ff;
}
 footer {
   height: 0;
}

/* Create three equal columns that floats next to each other, half of the screen */
.column {
  height: auto;
  width: 50%;
  display: inline-block;
}

/* Create three equal columns that floats next to each other, third of the screen */
.column3 {
  height: auto;
  width: 33%;
  display: inline-block;
}

textarea {
  max-width: 100%;
  font-size: 14px;
}

@media only screen and (max-width: 640px) {
    body, input, textarea {
    }

    #guess-text {
        flex-grow: 1;
    }

    .column {
        width: 90%;
    }


}


.row {
  text-align: center;
  display: inline-block;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

img.emoji {
  height: 1rem;
}

.word-counter {
  line-height: 1rem;
  margin: 0;
  font-size: 10px;
  color: #568997;
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* Disable interaction when hidden */
}

.modal-content {
  background-color: #282828;
  margin: 15% auto;
  padding: 20px;
  width: 60%;
  text-align: center;
  transform: scale(0.8);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.modal.open {
  opacity: 1;
  pointer-events: auto; /* Enable interaction when visible */
}

.modal-content.open {
  transform: scale(1);
}

.modal img {
   height: 50%;
   width: 50%;
   border-radius: 2%;
}

#retirement-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 5px;
    text-align: center;
    z-index: 1000;
    cursor: pointer;
    animation: bannerShake 1.5s ease-in-out infinite, bannerPulse 2s ease-in-out infinite;
}

#retirement-banner p {
    margin: 0;
    display: block;
}

#retirement-modal-he,
#retirement-modal-en {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

#retirement-modal-he .modal-content,
#retirement-modal-en .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    color: #000;
    text-align: left;
    font-size: 18px;
    line-height: 1.6;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 640px) {
    #retirement-modal-he .modal-content,
    #retirement-modal-en .modal-content {
        width: 95%;
        margin: 5% auto;
        padding: 15px;
    }
}

@keyframes bannerShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.5px); }
    75% { transform: translateX(0.5px); }
}

@keyframes bannerPulse {
    0%, 100% { background-color: #333; }
    50% { background-color: #444; }
}