/* ==================reset rule================== */

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

/* ==================page styles================== */

body {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    background-color: bisque;
    color: darkseagreen;
    /* min-height: 2000px; */
}

header {
    font-family: cursive;
    background-color: antiquewhite;
    /* text-align: right; */
    border: darkseagreen double 5px;
    padding: 10px;
    margin: 5px;
    /* display: flex; */
    /* overflow: auto; */
    /* display: block; */
    overflow:hidden;
    max-height: 100px;
}

h1 {
    color: darkslateblue;
    /* float: left */
}

header span {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: italic;
    /* float: left; */
}

header h1 span {
    /* display: inline-block; */
    float: left;
}

#purple {
    background-color: darkslateblue;
    padding: 15px;
    /* display: inline-block; */
    float: right;
    border: darkseagreen 3px double;
    /* top: 10px; */
    transform: translateY(-40px);
}

#purple a {
    color:darkseagreen;
}

/* ====================NAV 1====================*/
/* horizontal */
header + #nav1 {
    background-color: antiquewhite;
    margin: 10px;
    /* height: 5vw; */
    border: darkseagreen solid 1px;
    text-align: center; 
    overflow: auto;
    position: sticky;
    top: 0px;
}

header + #nav1 a {
    color: darkseagreen;
    background-color: darkslateblue;
    border: darkseagreen 3px double;
    text-decoration: none;
    /* border-radius: 40%; */
    /* word-spacing: 10vw; */
    display: inline-block;
    padding: 5px;
    margin: 5px;
    float: right;
}

header + #nav1 a:hover {
    color: bisque;
}

header + #nav1 a:first-child {
    /* margin-right: 100px; */
    /* border-left: 100px; */
    float: left;
}

/* ================NAV 2=================== */
/* horizontal */
#nav2 {
    overflow: auto;
    /* background-image: linear-gradient(darkslateblue darkseagreen) */
    background-color: darkslateblue;
    border: darkseagreen 5px solid;
    padding: 20px;
    color: darkseagreen;
    text-align: center;
    /* margin: 13px auto; */
    margin-bottom: 15px;
}

#nav2 a {
    text-decoration: none;
    color: antiquewhite;
    border: darkseagreen 3px solid;
    border-radius: 50%;
    padding: 15px;
}

#nav2 a:first-child {
    background-color: antiquewhite;
    color: darkseagreen;
}

/* ================NAV 3=================== */
/* vertical */
#nav3 {
    /* background-color: seagreen; */
    display: block;
    background-color: darkslateblue;
    width: 225px;
    /* justify-content: left; */
    /* text-align: left; */
    flex-direction: column;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
}

#nav3 a {
    text-decoration: none;
    color: antiquewhite;
    border: 5px dotted darkseagreen;
    padding: 3px;
    margin: 10px;
}

#nav3 a:hover {
    color: darkseagreen;
}

/* ================NAV 4=================== */
/* vertical */
#nav4 {
    /* background-color: seagreen; */
    display: block;
    flex-direction: column;
    /* margin-left: 20px; */
    background-color: antiquewhite;
    width: 225px;
    float:inline-end;
}

#nav4 a {
    text-decoration: none;
    color:  darkseagreen;
    padding: 18px;
    border-left: darkslateblue 3px double;
}

#nav4 a:hover {
    color:darkslateblue;
    background-color: darkseagreen;
}

/* ================NAV 5=================== */
/* grid */
#nav5 {
    /* background-color: seagreen; */
    display: block;
    width: 260px;
    background-color: bisque;
    border: antiquewhite 10px double;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-left: 20px;
    height: 336px;
    background-image: radial-gradient(darkslateblue, darkseagreen, slateblue);
}

#nav5 a {
    text-decoration: none;
    color:darkslateblue;
    width: 114px;
    height:100px;
    background-color: antiquewhite;
    border: double darkseagreen 5px;
    margin-top: 5px;
    text-align: right;
    text-transform: uppercase;
    /* background-color: transparent; */
    backdrop-filter: blur;
    margin-left: 3px;
    text-shadow: slateblue -15px 10px 10px;
    font-size: 2em;
    
}

#nav5 a:hover {
    color: darkseagreen;
}

/* ==============OTHER NAV STUFF=============*/
#nav3, #nav4, #nav5 {
    /* background-color: seagreen; */
    display: flex;
    overflow: auto;
    height: 336px;
    /* margin: 30px; */
}

/* ================TEXT BODY================ */
.textbody {
    margin: 5vw;
    background-color: antiquewhite;
    padding: 10px;
    border: darkseagreen 2px dotted;
    /* color:darkslateblue; */
}

.textbody p{
    margin: 20px;
    border-left: solid 1px darkslateblue;
    padding-left: 5px;
}

.textbody p::first-line {
    color: darkslateblue;
}


/* ===========PAGE BOTTOM=========== */
footer {
    display: block;
    background-color: antiquewhite;
    /* width: 100vw; */
    border: darkseagreen 3px double;
    margin: 5px;
    text-align: center;
    /* font-style: bold; */
    font-family: cursive;
    color: darkslateblue;
    /* border-bottom: 0px; */
}