* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: rgb(129, 118, 118);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(0, 0, 0);
}

header {
    background-color: wheat;
    height: 140px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

header h1 {
    text-align: center;
    margin: 8px;
    font-weight: normal;
    color: grey
}

header nav ul {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    padding: 16px 8px
}

header nav li {
    height: 60px;
}

header nav li a {
    border: 1px solid rebeccapurple;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 60px;
    text-decoration: none;
    font-size: 20pt;
}

header nav li a:hover {
    background-color: orangered;
}

header nav li a:active {
    background-color: crimson;
}

article {
    border: 4px solid transparent;
    min-height: 100svh;
    padding: 160px 8px 8px 8px;
    max-width: 750px;
    margin: 0 auto 16px auto;
}

article h2 {
    color: lime;
    font-weight: normal;
    background-color: rebeccapurple;
    padding: 4px 16px 4px 4px;
    margin-bottom: 16px;
    text-align: right;
    text-transform: uppercase;
}

article p,
article ul {
    line-height: 1.8;
    font-size: 1.2rem;
}

article ul {
    margin-left: 32px;
}

#grid .calc {
    display: grid;
    /* Grid parent */
    gap: 8px;
    grid-template-columns: repeat(5, 1fr);
}

#grid .calc .formula,
#grid .calc .output {
    grid-column: 1/6;
    text-align: right;
    padding-right: 1svw;
    background-color: rgb(53, 53, 53);
    color: whitesmoke;
}

#grid .calc .output {
    font-weight: bold;
    font-size: 22pt;
}

#grid .calc .zero {
    grid-column: 1/3;
}

#grid .calc>div {
    border: 1px solid black;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 16pt;
}

#grid .calc .num {
    background-color: #DDD;
}

#grid .calc .math {
    background-color: #BBB;
}

/* FLEXBOX CODE */

#flexbox .calcbox {
    display: flex;
    flex-flow: row wrap;
}

#flexbox .calc {
    display: flex;
    flex-flow: column wrap;
    gap: 1px;
}



#flexbox .calc .formula {
    display: flex;
    flex-direction: column wrap;
    flex: 1 0 0;
    border: 1px solid black;
    justify-content: right;
}

#flexbox .calc .output, #flexbox .calc .formula {
    padding-right: 1svw;
    padding: 10px;
    font-size: 18pt;
    font-weight: bold;
}

#flexbox .inout {
    display: flex;
    flex-flow: column wrap;
    flex: 1 0 0;
    border: 1px solid black;
    justify-content: right;
    text-align: right;
}

#flexbox .nums {
    display: flex;
    flex-flow: row wrap;
    flex: 1 0 0;
    gap: 8px;
    justify-content: space-around;
}

#flexbox .nums .num {
    display: flex;
    flex: 1 0 16%;
    border: 1px solid black;
    min-height: 60px;
    justify-content: space-evenly;
}
 
/* TABLE CODE */

#table .calc {
    font-size: 16pt;
    width: 100%;
}

#table .inout {
    min-width: 100%;
    text-align: right;
    border: 5px solid white;
    height: .5in;
    padding: 25px;
}

#table .calc th {
    font-weight: bolder;
    font-size: 24pt;
    background-color: rgb(0, 0, 0, .26);
}

#table .calc tr th:not(th.inout), #table .calc tr td {
    border: 5px solid white;
    text-align: center;
    vertical-align: middle;
    height: .5in;
    padding: 25px;
    gap: 10px;
}

#table .calc .num {
    background-color: rgba(212, 212, 212, 0.496);
}

#table .calc .reset {
    background-color: rgba(255, 140, 0, 0.496);
}

#table .calc .signs {
    background-color: rgba(111, 110, 110, 0.496);
}