/* Hello Computer Science 3 students. You may copy and edit anyting you find here to use when making your own websites. Remember to include the Creative Commons copyright notice! */


/* the html tag comes with a margein by default. We remove the margin so that the navagation menu will appear flus with the edges of the browser. */
html {
    margin:0;   
}

/* set all of the formating that we will always use no matter what */

body {       
    font-size:1em;
    background-color: lightslategray;
}

.main-nav {
    background-color: lightblue;
    font-family: Verdana,sans-serif; 
    /*  border radius is not set for nav because nav will be difrent depending on that screen size the user has. So we set it when we check format for screen size. Default is to not have it.*/
    margin:0px;
    padding:8px;
}

.main-content {
    background-color: lightblue;
    font-family: Verdana,sans-serif; 
    border-radius: 20px;
    margin:8px;
    padding:8px;
}

.main-head {
    background-color: lightblue;
    font-family:  Georgia,serif;
    text-align: center;
    border-radius: 20px;
    margin:8px;
    padding:8px;
}

.main-footer {
    background-color: lightblue;
    font-family:  Georgia,serif;
    text-align: center;
    border-radius: 20px;
    margin:8px;
    padding:8px;
}

h1, h2, h3{
    display: inline;
}

a, label {
    color: lightslategray;
}

a:hover {
    color: lightcyan;
}

/* the user may not have some fonts instaled on their computer. This will force the browser to download and use the fonts we want even if the font is not on the uers compuer. Also, this will replace the font-family that is set for the header. This method is not 100% supported, but for a small personal website we do not need this to be 'bulletproof' */

@font-face {
    font-family: JackPolymath;
    src: url(../fonts/BPmolecules.woff2);
}
@font-face {
    font-family: JackTeacher;
    src: url(../fonts/EraserRegular.woff2);
}
@font-face {
    font-family: JackTraveler;
    src: url(../fonts/Old_stamper.woff2);
}       

.polymathFont {
    font-family: JackPolymath;
}
.teacherFont {
    font-family: JackTeacher;
}
.travelerFont {
    font-family: JackTraveler;
}

/* Hide Hamburger */

.hamburger{
    display: none; 
}
.hamburger:checked ~ .ham-menu { 
     display:block;
}
.ham-menu {
    display: none;
    list-style: none;
    padding-left: 8px;
}
.ham-link {
    font-size: xx-large;
    padding-left: 8px;
}

/* this will set the names that we will use for making the grid format. Using names that are all the same length will make the code very easy to read and understand. */

.main-nav {
    grid-area: n;
}
.main-content {
    grid-area: c;
}
.main-footer {
    grid-area: f;
}
.main-head {
    grid-area: h;
}


/* because we set the body tag with a class of jackbox, this will be used as the layout always no matter what the screen size */

.jacksbox {
    
    border: 0px;
    margin:0; 
    padding:0;
    display: grid;
    grid-template-areas: 
        "n"
        "h"
        "c"
        "f";
    
}