/* Fonts */
.kaushan-script-regular {
  font-family: "Kaushan Script";
  font-weight: 400;
  font-style: normal;
}

.noto-sans-mono-para {
  font-family: "Noto Sans Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body {
    text-align: center;
    background: plum;
    font-family: "Noto Sans Mono";
}

/* Creates background for nav bar buttons */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: pink;
}

ul li {
    display: inline-block;
}

/* Creates button for nav bar and widens it */
ul li a {
    display: block;
    color: blue;
    padding: 10px 30px;
    text-decoration: 0; /* So there's no underline on the text */
}

ul li a:hover {
    background-color: rgb(212, 54, 107);
    color: white;
}

/* Makes the text not run to the edges of the screen */
.para {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-style: solid;
    border-color: rgb(239, 34, 239);
    border-width: 5px;
    background-color: rgb(239, 34, 239);
    width: 800px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
}

/* Adds purple background to facts and removes line when button not clicked */
#fact {
    display: none;
    border-style: solid;
    border-color: rgb(239, 34, 239);
    background-color: rgb(239, 34, 239);
    border-width: 5px;
    border-radius: 10px;
    width: 500px;
    margin: auto;
    margin-top: 15px;
}

/* Shows fact when button is clicked */
#fact.show {
    display: block;
}

/* Made images the same size and next to each other */
.dv-images {
    width: 350px;
    height: 250px;
    object-fit: cover;
    margin: 10px;
    border-radius: 10px;
    border-color: purple;
    border-style: solid;
    border-width: 5px;
}

.resources-images {
    margin: 5px;
    border-color: purple;
    border-style: solid;
    border-width: 5px;
    border-radius: 5px;
}