style.css

/* Include non-standard fonts */
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap'); /* Not used */
@import url('https://fonts.googleapis.com/css?family=Crete+Round&display=swap');

body {
  margin: 0;
  background-color: #333333; /* same as footer bottom gradient color */
}

.content {
  background-color: white;
  padding: 2em;
}

h1, h2 {
  clear: both;
/*
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
*/
}

h1 {
  color: DarkSlateGray;
  text-align: center;
  font: 1.5em 'Nunito', sans-serif;
  font-weight: bold;
}

h2 {
  color: DarkSlateGray;
  text-align: left;
  font: 1.3em 'Nunito', sans-serif;
}

p, a {
  color: #333333;
  font: 1em 'Nunito', sans-serif;
/*
  margin-block-start: 0.4em;
  margin-block-end: 0.4em;
*/
}

pre {
  overflow-x: auto;
}

header {

  margin-top: 0;
  padding-top: 0;
  box-shadow: 0 0 1em 0 black; /* offset-x | offset-y | blur-radius | color */
  position: relative;
}

.topnav {
  margin: 0;
  width: 100%;
  overflow: hidden;
  background-color: #333333;

  display: flex;
  flex-wrap: nowrap;
  align-content: flex-end;
  justify-content: space-between;
  flex-direction: row;
  padding: 0em 0em;
}

.topnav .menu_logo {
  align-self: stretch;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.menu_logo img {
  margin: 0.5em 4vw;
  border: none;
  height: 3em;
}

.menu_logo p {
  color: WhiteSmoke;
  font: 1.5em 'Nunito', sans-serif;
  font-weight: bold;
}

.topnav .menu_link_container {
  align-self: stretch;

  display: none; /* Hide on mobile, use flex on desktop */
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-end;
  justify-content: flex-end;

}

.menu_link {
  padding: 1em;

/* Align text vertically */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.menu_link a {
  color: WhiteSmoke;
  text-align: center;
  text-decoration: none;
  cursor: grab;
}

.menu_button {
  /* Align text vertically */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.menu_button .fancy_button {
  background-color: WhiteSmoke;
  border: 0.1em solid black;
  border-radius: 0.3em;
  padding: 0.5em;
  margin: 0.3em 2vw 0.3em 1em;

  transition: 0.20s;
  -webkit-transition: 0.20s;
  -moz-transition: 0.20s;
  -ms-transition: 0.20s;
  -o-transition: 0.20s;
}

.fancy_button a {
  display: block;
  color: black;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  font-size: 1em;
}

.fancy_button:hover {
  background-color: orange;

  -webkit-transition: 0.20s;
  -moz-transition: 0.20s;
  -ms-transition: 0.20s;
  -o-transition: 0.20s;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}

.topnav .menu_expand {
  align-self: stretch;

  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
}

.menu_expand .material-icons {
  margin-right: 4vw;
  font-size: 2em;
  color: WhiteSmoke;
}

#mobile_menu {
  background-color: WhiteSmoke;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;

  /* For expanding/collapsing animation */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 0;
  -webkit-transition: max-height 0.3s ease-out;
  -moz-transition: max-height 0.3s ease-out;
  -ms-transition: max-height 0.3s ease-out;
  -o-transition: max-height 0.3s ease-out;
  transition: max-height 0.3s ease-out;
}

.mobile_menu_link {
  width: 100%;
  margin: 0;
  padding: 1em;

  transition: background-color 0.25s ease-in-out;
}

.mobile_menu_link:hover{
  background-color: orange;
}

.mobile_menu_link a {
  font-size: 1em;
  color: black;
  text-align: right;
  text-decoration: none;
}

footer {
  width: 100%;
  background-color: #444444;
  background-image: linear-gradient(#444444, #333333);
}

footer a, footer p, footer h2 {
  color: #BBBBBB;
/*
  margin-block-start: 0.6em;
  margin-block-end: 0.6em;
*/
  text-decoration: none;
}

.footer_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  padding: 0em 0em;

  border-top: 0.1em solid WhiteSmoke;
}

.footer_wrapper div {
  flex: 10;
  padding: 1em;
  align-self: stretch;

}

#footer_contact * {
  text-align: center;
}

#footer_center {
  display: none;
}

#footer_additional * {
  text-align: center;
}

figure {
  margin: 1em 0;
}

figcaption {
  text-align: center;
  color: DarkSlateGray;
  font: 1em 'Nunito', sans-serif;
  font-style: italic;
}


img {
  max-width: 100%; /* Make sure image never becomes too big */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.tilted_img {
  background-color: WhiteSmoke;
}

.tilted_img img {
  width: 100%;
}

form {
  width: 100%;
}

.form_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

form button {
  border: 0.1em solid #444444;
  background-color: white;
  border-radius: 0.5em;
  margin: 0.5em;
  padding: 0.5em;
  transition: background-color 0.25s ease-in-out;
  font: 1.0em 'Nunito', sans-serif;
}

form button:hover {
  background-color: orange;
}

form textarea, form input, form select {
  border: 0.1em solid #444444;
  border-radius: 0.5em;
  margin: 0.5em;
  padding: 0.5em;
  flex-grow: 1;
  font-size: 1.0em;
  font-family: 'Nunito', sans-serif;
}

form textarea:focus, form input:focus, form select:focus {
  background-color: orange;
}

form textarea {
  resize: none;
}

#email_input {
  width: 10em;
}

table {
  table-layout: fixed;
  width: 100%;
  padding: 1em;
}

th {
  text-align: center;
  font-size: 1.3em;
}

td {
  text-align: center;
}

video {
  width: 100%;
}

.hero {
  margin: 0;
  padding: 4em 3em;

  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  text-shadow: 0 0 1.5em #333333;
}

#hero_home {
  background-image: url("media/img/female_dog_litter_3.jpg");
}

#hero_sponsor {
  background-image: url("media/img/autumn_path.jpg");
}

#hero_mission {
  background-image: url("media/img/male_dog_trashcan.jpg");
}

.hero h1 {
  font-size: 2.5em;
  font-family: 'Crete Round', serif;
  color: WhiteSmoke;
}

.hero p {
  font-size: 1.5em;
  font-family: 'Nunito', sans-serif;
  color: WhiteSmoke;
  text-align: center;
}

.hero_button {
  background-color: WhiteSmoke;
  padding: 0.5em;
  border-radius: 0.3em;
  border: 0.1em solid #333333;
  margin-left: auto;
  margin-right: auto;
  text-align: center;

  box-shadow: 0 0 1.0em #333333;
  transition: all 0.25s ease-in-out;
}

.hero_button:hover {
  background-color: orange;
  transform: scale(1.1);
}

.hero_button a {
  font-size: 1.5em;
  color: #333333;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  text-decoration: none;
  text-shadow: none;
}

article {
  background-color: WhiteSmoke;
  font-family: 'Nunito', sans-serif;
  color: #333333;
  padding: 2em;
}

.user_stories {
  display: flex;
  flex-direction: column;
}

.user_story {
  margin: 0;
  padding: 1em;

  display: flex;
  flex-direction: column;
}

.user_stories .user_story:not(:last-child) {
  border-bottom: 0.1em solid orange;
}

.user_img img {
  width: 80%;
  border-radius: 50%;
  align-self: center;
  border: 0.1em solid #333333;
}

.user_text {
  font-family: 'Nunito', sans-serif;
  padding: 0;
}

.user_text h2 {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  color: orange;
/*
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
*/
}

.user_text h3 {
  text-align: center;
  font-size: 1em;
  font-style: italic;
  color: #444444;
/*
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
*/
}

.user_text p {
  text-align: center;
  font-size: 1em;
  color: #333333;
/*
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
*/
}

.steps_container {
  display: flex;
  flex-direction: column;
}

/*
Modify when using non-mobile devices: tablets and desktop using recommended
break point values from https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Note that a large screen is also first passed through the medium part.
*/
@media only screen and (min-width: 768px) {

  article {
    padding: 3em 3em;
  }

  .menu_expand .material-icons {
    margin-right: 2vw;
  }

  .menu_logo img {
    margin: 0.5em 2vw;
  }

  .menu_logo p {
    font-size: 1em;
  }

  .topnav .menu_link_container {
    display: flex;
  }

  .topnav .menu_expand {
    display: none;
  }

  .footer_wrapper {
    align-items: flex-start;
    flex-direction: row;
    padding: 0em 0em; /* 3em to adjust spacing, instead of varying flex property*/
  }

  footer div {
    flex: 10;
    padding: 1em;
    align-self: stretch;
  }

  #footer_contact * {
    text-align: right;
  }

  #footer_center {
    display: block;
    background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/c/c9/Formal_Seal_of_Stockholm_University%2C_Stockholm%2C_Sverige.svg/1200px-Formal_Seal_of_Stockholm_University%2C_Stockholm%2C_Sverige.svg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    flex: 6; /* Adjusts size of image + position of text around center image */
  }

  #footer_additional * {
    text-align: left;
  }

  header > nav {
    flex-direction: row;
    margin-bottom: 1em;
    width: 100%;
  }

  table {
    table-layout: fixed;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid gray;
    border-radius: 1em;
    padding: 1em;
  }

  .hero {
    padding: 15vw 10vw;
  }

  .hero_button {
    float: right;
  }

  .user_stories {
    flex-direction: row;
  }

  .user_stories .user_story:not(:last-child) {
    border-bottom: none;
  }

  .user_story {
    flex: 1;
  }

  .steps_container {
    flex-direction: row;
  }

  .step {
    flex: 1;
    margin: 0.8em;
    padding: 1.2em;
    border-radius: 1em;
    background-color: #dddddd;
  }

  .text_columns {
    padding: 0; 
    column-count: 2;
    column-width: auto;
  }

  .tilted_img img {
    width: 40%;
    display: block;
    box-shadow: 0 0.3em 0.3em rgba(0,0,0,0.2);
    border: 1em solid white;
    transform: rotate(-3deg);
  }

  form {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .narrow_on_desktop {
    width: 50vw;
    margin-left: auto;
    margin-right: auto;
  }

}

@media only screen and (min-width: 992px) {

  article {
    padding: 4em 8em;
  }

  footer div  {
    flex: 10;
  }

  #footer_center {
    background-size: 60%;
    flex: 5; /* Adjusts size of image + position of text around center image */
  }

  .text_columns {
    column-count: 2;
    column-width: auto;
  }

}

@media only print {
  body {
    background: white;
    padding: 0;
    font-size: 12pt;
  }

  #page {
    outline: none;
  }

  article {
    border-style: none;
    page-break-inside: avoid; /* Try to keep each article on its own page */
  }

  img {
    filter: grayscale(100%); /* Just following the instructions, shouldn't the user decide this? */
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Hide all interactive or otherwise non-suitable elements when printing */
  footer, nav, video, .menu_button {
    display: none !important;
  }

  h1, h2, p, a, figcaption {
    color: black;
  }

  h1, h2 {
    font-size: 16pt;
  }

  a, p {
    font-size: 12pt;
  }
}