:root {
    --navLink-color1: #000;
    --mainText-color1: #000;
    --mainHeader-color: #3392FF;
    --mainBackground-color: #faebd7;
    --card-color: #3392ff96;
}

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

html, body {
    min-height: 100%;
}

body {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
}
/* Header */

header {
    height: 75px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

header .buttons {
    width: 300px;
    display: flex;
    justify-content: space-evenly;
}

header button {
    padding: 10px;
    font-size: 15px;
}

/* Main Sheet */

.sheetHeading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.sheetHeading select {
    font-size: 25px;
}

.sheetTitle {
    height: 50px;
    font-size: 40px;
    margin-bottom: 15px;
}

.card {
    height: 250px;
    width: 250px;
    justify-self: center;
}

.problem {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    
}

.problem .problemNum {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}

.problem .topNum {
    align-self: center;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

.problem .sign {
    font-size: 35px;
    align-self: center;
    justify-self: center;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}

.problem .bottomNum {
    align-self: center;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
}

.problem .answer {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
    height: 35px;
    border-top: 1px solid #000;
}

.problem .topNum,
.problem .bottomNum,
.problem .divisionBottom {
    text-align: center;
    font-size: 25px;
}

.problem .divisionTop {
    border-top: 1.5px solid #000;
    border-left: 1.5px solid #000;
    padding-top: 5px;
}

.problem .divisionBottom {
    align-self: center;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    padding-top: 5px;
}

.problem .divisionAnswer {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
    height: 35px;
    border: none;
}

#divisionNote {
    margin-top: 10px;
}

.hide {
    visibility: hidden;
}

.floatingHome {
    position: fixed;
    top: 150px;
    right: 25px;
    color: #fafafa;
    font-size: 24px;
    text-decoration: none;
    background-color: var(--card-color);
    padding: 10px;
    border-radius: 25px;
}

/* Printing */

@media print {
    .noPrint {
        visibility: hidden;
    }
}