@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Syne:wght@400..800&display=swap');



:root {

  --primary: #C9F1A1;

  --on-primary: #222020;

  --secondary: #EAF3D4;

  --on-secondary: #222020;

  --tertiary: #d9dbd2;

  --on-tertiary: #222020;

  --surface-bright: #f7f7f9;

  --on-surface-bright: #222020;

  --surface: #eeeeee;

  --on-surface: #222020;

  --inverse-surface: #111111;

  --on-inversed-surface: #f9f8f9;

}



* {

  box-sizing: border-box;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  margin: 0;

}



h1 {

  text-align: center;

}



h2 {

  font-size: 50px;

  margin-bottom: 40px;

  text-align: center;

}



ul {

  margin: 0;

  padding: 0;

  list-style-type: none;

}



hr {

  border: none;

  height: 2px;

  background: linear-gradient(to right,

      rgba(0, 0, 0, 0) 0%,

      rgba(0, 0, 0, 1) 50%,

      rgba(0, 0, 0, 0) 100%);

}



body,

html {

  scroll-behavior: smooth;

  font-family: "Syne", serif;

}



section {

  padding: 120px 50px;

}



a {

  color: inherit;

  text-decoration: none;

}



a.button {

  border: 1px solid black;

  border-radius: 100px;

  padding: 20px 40px;

  text-decoration: none;

  color: var(--on-primary);

  transition: 500ms;



  &:hover {

    background-color: var(--primary);

    border-radius: 5px;

  }



  &::after {

    content: " >";

    transition: 500ms;

  }



  &:is(:hover)::after {

    transform: translateX(50px);

  }

}



.inverse-surface {

  background-color: var(--inverse-surface);

  color: var(--on-inversed-surface);

}



.primary-container {

  background-color: var(--primary);

  color: var(--on-primary);



  &:is(span) {

    padding: 3px 5px;

  }

}



.secondary-container {

  background-color: var(--secondary);

  color: var(--on-secondary);

}



.tertiary-container {

  background-color: var(--tertiary);

  color: var(--on-tertiary);

}



.surface {

  background-color: var(--surface);

  color: var(--on-surface);

}



.surface-bright {

  background-color: var(--surface-bright);

  color: var(--on-surface-bright);

}



.reversed {

  filter: invert(1);

}



section {

  display: flex;

  align-items: center;

  justify-content: center;

}



.container {

  max-width: 1000px;

  width: 100%;

  margin-left: auto;

  margin-right: auto;

}