:root {
  --hf: #68a691;
  --box: #bfd3c1;
  --bg: #ffe5d4;
  --txt: #efc7c2;
}

body {
  font-family: optima;
  font-size: 20px;
  background-color: var(--bg);
  padding: 10px;
}

h1, h2 {
  font-family: optima;
}

/* Header */
header {
  background-color: var(--hf);
  display: flex;
  padding: 20px;
}

header img {
  border-radius: 15px;
  position: relative;
}

.header-info {
  width: 100%;
  text-align: center;
}

header h1 {
  text-align: center;
}

nav ul {
  list-style-type: none;
}

/* Pulled from pseudo classes assignment */
 div.samples ul {
  display: none;
}

div.samples:hover {
  cursor: pointer;
}

div.samples:hover ul {
  display: block;
}

/* Main Body */
.flex-container {
  display: flex;
}

main {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 20px;
}

section {
  position: relative;
  background-color: var(--box);
  border: 3px solid var(--hf);
  margin-bottom: 10px;
  padding: 20px;
  width: 95%;
}

section.design, section.back-end {
  text-align: right;
}

section.design img, section.back-end img {
  border-radius: 15px;
  display: inline-block;
  margin: 20px;
  position: relative;
  float: left;
}

section.front-end {
  text-align: left;
}

section.front-end img {
  border-radius: 15px;
  display: inline-block;
  margin: 20px;
  position: relative;
  float: right;
}

/* Aside Body */
aside {
  flex: 1 1 auto;
  background-color: var(--box);
  border: 3px solid var(--hf);
  text-align: center;
  padding: 20px;
  margin: 20px;
  width: 25%;
  height: 100%;
}

aside img {
  border-radius: 15px;
}

aside ul li {
  display: block;
}

/* Footer */
footer {
  padding: 50px;
  width: 100%;
  display: block;
  background-color: var(--hf);
  text-align: center;
}

footer img {
  border-radius: 15px;
}

/* MediaQuery */
@media screen and (max-width: 768px) {
  aside {
    display: none;
  }
}