style.css

/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/

:root {
  --wrapper-height: 100vh;
  --image-max-width: 200px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: "Roboto", sans-serif;
  background: linear-gradient(#F9E900, #ED33B9);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Very light scaling for our illustration */
.title {
  color: #5158BB;
  font-family: "Sedgwick Ave Display", cursive;
  font-style: normal;
  font-weight: bold;
  font-size: 80px;
  margin: 0;
}

/* Very light scaling for our illustration */
.illustration {
  max-width: 100%;
  max-height: var(--image-max-width);
}

/* Button - Add it from the README instructions */
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: 500ms;
}

/* Subheading */
h2 {
  color: #2800FF;
}

/* Interactive image */
.illustration:active {
  transform: translateY(5px);
}

/* Button dip
- Toggling this class on and off will move it down and up again
- The button transition property above determines the speed of the translate (500ms)
*/
.dipped {
  transform: translateY(5px);
}

#locator {
  display: flex;
}
#locatorText {
  font-size: 40px;
  color: #5158BB;
}

#navigation {
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  box-shadow: 20px 20px 50px grey;
  display: flex;
  justify-content: space-between;
  color: #5158BB;
  background-color: #F9E900;
}
#left {
  font-family: "Sedgwick Ave Display", cursive;
  margin-left: 10px;
  display: flex;
  align-items: center;
}
#right {
  color: #5158BB;
  display: flex;
  width: 50%;
  justify-content: space-around;
  list-style-type: none;
}
a {
  text-decoration: none;
  color: #5158BB;
}
a:hover {
  text-decoration: underline;
}

#gallery img {
  height: 250px;
  border: 5px ridge #F9E900;
}
#gallery {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 20px;
  text-align: center;
}
.header {
  color: #5158BB;
  font-family: "Sedgwick Ave Display", cursive;
  font-style: normal;
  font-weight: bold;
  font-size: 50px;
  margin-top: 7%;
  text-decoration: underline wavy;
}
#addArt {
  display: flex;
  flex-direction: column;
}
#imgurl {
  margin-left: 45px;
}
.experienceImgs {
  max-width: 300px;
}
.experiences {
  text-align: center;
}
.donations {
  color: #5158BB;
  text-align: center;
  width: 100vh;
  height: 75vh;
  display: flex;
  justify-content: space-around;
}

.vl {
  border-left: 3px solid #94C9A9;
  height: 92%;
}
h1,
h2,
h3 {
  color: #5158BB;
}
.institutions,
.supplies,
.volunteer {
  color: black;
}