/* ---universal css--- */
html{
    font-size: 10px;
}

body{
    font-size: 1.6rem;
    text-align: center;
    background-color: #506070;
    color: lightcyan;
    font-family: "Cormorant", serif;
    font-weight: 600;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 5px;
    padding: 5px;
}

/* ---visible sections--- */
header{
    grid-column: span 12;
    font-family: "Cormorant SC", serif;
    color: #90a0b0;
    border-bottom: solid 2px #405060;
    border-radius: 10px;
}

.border{
    grid-column-start: 2;
    grid-column-end: 12;
    background: linear-gradient(#405060, #90a0b0);
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
}

form{
    grid-column-start: 2;
    grid-column-end: 12;
    background-color: slategrey;
    padding: 5px;
    border-radius: 5px;
}

form, .prompt{
    border-top: solid 3px rgba(64, 80, 96, 0.5);
    border-bottom: solid 3px rgba(144, 160, 176, 0.5);
}

form h2{
    font-weight: 400;
}

/* ---input elements--- */
table{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.radio{
    text-align: left;
    width: fit-content;
    position: relative;
}

input{
    font-family: "Cormorant SC", serif;
    font-weight: 700;
    background-color: slategrey;
    color: lightcyan;
    border: solid 1px #405060;
    border-radius: 3px;
    transition: all 0.2s;
}
/* start of code from https://stackoverflow.com/questions/45396280/customizing-increment-arrows-on-input-of-type-number-using-css */
input[type="number"] {
    -webkit-appearance: textfield;
       -moz-appearance: textfield;
            appearance: textfield;
    font-size: 3rem;
    text-align: center;
    line-height: 4.4rem;
    width: 4rem;
    margin-bottom: 15px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
}
/* end of code from https://stackoverflow.com/questions/45396280/customizing-increment-arrows-on-input-of-type-number-using-css */
input[type=button]:hover{
    background: #506070;
    color: #90a0b0;
}

#submit{
    padding: 5px;
    font-size: 2rem;
}

/* ---result--- */
#prompts{
    grid-column-start: 3;
    grid-column-end: 11;
}

.prompt{
    padding: 10px;
    border-radius: 5px;
}

/* .colour{
    line-height: 2em;
    border: solid 1px #405060;
    border-radius: 3px;
    display: inline;
} */

.fire{
    background-color: firebrick;
}

.water{
    background-color: darkcyan;
}

.wind{
    background-color: slateblue;
}

.plant{
    background-color: forestgreen;
}

.rock{
    background-color: slategrey;
}

.lightning{
    background-color: goldenrod;
}