/* --------------------------THE STRUCTURE OF THE SITE--------------------------------*/
* {
    padding:    0; 
    margin:     0;
    box-sizing:     border-box;
}

body {
    margin: auto;
    width: 50%;
    padding: 3%;
    font-size: 100%;
    
    color: black;
    font-family: "Times New Roman", Times, serif;
    background-color: #f9dcdc;
    background-image: radial-gradient(#edb2b2 8px, transparent 6px);  /* Create a pokadot background */
    background-size: 60px 60px; /* Keeps background in frame */
}

.container { /* Container where we place our content */
    padding: 5% 4% 4% 4%;
    text-align: center;
    background-color: #f5c3c2;
    border-radius: 25px;
    border: 5px solid whitesmoke;
}

h1 {
    font-size: 2.5rem;
    border-bottom: 3px solid whitesmoke;
}

h3 {
    padding-top: 1rem;
    font-style: italic;
}

#firstBox { /* The content in the first page */
    padding: 1rem 0;
}

#firstBox h3 {
    padding-bottom: 2rem;
}

.customField { /* Customize all fields (where user inputs) */
    padding: 5px;
    border-radius: 25px;
    border-color: gray;
    box-sizing: border-box;
}

.customButton { /* Customize all buttons */
    padding: 6px;
    margin-left: 7px;
    border-radius: 25px;
    border-color: black;
    box-sizing: border-box;
}

ul.gradeList { /* Info on 3rd page about student grade and if they passed/failed */
    list-style-type: none;
    margin: 20px 0px;
    padding: 0;
    line-height: 20px;
    font-size: large;
}


.footer { /* Extra space in the bottom of the page */
    padding-top: 2rem;
}