@font-face {
    font-family: avenir;
    src: url("avenir.ttf") format("opentype");
}

:root {
    --text: #ffffff;
    --blue-dark: #323031;
    --background: #084c61;
    --red: #db3a34;
    --orange: #f7b735;
    --blue: #177e89;
}

body {
    color: var(--text);
    font-family: avenir;
    background-color: var(--background);
}

.nb-letter-section {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.tusmo-btn {
    background-color: var(--text);
    border: solid;
    border-width: 1px;
    border-color: var(--text);
    color: var(--background);
    width: 100%;
    height: 40px;
    vertical-align: baseline;
}

.tusmo-input {
    width: 100%;
    height: 40px;
}

.tusmo-block {
    background-color: var(--background);
    border: solid;
    border-width: 2px;
    border-color: var(--text);
    color: var(--text);
    width:  5dvw;
    height: 5dvh;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    margin: 1px;
}

@media screen and (min-width: 900px) {
    .tusmo-block {
       font-size: 2rem;
       width: 50px;
       height: 50px;
    }
  }

.letter_1 {
    background-color: var(--blue);
}

.letter_2 {
    background-color: var(--red);
}

.letter_3 {
    background-color: var(--orange);
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.restart-btn {
    margin-top: 2rem;
    background-color: var(--text);
    border: solid;
    border-width: 1px;
    border-color: var(--text);
    color: var(--background);
    height: 40px;
    vertical-align: baseline;
    margin-bottom: 2rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

.other_words {
    margin-top: 2rem;
}

.proposed_words {
    border: solid;
    border-width: 1px;
    border-color: var(--text);
    background-color: var(--background);
    color: var(--text);
    width: 80%;
    margin-bottom: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: 0.2s;
}

.proposed_words:hover {
    border-color: var(--text);
    background-color: var(--text);
    color: var(--bbackground);
}

.logo {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.logo-letter {
    height: 3rem;
    width: 3rem;
    box-sizing: border-box;
    border: solid;
    border-width: 0;
}

.rounded {
    border-radius: .25rem;
}

.bg-red-primary {
    background-color: var(--red);
    box-shadow: 0 8px 0 0 var(--blue-dark);
}

.full-rounded {
    border-radius: 2rem;
}

.bg-orange-primary {
    background-color: var(--orange);
    box-shadow: 0 8px 0 0 var(--blue-dark);
}

.o {
    margin-left: 0.3rem;
}

.keyboard {
    margin-top: 3rem;
}

.keycap {
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.4rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--background);
    color: var(--text);
    border: solid 1px var(--text);
    transition: 0.2s;
}

.keycap:hover {
    background-color: var(--text);
    color: var(--background);
}

.col-1 {
    padding-right: 0.2dvw;
    padding-left : 0.2dvw;
}

/** SWITCH CSS **/

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--blue);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--blue);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--blue);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.language-middle {
    margin-top: 0.3rem;
}

.language-switch {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.choose-for-me {
    background-color: var(--background);
    color: var(--text);
    border: solid 1px var(--text);
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin-bottom: 1rem;
    transition: 0.2s;
}

.choose-for-me:hover {
    background-color: var(--text);
    color: var(--background);
}