/*nav{
    position:fixed;
    bottom:5em;
    left:1em;
    right:1em;

    text-align:center;
    font-size: 6px;
}
/*
nav a{ a link inside the nav
    font-size:.75em;
    remove underline
    text-decoration:none;
    color: rgb(0, 0, 0);

    border: .5px solid gray;
    border-radius: 10%; perfect circle is 50%

    padding:.5em;
    display: inline-block;

    background: rgba(222, 222, 248, 0.448);
    backdrop-filter: blur(5px);
    filter: drop-shadow (5px 5px 0px blue)
    
    font-family
}
*/

body{
    /* margin-top: 100px; */
    margin-bottom: 100px;
}

nav{
    position: fixed;
    bottom:5em;
    left:1em;
    right:1em;

    line-height: 1;
    font-size: 12px;
    font-family: "Times New Roman", serif;
}

nav a{
    text-decoration: none;
    color: rgb(0, 0, 134);

    border: .5px solid rgba(0, 0, 134, 0.644);
    height: 20px;
    width: 40px;
    text-align: center;
    border-radius: 10%;

    padding: .5em;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(238, 250, 255, 0.656);
    backdrop-filter: blur(1px);
}

nav a:hover{
    background-color: rgba(234, 246, 71, 0.448);
}

a.next{
    position:absolute;
    right:0;
}

a.previous{
    position:absolute;
    left:0;
}

body.home{
    margin: 5em;
}

body.home a { /*when the body has a class of home, a means inside of*/
    background: rgb(238, 250, 255);

    font-size:1.25px;
    text-decoration: none;
    color: rgb(0, 0, 134);
    padding: 1em;
    border: 1px solid rgb(0, 0, 134, 0.644);

    margin-right:0.5em;
    margin-bottom:0.5em;

    display: inline-block;
    border-radius: 30%;

    /* font family:  */
}

.moon{
    background: rgb(238, 250, 255, 0.656);
    backdrop-filter: blur(1px);

    font-size:30px;
    text-decoration: none;
    
    padding: 4px;
    border: .5px solid rgb(0, 0, 134, 0.644);
    height: 40px;
    width: 40px;


    margin-right:0.5em;
    margin-bottom:0.5em;

    border-radius: 30%;
    

    bottom: 0;
    right: 50%;
    position: fixed;

    display: flex;
    align-items: center;
    justify-content: center;
}

.moon a{
    text-decoration:none;
    color: rgb(0, 0, 134);
}

.moon:hover{
    background-color: rgba(240, 255, 37, 0.448);
}
 
#grid.home{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1f;
    text-align: center;
    height: 20vh; /*vh is the percent of what is displayed */

    box-sizing: border-box;
} 

/* { the asterik is the universal symbol */
   


#grid a{
    padding: 2em;
    font-size:2em;
}

#grid a:hover{
    background-color: rgba(240, 255, 37, 0.448);
}
/* could also do (allows for easier/expansive changes since we already copied nav a things to body:
nav a, 
body.home a{
    font-size:1.5em;
    text-decoration:none;
    color: rgb(0, 0, 0);

    border: .5px solid gray;
    border-radius: 10%; 

    padding:.5em;
    display: inline-block;

    background: rgba(128, 128, 128, 0.246);
    backdrop-filter: blur(5px);
    filter: drop-shadow (5px 5px 0px blue)
}

/* another option: */
/*
nav a{
    font-size: 2em;
    text-decoration: none;
    padding: 1em;


a.previous{
    position: fixed;
    top:0;
    left:0;
    right:0;
    background-color: pink;
    text-align: center;

a.next{
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    background-color: pink;
    text-align: center;

**need to make up/down a href


**the problem is that the navigation is overlapping the actual text.... so do this:
body{
    margin-top: 2.5em;
    margin-bottom: 2.5em;
*/