@font-face {
      font-family: "Luckiest Guy";
      src: url("LuckiestGuy-Regular.ttf") format("truetype");
}

@font-face {
      font-family:Hammersmith One;
      src: url("HammersmithOne-Regular.ttf") format("truetype");
}

body {
  color: white;
  font-family: "Hammersmith One", sans-serif;
  width: 80%;
  min-width: 600px;
  margin: 50px auto;
  max-width: 900px;
}

html {
      background-image: url("assets/webpage background.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: center;

      color: fff;
}

a {
      color:red;
}

a:visited {
      color:rgb(244, 217, 149);
}

a:active {
      color:skyblue;
}

img {
      width: 8em;
      image-orientation: center;
}

mystyle1 {
      display: block;
      text-align: left;
      padding: 30px;
      margin: -17px;
      border: 17px solid rgb(244, 217, 149);
      border-radius: 20px;
      background-color: rgb(74, 87, 93);
      color:white;     
}

ul {
      list-style-position: inside;
}

mystyle2 {
      display: block;
      text-align: center;
      padding: 80px;
      margin: 40px;
      border: 14px solid rgb(244, 217, 149);
      border-radius: 20px;
      background-color: rgb(74, 87, 93);
}

.li2 {
      color: rgb(119, 221, 238)
}

.li3 {
      color: rgb(202, 119, 33)
}

.li1 {
      color: rgb(244, 217, 149)
}

mystyle4 div {
      display: flex;
      text-align: center;
      image-orientation: center;
}

mystyle3 {
      display: flex;
      text-align: center;
      image-orientation: center;
}

mystyle3 div {
      width: 30%;
      margin: 0 20px;
}

.container {
      display: flex;
      align-items: flex-start;
      width: 80%;
      min-width: 500px;
      min-height: 900px;
      margin: auto;
}

mystyle9 {
      color: rgb(119, 221, 238);
      font-family: "Luckiest Guy", sans-serif;
      font-weight: 400;
}
h1, h2, h3 {
      color: rgb(119, 221, 238);
      font-family: "Luckiest Guy", sans-serif;
      font-weight: 400;
}

summary {
      cursor: pointer;
      text-decoration: underline;
      font-family: "Luckiest Guy", sans-serif;
      color: rgb(119, 221, 238);
}

details p {
      border: 3px solid darkgoldenrod;
      padding: 10px;     
}

details ul {
      border: 3px solid darkgoldenrod;
      padding: 10px;     
}

li::marker {
      color: whitesmoke;    
}