@import url("https://fonts.googleapis.com/css2?family=Bitcount+Single:wght@100..900&family=Black+Ops+One&family=Geo:ital@0;1&family=Long+Cang&family=Lugrasimo&display=swap");

body {
    background-image: url(bg1_bright.jpg);
    color: whitesmoke;
    background-size: 100%;
}

h2 {
    font-size: 25px;
}
a { color: aqua;
}
p{
    /*align-content: center;*/
      font-family: "Lugrasimo", cursive;
    text-align: left;
    font-size: 20px;
    padding-left: 10px;
    position: relative;
}
div.heading {
    font-size: 40px;
    align-content: center;
    font-family: "Lugrasimo", cursive;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

div.paragraph {
    background-color: rgba(16, 16, 16, 0.3);
    margin-left: 100px;
    margin-right: 100px;
    padding: 40px;
    font-family: "Lugrasimo", cursive;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
}

/*
div.ImNot {
    background-image: url(bg1_bright.jpg);
    width: 400px;
    height: 300px;
    display: block;
}

div.ImNot: hover {
background-image: url(bg_dithered.jpg);
}
*/
div.imgGrid {
    display: flex;
   padding-left: 10%;
    padding-right: 10%;
}

div.column {
    flex: 20%;
}
.container .hover-image {
    /*
    width: 300px;
    height: 300px;
    */
    display: none;
    /*padding: 20px;*/
}

.container:hover .initial {
    width: 300px;
    height: 300px;
    display: none;
    /*padding: 20px;*/
}

.container:hover .hover-image {
    /*
    width: 300px;
    height: 300px;
    */
    display: block;
    /*padding: 20px;*/
}