:root{
    --c1: #002554;
    --c2: #5D8AA8;
    --c3: #D6D6D6;
    --c4: #465775;
    --c5: #C3423F;
    --c6: #26292C;
    --c7: #F5F5F5;

}

*{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

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

body > p, body > h1, body > h3{
    color: var(--c7);
}

#calcContainer{
    border: var(--c6), 3px, solid;
    border-radius: 15px;
    background-color: var(--c3);
    width: 400px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.gradeInput {
    width: 30px;
    height: 20px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-color: var(--c6);
    border-radius: 3px;
}

#output{
    margin-top: 10px;;
}

#warning{
    background-color: var(--c5);
}

#danger{
    background-color: var(--c4);
}

#wayToGo{
    background-color: var(--c4);
}

#wayToGo, #danger, #warning{
    display: none;
    max-width: 80%;
    border: var(--c6) 5px solid;
    border-radius: 10px;
    margin: 20px auto;
    padding: 5px;
}

#sGradeOutput{
    display: none;
}

#calculate{
    padding: 10px;
    margin: 10px;
    font-size: large;
}

#info{
    font-size:medium;
    font-style: bold;
    max-width: 400px;
}
#info2, #calc{
    font-size: small;
    font-style: italic;
    max-width: 400px;
}

#instructions{
    max-width: 400px;
}

.warnText, #dangerZone, #w2g{
    color: var(--c7);
}

.percentage{
    width: auto;
    margin-right: 23%;
    text-align: right;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}