:root {
    --purple: #673AB7;
    --yellow: #DFB534;
    --white: #EBEBEB;
    --gray: #D8D8D8;
    --light-gray: #E8E8E8;
    --mid-gray: #C0C0C0;
    --dark-gray: #6C6C6C;
}

html {
    font-family: 'Roboto Mono', monospace;
}

body {
    background-color: var(--gray);
}

.inline-code {
    font-family: 'Roboto Mono', monospace;
    color: var(--dark-gray);
    background: var(--gray);
}

.sidenav {
    overflow-y: auto;
}

.main-container {
    background-color: var(--light-gray);
    height: 100vh;
    z-index: 1;
}

#logo {
    background-color: var(--purple);
    color: white;
    width: 100%;
    line-height: 75px;
    text-align: center;
    font-size: 20px;
    cursor: default;
}

.achievement-container {
    height: 75px;
    background-color: var(--dark-gray);
}

.icon {
    position: relative;
    top: 30%;
}

#achievement {
    position: relative;
    top: 30%;
    color: var(--white);
    font-size: 15px;
    cursor: default;
}

button {
    background-color: var(--purple);
    color: var(--white);
    font-size: 17px;
}

button:hover {
    color: gold;
}

.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.lesson-btn {
    border-radius: 0;
    border-bottom-color: black;
    height: 50px;
}

.btn-background {
    background-color: var(--purple);
    color: var(--white);
}

.checkpoint {
    border-radius: 0;
    font-size: 15px;
    background-color: var(--gray);
    color: black;
}

.checkpoint:hover {
    background-color: var(--mid-gray);
    color: black;
}

#code-canvas-container {
    height: 54vh;
}

.color-btn {
    border-radius: 6px;
}

.color-btn:hover {
    border: solid 1px gold;
}

#color-btn {
    display: grid;
    grid-template: repeat(6, 1fr) / repeat(2, 1fr);
    grid-gap: 2px 2px;
    width: 50px;
    height: 154px;
    margin: 10px auto;
}

#color-wheel-container {
    display: none;
    position: fixed;
    height: 170px;
    width: 150px;
    background-color: white;
    border: 1px lightgrey solid;
    right: 95px;
    top: 10px;
    border-radius: 10px;
    z-index: 1;
}

@media (max-width : 767px) {
    #color-wheel-container {
        visibility: hidden;
    }
}

#wheel {
    display : none;
    position: fixed;
    border-radius: 10px;
    z-index: 2;
    right: 105px;
}

#wheel:hover {
    cursor: crosshair;
}

#orange-color-btn {
    background-color: orange;
}

#red-color-btn {
    background-color: red;
}

#yellow-color-btn {
    background-color: yellow;
}

#lime-color-btn {
    background-color: lime;
}

#aqua-color-btn {
    background-color: aqua;
}

#green-color-btn {
    background-color: green;
}

#blue-color-btn {
    background-color: blue;
}

#fuchsia-color-btn {
    background-color: fuchsia;
}

#saddlebrown-color-btn {
    background-color: saddlebrown;
}

#purple-color-btn {
    background-color: purple;
}

#blackandwhite-color-btn {
    background: linear-gradient(to right,black,white);
}

#rainbow-color-btn {
    background: linear-gradient(to right, red,orange,yellow,lime,aqua,blue,magenta );
}


#terminal-reward-container {
    height: 34vh;
}

.label-container {
    height: 3vh;
}

.label {
    padding: 5px;
    display: inline-block;
    background-color: var(--purple);
    color: var(--white);
    font-size: 15px;
    cursor: default;
    position: absolute;
    bottom: 0;
    z-index: 1000;
}

#code-editor {
    height: 100%;
}

.highlighted-text {
    background-color: #90EE90;
}

#output {
    background-color: white;
    position: relative;
    float: left;
}

.mid-col-2nd-row-container {
    height: 95%;
    width: 100%;
    padding: 3px;
    background-color: var(--mid-gray);
}

#message, #replay {
    padding: 10px;
    font-size: 15px;
    overflow-y: auto;
}

#replay {
    display: none;
}

.reward {
    position: relative;
    text-align: center;
    top: 10px;
    font-size: 12px;
}

.star {
    display: block;
    margin: 25px auto auto auto;
}

#next, #reset {
    display: none;
    margin: 30px auto auto auto;
}

#next {
    background-color: var(--yellow);
}

#reset {
    background-color: var(--purple);
}

.instruction {
    display: none;
    position: absolute;
    top: 25%;
    left: 10%;
    width: 75%;
    padding: 5px;
    border: 5px solid #673AB7;
    background-color: white;
    z-index: 9999;
    overflow: auto;
}

#toolbox-container {
    padding-top: 20px;
}

.end {
  width: 75%;
  bottom: 1%;
  position: absolute;
}

.end-password {
  width: 100%;
}

.password {
    margin: auto auto 20px auto;
}

.err {
    display: inline-block;
    position: relative;
}

.err:before {
    content: "~~~~~~~~~~~~";
    font-size: 0.6em;
    font-weight: 700;
    font-family: Times New Roman, Serif;
    color: red;
    width: 100%;
    position: absolute;
    top: 12px;
    left: -1px;
    overflow: hidden;
}

.red-text {
    color: red;
    font-weight: bold;
}

.blue-text {
    color: blue;
    font-weight: bold;
}

.purple-text {
    color: var(--purple);
    font-weight: bold;
}

.replay-button {
    margin-right: 5px;
    margin-top: 5px;
}