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

body {
  min-height: 100vh;background-color: cadetblue;
}

hr {
    border: .5px solid rgba(172, 208, 118, .5);
}

.hor1 {
    height: 25vh;
    max-width: 780px;
    margin: auto;
    padding: 10px;
}

.hor1 ul {
    text-align: center;
    box-shadow: 0 0 25px rgba(1, 2, 3, 0.9);
}

.hor1 ul li {
    display: inline-block;
}

.hor1 ul li a {
    padding: 19px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: navy;
    font-size: 24px;
    text-decoration: none;
    display: block;
}

.hor1 ul li a:hover {
    box-shadow: 0 0 10px #222;
    background: rgba(195, 50, 50, 0.1);
}

/* just a divider */  /* kinda cheated below when I saw that just changing the max-width to a smaller dim would make the nav vertical */

.vert1 {
    height: 43vh;
    max-width: 200px;
    margin: auto;
    padding: 10px;
}

.vert1 ul {
    text-align: center;
    box-shadow: 0 0 25px rgba(1, 2, 3, 0.9);
}

.vert1 ul li {
    display: inline-block;
}

.vert1 ul li a {
    padding: 19px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: navy;
    font-size: 24px;
    text-decoration: none;
    display: block;
}

.vert1 ul li a:hover {
    box-shadow: 0 0 10px #222;
    background: rgba(227, 98, 98, 0.1);
}

/* just a divider */

.hor2 {
    display: flex;
    justify-content: center;
    margin: 8px;
}

.hor2 li {
    display: inline-block;
    width: 100px;
    height: 75px;
    text-align: center;
    list-style: none;
}

.hor2 a {
    font-size: 24px;
    color: #222;
    text-decoration: none;
    transition: .75s;
}

.hor2 a:hover {
    color: rgb(200, 55, 55);
    text-decoration: overline underline;
    text-decoration-color: #222;
}

/* just a divider */

.vert2 {
    display: flex;
    justify-content: center;
    margin: 8px auto;
    max-width: 200px;
}

.vert2 li {
    display: inline-block;
    width: 100px;
    height: 75px;
    text-align: center;
    list-style: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.vert2 a {
    font-size: 24px;
    color: #222;
    text-decoration: none;
    transition: .75s;
}

.vert2 a:hover {
    color: hotpink;
    text-shadow: 1px 1px 1px #222;
    text-decoration-color: #222;
    font-style: italic;
}

/* Just a divider */

.grd {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.grd nav ul {
    display: grid;
    grid-template-rows: 150px 150px 150px;
    grid-template-columns: 150px 150px 150px;
    list-style: none;
}

.grd nav ul a {
    justify-content: center;
}

.grd a:hover {
    background-color: aqua;
}

img {
    width: 150px;
    height: 150px;
}