@font-face {
    font-family: 'UTM Agin';
    src: url('/static/fonts/UTM-Agin.ttf');
}

a {
    color: rgb(142, 142, 100);
    text-decoration: none;
}
a:hover {
    color: rgb(129, 129, 87);
}
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.8vh;
    color: rgb(122, 122, 80);
    overflow: hidden;

    /* Since I'm turning on 'noselect' by default, I need to set the cursor to 'default' explicitly so that it won't
       look like you can select text when you really can't. */
    cursor: default;
}
button {
    background-color: rgb(157, 157, 157);
    outline: none;
    font-family: "Open Sans", sans-serif;
    font-size: 1.8vh;
    cursor: pointer; /* TODO: Figure out when to not use the pointer cursor for buttons. */
}
button:active {
    outline: none;
}
div {
    font-size: 1.8vh;
}
h1 {
    text-align: center;
    text-shadow: 0.1vh 0.1vw rgba(0,0,0,0.2);
}
h4 {
    text-align: center;
    margin: 0.7vh 0;
    font-size: 1.3vh;
}
hr {
    border-top: 0;
    border-bottom: 1px solid #4e4d44;
}
input {
    padding: .6vh .6vw;
    border: 1px solid #4e4d44;
    font-size: 1.8vh;
    opacity: 0.85;
    background-color: rgb(46,40,40);
    color: rgb(169, 183, 198);
}
input:focus {
    outline: none;
}
/* Below: Disable the arrows that show up in <input>s of type 'number'.
   See https://css-tricks.com/snippets/css/turn-off-number-input-spinners/ */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
textarea {
    border-top: 1px solid #4e4d44;
    border-bottom: 1px solid #4e4d44;
    border-left: none;
    border-right: none;
    background-color: rgba(46,40,40,0.9);
    color: rgb(149,163,158);
    font-size: 2vh;
    font-family: 'Open Sans', sans-serif;
}
textarea:focus {
    outline: none;
}
textarea::selection {
    background-color: rgba(80,80,80,0.65);
}


/* Classes */
.deactivated-button {
    border: none;
    color: grey;
    border-radius: .3vw;
    box-shadow: inset 0 0 1vw 0 rgba(0,0,0,1);
    width: 30vw;
    height: 7vh;
}
.has-tool-tip:hover {
    cursor: help;
}
.input {
    text-align: center;
    margin: auto;
    width: 3vw;
}
.input--one-digit {
    width: 0.5em;
}
.input--two-digits {
    width: 1.5em;
}
.input--three-digits {
    width: 2em;
}
.input--four-digits {
    width: 2.5em;
}
.input--five-digits {
    width: 3em;
}
.bright-theme {
    background-color: white;
    color: rgb(51,51,51);
}
.lone-centered-page-column {
    font-size: 3vh;
}
.navbar__item {
    display: inline-block;
    padding: 1.1vh 1vw;
    font-weight: bold;
    border-radius: 0.3vw;
    color: rgb(122, 122, 80);
}
.navbar__link:hover {
    background-color: rgb(48,43,43);
}
.navbar__link:active {
    background-color: rgb(43,37,37);
}
.noselect { /* Use this class to prevent the user from being able to select display text. */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.options-list {
    -webkit-padding-start: 1vw;
    -webkit-margin-end: 0.3vw;
    text-align: left;
}
.selectable { /* Use this class to prevent the user from being able to select display text. */
  -webkit-touch-callout: initial; /* iOS Safari */
    -webkit-user-select: initial; /* Safari */
       -moz-user-select: initial; /* Firefox */
        -ms-user-select: initial; /* Internet Explorer/Edge */
            user-select: initial; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


/* IDs */

#main-content {
    height: 95vh;
    width: 100%;
    overflow: scroll;
}
#navbar {
    color: rgb(122, 122, 80);
    background-color: rgb(46,40,40);
    /*padding-left: 1vw;*/
    /*padding-right: 1vw;*/
    margin: 0;
    /*padding-bottom: 0.3vh;*/
    /*padding-top: 0.3vh;*/
    text-align: center;
    opacity: 0.9;
    height: 4.9vh;
    border-bottom: 0.1vh solid rgb(36,30,30);
}
#navbar--bright {
    background-color: rgb(244,245,247);
}
#navbar__left {
    float: left;
    height: 100%;
}
#navbar__right {
    float: right;
    height: 100%;
}
#navbar__rhymecraft-logo-and-word {
    display: inline-block;
    padding-left: 0.4vw;
    padding-top: 0;
    padding-bottom: 0;
}
#navbar__rhymecraft-logo {
    height: 4.3vh;
    padding-bottom: 0.4vh;
    vertical-align: middle;
}
#navbar__rhymecraft-word {
    display: inline-block;
    padding-left: 0.15vw;
    font-size: 3.3vh;
    padding-bottom: 0.5vh;
    vertical-align: bottom;
    color: rgb(156, 152, 119);
    font-family: 'UTM Agin', Times, serif;
    font-size: 3.5vh;
    padding-bottom: 0.7vh;
    font-weight: normal;
}
#sign-in {
    background-color: indianred;
    color: white;
    border: 1px dotted floralwhite;
    margin-left: 1vw;
}


/* desktop */

@media screen and (min-width: 600px) {
    /* Classes */

    .desktop {
        visibility: initial;
    }
    .mobile {
        display: none !important;
    }
    .lone-centered-page-column {
        margin: 0 25vw;
    }
}


/* mobile */

@media screen and (max-width: 599px) {
    .desktop {
        display: none !important;
    }
    .mobile {
        display: initial;
    }
}