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

body {
    background-color: #f5f5f5;
}

header {
    border: 2px solid gray;
    padding: 10px;
    width: 100vw; margin: 0 auto;
}

header h1 {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin-bottom: 10px;
}

header p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-bottom: 15px;
}

.gallery {
    margin: 0 auto;
    margin-bottom: 30px;
    background-color: #fff;
    width: 80%;
    box-shadow: 0 1px 6px -1px rgb(0 0 0 / 10%);
    border-radius: 3px;
    padding: 30px;
    position: relative;
    height: 1150px;
    margin-top: 10px;
}

.gallery ul {
    font-family: "Segoe UI", sans-serif;
    list-style-type: none;
    position: absolute; top: 5%; left: 0;
    padding-left: 22px; padding-bottom: 32px;
    width: 90%;
    margin-left: 6%;
}

.card {
    margin-left: 3%; margin-right: 3%; margin-top: 2%; margin-bottom: 2%; 
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 250px; height: 300px;
    display: inline-block;
    /* Add shadows to create the "card" effect: https://www.w3schools.com/howto/howto_css_cards.asp */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

.card img {
    width: 100%; height: 75%;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    /* Continued notes from Ralph's video: https://www.youtube.com/watch?v=fgZGqN3AUMY
    box-shadow: 0px 10px 40px #222;
    width: 202px; height: 303px;
    */
}

.card a:link, a:visited {
    color: #222;
    text-decoration: none;
}

.container2 {
    margin-top: 20px;
    padding: 2px 16px;
  }

ul h4 {
    font-size: 1.2em;
}