.center { display: flex; justify-content: center }
.phase-1 { list-style-type: none; margin: 0; padding: 0; width: 550px}
#sortable0 li, #sortable1 li, #sortable2 li, #sortable3 li, #sortable4 li { margin: 4px; padding: 1px; float: left; width: 100px; height: 100px; font-size: 4em; text-align: center; line-height: 100px; background-color: burlywood; border-radius: 10px; text-transform: uppercase; cursor: pointer;}
.row { margin: 4px; border-radius: 10px; width: 550px; background-color: burlywood; list-style-type: none; padding: 2px; cursor: pointer; display: flex;}

ol {
    padding-inline-start:0px;
    color: black;
}

button {
    height: 50px;
    text-align: center;
    width: 150px;
    border-radius: 40px;
    color: black;
    background-color: burlywood;
    letter-spacing: 1px;
    cursor: pointer;
    font-size: 2em;
    font-family:'Times New Roman', Times, serif;
    border: none;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-block;
    &:hover{
        background-color: #6ee696;
    }
    &:active{
        letter-spacing: 2px;
        background-color: #228b22;
        margin-top: 3px;
    }
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4rem;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
}

#tip{
    font-size: 1.5em;
}

#timer{
    display: none;
    font-size: 1.5em;
    margin: 0;
    padding: 0;
    text-align: center;
}

body .no-top {
    margin-top: 0;
}

#question{
    padding-bottom: 5px;
}

#page {
    position: relative;
    min-height: 100vh;
}

main {
    padding-bottom: 4rem;
    margin-top: -5px;
}

body{
    font-family: 'Times New Roman', Times, serif;
    min-height: 100vh;
    margin: 0;
    color:black;
}

header{
    text-align: center;
    padding-top: 15px;
    font-weight: bold;
    font-size: 3em;
}

body{
    display: flex;
    flex-direction: column;
}

main{
    flex:1;
}


@media screen and (max-width: 700px){
    .modal #resultHeader {
        font-size: 12vw;
    }
}

@media screen and (max-width: 600px){
    .phase-1, .row{
        width: max-content;
    }
    #sortable0 li, #sortable1 li, #sortable2 li, #sortable3 li, #sortable4 li{
        width: 15vw;
        height: 15vw;
        line-height: 15vw;
    }
    header .header-large {
        font-size: 12vw;
    }
    main button{
        text-align: center;
        padding: 0;
        margin: 0;
    }
    #settingsModal{
        padding-top: 20%;
    }
    .modal-stats {
        max-height: calc(100vh - 180px);
        overflow-y: auto;
    }
}

@media screen and (max-width: 525px) {
    footer {
        position: relative;
    }
    footer #tip{
        margin-bottom: 1.8em;
        margin-left: 4px;
        margin-right: 4px;
    }
    footer #question{
        color: grey;
    }
    main{
        padding-bottom: 0;
        margin-bottom: 2.5rem;
        flex: 0;
    }

    .modal #startHeader {
        font-size: 14vw;
    }

    .modal h1 {
        font-size: 6vw;
    }

    .modal #logo {
        width: 50%;
        height: auto;
    }

    .modal .modal-results p {
        font-size: 1.5em;
    }
}

@media screen and (max-height: 875px){
    html{
        height: 875px;
        overflow: auto;
    }
}

@media screen and (max-height: 874px) {
    footer {
        position: relative;
    }
    main{
        padding-bottom: 0;
    }
}

@media screen and (max-width: 900px) {
    .modal .modal-results {
        width: 70%;
    }
}

@media screen and (max-height: 750px) {
    .modal .modal-results {
        height: 400px;
    }
}

/* the dim background */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 160px;
}

.modal-results {
    background-color: #fefefe;
    margin: auto;
    padding: 10px;
    width: 50%;
    height: auto;
    padding-bottom: 80px;
    border-radius: 10px;
    text-align: center;
}

.modal-help {
    background-color: #fefefe;
    margin: auto;
    padding: 10px;
    width: 500px;
    border-radius: 10px;
    text-align: center;
}

.modal-start {
    background-color: #fefefe;
    margin: auto;
    padding: 10px;
    width: 500px;
    border-radius: 10px;
    text-align: center;
    height: auto;
}

.modal-settings {
    background-color: #fefefe;
    margin: auto;
    padding: 10px;
    width: 500px;
    border-radius: 10px;
    text-align: center;
    height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-stats {
    background-color: #fefefe;
    margin: auto;
    margin-top: -20px;
    padding: 10px;
    width: 500px;
    border-radius: 10px;
    text-align: center;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo {
    width: 300px;
    height: 300px;
}

#startHeader{
    font-size: 5em;
}

#startNum {
    margin: 0;
    padding: 0;
    font-size: 1.5em;
}

#startBtn {
    margin-top: 20px;
    margin-bottom: 40px;
}

.modal-help ul {
    text-align: left;
    font-size: large;
}

.modal-help .header-medium{
    margin-top: 3px;
    margin-bottom: 3px;
}

.modal-help .header-small {
    color: burlywood;
}

.modal-help button {
    margin: 5px;
    margin-top: -2px;
}

.modal-help div .helprow { border-radius: 6px; background-color: burlywood; list-style-type: none; padding: 1.5px; width: auto; margin: 2px;}
.modal-help .helpSortable { list-style-type: none; margin: 0; padding: 0; padding-inline-start: 0px;}
.modal-help .helpSortable li { margin: 2px; padding: 1px; float: left; width: 35px; height: 35px; font-size: 2em; text-align: center; line-height: 35px; background-color: burlywood; border-radius: 3px; text-transform: uppercase; background-color: #6ee696}
.modal-help .helpSortable .incorrect { background-color: burlywood;}

#helpModal{
    padding-top: 130px;
}

@media screen and (max-width: 525px) {
    .modal-help p {
        margin-top: .7em;
        margin-bottom: .7em;
    }
    .modal-help .header-small {
        margin-top: .7em;
        margin-bottom: .7em;
    }
    #helpModal{
        padding-top: 15px;
    }
    main #startModal, main #statsModal, main #settingsModal, main #resultModal{
        padding-top: 15%;
    }
    .modal-help{
        width: 85%;
        height: auto;
    }
    .modal-help .row-p{
        margin-inline-end: 15px;
    }
    .modal-start {
        width: 85%;
        height: auto;
    }
    .modal-settings {
        width: 85%;
        height: auto;
    }
    .modal-stats {
        width: 85%;
        height: auto;
    }
    #startBtn {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 425px) {
    .modal .modal-help .header-large{
        font-size: 12vw;
    }
    .modal-help .header-medium{
        font-size: 6vw;
    }
    .modal .modal-results{
        padding-bottom: 40px;
    }
    .modal #links {
        margin-bottom: 0;
    }
}

.modal .modalHeader {
    padding: 3px;
    font-size: 4em;
    margin-top: 5px;
}

#resultHeader {
    padding: 3px;
    font-size: 5em;
    margin-top: 5px;
}

.modal-results p {
    padding: 3px;
    font-size: 2em;
}

#buttonDivider {
    padding: 15px;
    font-size: 1.5em;
}

.modal-help p{
    font-size: large;
}

.row-p{
    margin-inline-start:25px; 
    margin-inline-end:25px; 
    text-align: left;
}

.caption{
    margin-inline-start:25px; 
    margin-inline-end:25px; 
}

#help-div {
    display: inline-flex;
    justify-content: flex-end;
    margin-bottom: -56px;
    margin-top: 20px;
    margin-right: 20px;
    font-size:2.5em;
    z-index: 1;
    color: burlywood;
}

#settings {
    display: inline-flex;
    justify-content: flex-start;
    margin-bottom: -56px;
    margin-top: 20px;
    margin-left: 20px;
    font-size:2.5em;
    z-index: 1;
    color: burlywood;
}

#help-icon {
    cursor: pointer;
}

#settings-icon {
    cursor: pointer;
}

.success {
    color: white;
    animation: twist 1.8s linear 1 backwards;
}

@-moz-keyframes twist{
    0% {transform: rotateY(0deg);
        background-color: #6ee696;
        color: black}
    25% {transform: rotateY(300deg);}
    50% {transform: rotateY(550deg);}
    100% {transform: rotateY(720deg);
        background-color: goldenrod;
        color: black}
}

@-webkit-keyframes twist{
    0% {transform: rotateY(0deg);
        background-color: #6ee696;
        color: black}
    25% {transform: rotateY(300deg);}
    50% {transform: rotateY(550deg);}
    100% {transform: rotateY(720deg);
        background-color: goldenrod;
        color: black}
}

@keyframes twist {
    0% {transform: rotateY(0deg);
        background-color: #6ee696;
        color: black}
    25% {transform: rotateY(300deg);}
    50% {transform: rotateY(550deg);}
    100% {transform: rotateY(720deg);
        background-color: goldenrod;
        color: black}
}

.successHard {
    color: #c83f49;
    animation: twistHard 1.8s linear 1 backwards;
}

@keyframes twistHard {
    0% {transform: rotateY(0deg);
        background-color: burlywood;
        color: black}
    25% {transform: rotateY(300deg);}
    50% {transform: rotateY(550deg);
        color: black}
    100% {transform: rotateY(720deg);
        background-color: #FFFDD0;
        color: #c83f49}
}


@-webkit-keyframes help{
    from {left: 0px;}
    to {left: 40px;}
}

@-moz-keyframes help{
    from {left: 0px;}
    to {left: 40px;}
}

@keyframes help {
    from {left: 0px;}
    to {left: 40px;}
}


.help-letter {
    position: relative;
    animation: help 1s linear 1s infinite alternate;
}

@-webkit-keyframes twohelp{
    from {right: 0px;}
    to {right: 40px;}
}

@-moz-keyframes twohelp{
    from {right: 0px;}
    to {right: 40px;}
}

@keyframes twohelp {
    from {right: 0px;}
    to {right: 40px;}
}

.help-letter2 {
    position: relative;
    animation: twohelp 1s linear 1s infinite alternate;
}

.grayText {
    color: gray;
    margin-block-start: 0.25em;
    margin-block-end: 0.25em;
}

.anim-row {
    position: relative;
    animation: rowhelp 2s linear 1s infinite alternate;
}

@-webkit-keyframes rowhelp {
    0% { top: 0px;}
    75% { top: 48px;}
    100% { top: 48px;}
}

@-moz-keyframes rowhelp {
    0% { top: 0px;}
    75% { top: 48px;}
    100% { top: 48px;}
}

@keyframes rowhelp {
    0% { top: 0px;}
    75% { top: 48px;}
    100% { top: 48px;}
}

.anim-row-bottom {
    position: relative;
    animation: rowbottom 2s linear 1s infinite alternate;
}

@-webkit-keyframes rowbottom {
    0% { bottom: 0px;}
    75% { bottom: 48px;}
    100% { bottom: 48px;}
}

@-moz-keyframes rowbottom {
    0% { bottom: 0px;}
    75% { bottom: 48px;}
    100% { bottom: 48px;}
}

@keyframes rowbottom {
    0% { bottom: 0px;}
    75% { bottom: 48px;}
    100% { bottom: 48px;}
}

.reveal-tile {
    animation: helpreveal 2s ease 1s infinite alternate;
}

@-webkit-keyframes helpreveal {
    0%{ background-color: #6ee696; color: black}
    85%{ background-color: #6ee696; color: black}
    100%{ background-color: goldenrod;
          color: white;}
}

@-moz-keyframes helpreveal {
    0%{ background-color: #6ee696; color: black}
    85%{ background-color: #6ee696; color: black}
    100%{ background-color: goldenrod;
          color: white;}
}

@keyframes helpreveal {
    0%{ background-color: #6ee696; color: black}
    85%{ background-color: #6ee696; color: black}
    100%{ background-color: goldenrod;
          color: white;}
}

#streak {
    margin-block-start: .75em;
    margin-block-end: 0em;
    color:#6ee696;
    font-size: inherit;
}

.dark-mode {
    background-color: black;
    color: #FFFDD0;
}

.dark-mode-outline {
    background-color: black;
    color: #FFFDD0;
    outline: #228b22 solid 3px;
}

.dark-mode-start {
    background-color: black;
    color: #FFFDD0;
    outline: burlywood solid 3px;
}

.darker-row {
    background-color: #d39f5f; 
}

.wrong {
    animation: flashred .3s ease 2 alternate;
}

@-webkit-keyframes flashred {
    0%{color:inherit}
    100%{ color: #c83f49}
}

@-moz-keyframes flashred {
    0%{color:inherit}
    100%{ color: #c83f49}
}

@keyframes flashred {
    0%{color:inherit}
    100%{ color: #c83f49}
}

#timer p {
    font-size: 1.5em;
    text-align: center;
    padding: 0;
    margin: 0;
}

@-webkit-keyframes flashgreen {
    0%{color:inherit}
    10%{ color:#228b22}
    90%{ color:#228b22}
    100%{ color: inherit}
}

@-moz-keyframes flashgreen {
    0%{color:inherit}
    10%{ color:#228b22}
    90%{ color:#228b22}
    100%{ color: inherit}
}

@keyframes flashgreen {
    0%{color:inherit}
    10%{ color:#228b22}
    90%{ color:#228b22}
    100%{ color: inherit}
}

.firstGuess {
    animation: flashgreen 4s ease 1;
}

@-webkit-keyframes wiggle {
    0%{ transform: rotateZ(0deg);}
    5%{ transform: rotateZ(6deg);}
    10%{ transform: rotateZ(-6deg);}
    20%{ transform: rotateZ(6deg);}
    25%{ transform: rotateZ(-6deg);}
    30%{ transform: rotateZ(6deg);}
    35%{ transform: rotateZ(0deg);}
    100%{ transform: rotateZ(0deg);}
}

@-moz-keyframes wiggle {
    0%{ transform: rotateZ(0deg);}
    5%{ transform: rotateZ(6deg);}
    10%{ transform: rotateZ(-6deg);}
    20%{ transform: rotateZ(6deg);}
    25%{ transform: rotateZ(-6deg);}
    30%{ transform: rotateZ(6deg);}
    35%{ transform: rotateZ(0deg);}
    100%{ transform: rotateZ(0deg);}
}

@keyframes wiggle {
    0%{ transform: rotateZ(0deg);}
    5%{ transform: rotateZ(6deg);}
    10%{ transform: rotateZ(-6deg);}
    20%{ transform: rotateZ(6deg);}
    25%{ transform: rotateZ(-6deg);}
    30%{ transform: rotateZ(6deg);}
    35%{ transform: rotateZ(0deg);}
    100%{ transform: rotateZ(0deg);}
}

#copyBtn {
    animation: wiggle 3s linear 2s infinite;
}

nav{
    margin: 0;
    padding: 0;
    display: inline-flex;
    justify-content: space-between;
}

.settingsOption{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid burlywood;
    border-bottom: 1px solid rgba(222, 184, 135, 0.7);
    padding: 4px 0px;
    width: 90%;
}

.settingsOption .header-medium {
    padding-left: 16px;
}

.settingsOption i {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 3em;
    padding-right: 16px;
    cursor: pointer;
}

#sortable0 .correct, #sortable1 .correct, #sortable2 .correct, #sortable3 .correct, #sortable4 .correct{
    background-color: #6ee696;
}

#phase-2 .correct-row {
    background-color: #228b22;
}

#phase-2 {
    display: flex;
    align-items: center;
    flex-direction: column;
}

#close {
    color: #cccccc;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    margin-right: 4px;
    padding: 0;
    align-self: end;
}

#close-div :hover, #close-div :focus {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

#close-div {
    display: inline-flex;
    justify-content: flex-end;
    z-index: 1;
    margin: 0;
    margin-bottom: -25px;
    align-self: end;
}

#giveup{
    color:#6ee696;
    cursor: pointer;
    &:hover{
        color: #228b22;
    }
}

.spin {
    animation: spin 1s ease 1;
}

@keyframes spin {
    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}

.transitionColor {
    transition: background-color .6s linear;
}

.transitionAll {
    transition: all .5s linear;
}

.transitionText {
    transition: color 1s linear;
}

.transitionRow {
    transition: margin 1s linear;
    margin:0px;
}

#toggle-hard{
    cursor: pointer;
}

#links{
    display: flex;
    justify-content: space-between;
    margin: 20px;
    margin-top: 0;
}

#links .link-icon {
    font-size: 2.5em;
    color: burlywood;
    text-decoration: none;
    margin: 3vw;
    margin-bottom: 0;
}

#thanks {
    font-size: 1.5em;
    color: burlywood;
}

.fast-stat {
    font-style: italic;
}

.modal .modal-stats .hard-stat {
    color:#c83f49;
}

#title {
    cursor: pointer;
}

.modal-stats .header-medium {
    color:#228b22;
    margin: 0;
}

.modal-stats .header-small{
    margin: 0;
    margin-bottom: 15px;
}

.stats-footer {
    color: inherit;
}

.modal-stats a {
    color: #0ccbff;
    cursor: pointer;
}

.header-small {
    display: block;
    font-weight: bold;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.header-medium {
    display: block;
    font-size: 1.5em;
    margin-block-start: .83em;
    margin-block-end: .83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.header-large {
    display: block;
    font-size: 2em;
    margin-block-start: .67em;
    margin-block-end: .67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    color: burlywood;
}

h1 {
    margin: 0;
}

#startModal {
    padding-top: 130px;
}

#sortable0 .flashRed, #sortable1 .flashRed, #sortable2 .flashRed, #sortable3 .flashRed, #sortable4 .flashRed {
    background-color: #c83f49;
}

#phase-2 .flashRed {
    background-color: #c83f49;
}

.strike {
    color: #c83f49;
}