/* colour palette */
/* CSS HEX */
:root {
    --umber: #6c5a49ff;
    --russian-green: #629460ff;
    --magenta-dye: #c60f7bff;
    --dark-jungle-green: #01110aff;
    --platinum: #eaeaeaff;
}

/* CSS HSL
--umber: hsla(29, 19%, 35%, 1);
--russian-green: hsla(118, 21%, 48%, 1);
--magenta-dye: hsla(325, 86%, 42%, 1);
--dark-jungle-green: hsla(154, 89%, 4%, 1);
--platinum: hsla(0, 0%, 92%, 1);*/

/* SCSS HEX
$umber: #6c5a49ff;
$russian-green: #629460ff;
$magenta-dye: #c60f7bff;
$dark-jungle-green: #01110aff;
$platinum: #eaeaeaff;*/

/* SCSS HSL
$umber: hsla(29, 19%, 35%, 1);
$russian-green: hsla(118, 21%, 48%, 1);
$magenta-dye: hsla(325, 86%, 42%, 1);
$dark-jungle-green: hsla(154, 89%, 4%, 1);
$platinum: hsla(0, 0%, 92%, 1);*/

/* SCSS RGB
$umber: rgba(108, 90, 73, 1);
$russian-green: rgba(98, 148, 96, 1);
$magenta-dye: rgba(198, 15, 123, 1);
$dark-jungle-green: rgba(1, 17, 10, 1);
$platinum: rgba(234, 234, 234, 1);*/

/* SCSS Gradient
$gradient-top: linear-gradient(0deg, #6c5a49ff, #629460ff, #c60f7bff, #01110aff, #eaeaeaff);
$gradient-right: linear-gradient(90deg, #6c5a49ff, #629460ff, #c60f7bff, #01110aff, #eaeaeaff);
$gradient-bottom: linear-gradient(180deg, #6c5a49ff, #629460ff, #c60f7bff, #01110aff, #eaeaeaff);
$gradient-left: linear-gradient(270deg, #6c5a49ff, #629460ff, #c60f7bff, #01110aff, #eaeaeaff);
$gradient-top-right: linear-gradient(45deg, #6c5a49ff, #629460ff, #c60f7bff, #01110aff, #eaeaeaff);
$gradient-bottom-right: linear-gradient(135deg, #6c5a49ff, #629460ff, #c60f7bff, #01110aff, #eaeaeaff);
$gradient-top-left: linear-gradient(225deg, #6c5a49ff, #629460ff, #c60f7bff, #01110aff, #eaeaeaff);
$gradient-bottom-left: linear-gradient(315deg, #6c5a49ff, #629460ff, #c60f7bff, #01110aff, #eaeaeaff);
$gradient-radial: radial-gradient(#6c5a49ff, #629460ff, #c60f7bff, #01110aff, #eaeaeaff);*/



body {
    text-align: center;
    background-color: var(--platinum);
    color: var(--dark-jungle-green);
}

nav {
    margin-bottom: 15px;
}

a, a:visited {
    text-decoration: none;
    display: block;
    margin: 10px 0;
    color: var(--magenta-dye);
    font-weight: bold;
}

p {
    padding: 0px;
    margin: 10px 0px;
    font-size: 1rem;
}

p.about {
    margin-bottom: 40px;
    line-height: 1.2rem;
}

.project {
    width: 60%;
    margin: 0 auto;
    padding: 10px;
}

.project:hover {
    background-color: var(--russian-green);
    color: var(--dark-jungle-green);
    border-radius: 2px;
    box-shadow: 0px 20px 20px rgba(0,0,0,0.2);
}

hr {
    width: 70%;
    height: 5px;
    border-style: groove;
}

h1 {
    display: inline-block;
    font-family: 'Lobster', cursive;
    font-size: 4rem;
    margin: 1rem 0px;
    word-break: break-all;
    overflow-wrap: break-word;
}

h2 {
    display: inline-block;
    margin-bottom: 0px;
    margin-top: 0px;
}

.subheading {
    max-width: 80%;
}

h3 {
    margin: 10px 0px;
}

#resume-link {
    color: var(--russian-green)
}

#resume-link:hover {
    background-color: var(--magenta-dye);
    color: var(--dark-jungle-green)
}

#numIters {
    margin-top: 10px;
}

#resultsDiv, form .ACA2D {
    display: none;
}

.good {
    color: green;
}

.bad {
    color: red;
}

footer {
    font-weight: 900;
}

/* buttons */

nav button {
    font-size: 1.2rem;
    font-weight: bold;
}

button {
    font-size: 1rem;
    background-color: greenyellow;
    border: 3px black solid;
    border-radius: 12px;
    padding: 10px;
    margin: 10px;
}

button.home {
    background-color: indigo;
    color: white;
    font-size: 0.8rem;
    margin-top: 10px;
}

#toggleFormButton {
    left: 10px;
}

#refreshButton {
    left: 70px;
}

#runButton {
    left: 130px;
}

#nextButton {
    left: 190px;
}

button:hover {
    background-color: hotpink;
    cursor: pointer;
}

button:active {
    background-color: darkgreen;
}

button[type="submit"] {
    font-size: 2rem;
}

button.active {
    background-color: hotpink;
    border: 5px black dashed;
}

/* cellular automata drawing */

table {
    border-spacing: 0px;
    margin-left: auto;
    margin-right: auto;
}

td {
    width: 10px;
    height: 10px;
    /* width: 3px;
    height: 3px; */
    padding: 0px;
}

/* form elements */

.number {
    font-size: 1.25rem;
    font-family: 'Courier New', Courier, monospace;
}

.equation {
    font-family: 'Courier New', Courier, monospace;
    display: block;
    margin: 30px 40px;
}

.variable {
    font-family: 'Courier New', Courier, monospace;
}

.pick-color {
    width: 40px;
    height: 40px;
    border: 3px black solid;
    border-radius: 100%;
    background-color: black;
    margin: 2px 0px;
}