styles.css

/* # BASICS */

*{
    padding: 0px;
    margin: 0px;
} /* set padding and margin to 0 as default */

body {
    color: rgb(233, 225, 158);
    background: rgb(38, 15, 32);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* # HEADER */

header {
    height: 80px;
    background: rgb(18, 12, 17);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

/* ## DRAMATIC TITLE */

header div {
    font-size: xx-large;
    text-align: center;
    color: rgb(248, 237, 151);
}

/* ## NAVIGATION */

nav a {
    background: rgb(251, 77, 189);
    border-style: solid;
    border-color: rgb(248, 237, 151);
    border-width: 1px;
}

nav.leftnav {
    min-width: 400px;
}

nav.leftnav ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}

nav.leftnav a {
    font-size: large;
    color: black;
    padding: 20px 20px 20px 20px;
}

nav.rightnav a{
    background-image: url("./images/itsfine.png");
    background-size: 70px;
    background-repeat: no-repeat;
    display: inline-block;
    padding: 20px 0 20px 0;
    color: rgba(0, 0, 0, 0);
    background-position: center;
}

/* # BODY */

section {
    margin: 5vh 10vw;
}

p {
    font-family:"Comic Sans MS", "Comic Sans";
}

button {
    border: none;
    background: rgb(248, 237, 151);
    color: rgb(38, 15, 32);
    padding: 5px;
    border-radius: 10%; /*Rounded corners!*/
}

.evil {
    color:red;
}

/* ## FAME */

.fame {
    display: flex;
    justify-content: space-around;
    /* background-color: aqua; */
}

.famebox {
    padding: 30px;
    background-color: rgb(251, 77, 189);
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    max-height: 70%;
    max-width: 20%;
    border-style: solid;
    border-color: rgb(248, 237, 151);
}

.fameimg {
    max-width: 80%;
    max-height: 70%;
}

.fametext {
    width: 350px;
    background-color: rgb(248, 237, 151);
    color: rgb(38, 15, 32);
    padding: 10px 20px;
    max-width: 90%;
}

.fametext h1 {
    text-align: center;
}

.fametext ul {
    list-style-type: square;
    line-height: 1.5;
    margin-left: 10px;
}

/* # FOOTER */

.hell {
    color: rgba(0, 0, 0, 0); /* make text invisible, but keep it so webreaders still work */
    background-image: url("./images/fireofhell.gif");
    background-repeat: repeat-x;
    bottom: 0; /* put it at the bottom of the screen */
    position: fixed; /* make sure it doesn't move as you scroll */
    filter:hue-rotate(-70deg); /* make flames purple */
    background-size: 300px; /* rescales image */
    height: 15vh;
    width: 100%;
}

.god {
    background-image: url("./images/sansening.png");
}