stylesheet.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* color variables */

:root {
  --heading: #ff7a32;
  --background: #F7E0D4;
  --element2: #faeae0;
  --element: #347B98;
  --icon: #1489B8;
  --text: #092834;
  --iconhover: #3eb9ea;
}

/* home symbol styling  */

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 64
}

.home {
  position: fixed;
  vertical-align: top;
}

/* General */

body {
  font-family: Ubuntu, Arial, Helvetica, sans-serif;
  color: var(--text);
  background-color: var(--element2);
  width: 100%;
}

h1, h2, h3 {
  font-family: Roboto, Arial, Helvetica, serif;
  color: var(--heading);
}

section {
  width: 65vw;
  padding: 0.1vw 0.5vw 0.5vw;
}

.sectiontitle {
  letter-spacing: 1px;
  font-variant: small-caps;
  font-weight: 1000;
  color: var(--heading);
  margin: 0.5em 0 1em 0;
}

/* index */

a.home {
  text-decoration: none;
}

a.home:visited {
  color: var(--icon);
}

main.index {
  text-align: center;
}

.main a {
  display: inline-block;
  width: 11em;
  background-color: var(--icon);
  padding: 1em 2em;
  color: white;
  margin: 0.5em 1em;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 1px 1px 4px black;
}

.main a:hover {
  background-color: var(--iconhover);
}

hr {
  margin: auto;
  width: 50vw;
  color: var(--element);
  border-radius: 100%;
  border-width: 2px;
}

ul.main {
  margin: 40px 25vw;
  padding-left: 0px;
  padding: 40px;
  background-color: var(--background);
  width: 50vw;
  height: 80%;
  border-radius: 30px;
  box-shadow: 2px 2px 4px black;
}

ul.main li {
  list-style-type: none; 
  padding: 20px 0;
  display: inline-block;
}

.indextitle {
  color: var(--heading);
  font-variant: small-caps;
  letter-spacing: 1px;
  text-align: center;
  font-size: min(64px, 8vw);
  margin-bottom: 20px;
  margin-top: 20px;
}

/* Recipes */

.recipemain {
  box-shadow: 2px 2px 8px black;
  width: 65vw;
  border-radius: 20px;
  margin: 0 auto;
}

.recipetitle {
  color: var(--heading);
  font-variant: small-caps;
  letter-spacing: 1px;
  text-align: center;
  font-size: min(64px, 8vw);
  margin-bottom: 20px;
  background-color: var(--icon);
  padding: max(3vw, 0.5em);
  margin: 0 auto;
  width: 65vw;
  border-start-start-radius: 20px;
  border-start-end-radius: 20px;
}

.foodpic {
  display: block;
  margin: 0 auto;
  width: 65vw;
}

.ingr li {
  line-height: 2em;
}

.ingr ul,
.steps ol {
  padding-left: 1em;
}

.steps li {
  line-height: 1.5em;
  margin: 2em 0px;
}

.ingr .sectiontitle {
  color: var(--icon);
}

.desc p {
  margin-bottom: 10px;
}

.desc,
.steps {
  margin: 0 auto;
  background-color: var(--element);
  color: white;
  padding: 10px;
}

.ingr {
  display: block;
  margin: 0 auto;
  padding: 10px;
  background-color: var(--background);
}

.steps {
  margin-bottom: 15%;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}