/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gaegu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Happy+Monkey&display=swap');

* {
    box-sizing: border-box;
}

.fredoka-typeface {
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.gaegu-regular {
  font-family: "Gaegu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.happy-monkey-regular {
  font-family: "Happy Monkey", system-ui;
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0;
  background: antiquewhite;
  font-family: "Fredoka";
  color: darkcyan;
}

header {
}

main {
}

footer {
}

/* Page wrapper */
.page {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
}

.layout-sidebar {
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr;
  width: 700px;
}

.layout-single {
  max-width: 800px;
}

.card {
  background-color: white;
  border-radius: 25px;
  padding: 1rem;
}

/* Headers */
h1 {
  color: darkseagreen;
  font-family: "Gaegu";
  font-size: 3rem;
}

h2 {
  color: #C58940;
  font-family: "Gaegu";
}

/* Links */

/* Base link style (unvisited) */
a:link {
  color: rgb(236, 97, 125); /* Sets unvisited links to green */
}

/* Visited link style */
a:visited {
  color: rgb(236, 97, 125); /* Sets visited links to blue */
}

/* Link style when the mouse hovers over it */
a:hover {
  color: orange; /* Sets hover links to orange */
}

/* Link style at the moment it is clicked */
a:active {
  color: rgb(255, 196, 0); /* Sets active links to black */
}