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

:root {
  --primary-background-color: rgb(18, 16, 16);
  --primary-color: #ffb000;
  --link-color: #ffc000;
  --primary-active-color: #ffcc00;
}

hr {
  margin-top: 1em;
  margin-bottom: 1em;
  border-color: darkorange;
  color: var(--link-color);
}

main > h1 {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-weight: lighter;
  font-size: 3rem;
  margin-bottom: 0;
}

main > h1 + div.h2 {
  font-size: x-large;
  margin-top: -1em;
  margin-bottom: 2em;
  text-align: center;
  font-weight: lighter;
}

main > h1 + div.h2 + h2 {
  margin-top: -1em;
  margin-bottom: 1em;
  text-align: center;
  font-weight: lighter;
}

/*div:hover {
  color: var(--primary-active-color);
}*/

/*div:hover.inverse {
  color: white;
}*/

html {
  scroll-behavior: auto;
}

.serif {
  font-family: "Times New Roman", Times, serif;
  /*font-weight: lighter;*/
}

body {
  font-family: sans-serif;
  font-weight: lighter;
  line-height: 1.5;
  background-color: var(--primary-background-color);
  color: var(--primary-color);
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 3.5rem;
  width: 100%;
}

nav > div > a {
  padding: 1rem;
  color: var(--primary-color);
}

nav > div.left {
  float: left;
  padding-right: 20vw;
}

nav > div.right {
  float: right;
  padding-left: 20vw;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 3.5rem;
  width: 100%;
}

footer > div > a {
  height: 3.5rem;
  padding: 1rem 1rem;
}

footer > div.left {
  float: left;
  padding-right: 20vw;
}

footer > div.right {
  float: right;
  padding-left: 20vw;
}

main {
  max-width: 50rem;
  margin: 0 auto;
  padding: 3rem 2rem;
  min-height: 80vh;
}

main > h1 {
  margin: 2rem 0 0.5rem;
}

main > h1:hover {
  color: var(--primary-active-color);
}

main > img {
  border-radius: 5px;
}

a {
  font-weight: normal;
  color: var(--link-color);
}

a:hover {
  color: var(--primary-active-color);
}

.inverse {
  font-weight: normal;
  width: 40%;
  padding: 0.5rem 1.5rem;
  border-radius: 10% / 30%;
  color: var(--primary-background-color);
  background-color: var(--primary-color);
}

div.container3 {
  width: 100%;
  padding-left: 3em;
  padding-right: 3em;
  display: flex;
  justify-content: center;
}

div.container3 > div {
  width: 32%;
  margin: 1%;
  border: dotted;
  border-width: 2px;
  margin: 1rem;
  padding: 1rem;
  transition-duration: 150ms;
}

div.container3 > div:hover {
  border-radius: 20px;
  transition-duration: 300ms;
}

div.container1 {
  width: 100%;
  padding-left: 3em;
  padding-right: 3em;
  display: flex;
  justify-content: center;
}

div.container1 > div {
  width: 90%;
  margin: 1%;
  border: dotted;
  border-width: 2px;
  margin: 1rem;
  padding: 1rem;
  transition-duration: 150ms;
}

div.container1 > div.noborder {
  width: 90%;
  margin: 1%;
  border: none;
  margin: 1rem;
  padding: 1rem;
}

div.container2 > div:hover {
  border-radius: 20px;
  transition-duration: 300ms;
}

div.container2 {
  width: 100%;
  padding-left: 3em;
  padding-right: 3em;
  display: flex;
  justify-content: center;
}

div.container2 > div.left {
  height: fit-content;
  width: 25%;
  margin: 1%;
  border: dotted;
  border-width: 2px;
  margin: 1rem;
  padding: 1rem;
  transition-duration: 150ms;
}

div.container2 > div.right {
  width: 75%;
  margin: 1%;
  border: dotted;
  border-width: 2px;
  margin: 1rem;
  padding: 1rem;
  transition-duration: 150ms;
}

div.container2 > div.noborder {
  border: none;
}

div.container2 > div:hover {
  border-radius: 20px;
  transition-duration: 300ms;
}

div.copyright {
  font-size: x-small;
  font-weight: lighter;
}

a.info {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  border-radius: 10px;
  transition-duration: 200ms;
}

a.info:hover {
  color: var(--primary-background-color);
  background-color: var(--primary-color);
  transition-duration: 200ms;
}

a.purchase {
  display: block;
  height: 100%;
  width: fit-content;
  padding: 1rem;
  border: var(--primary-color);
  border-left-style: dotted;
  border-right-style: dotted;
  border-top-style: double;
  border-bottom-style: double;
  font-variant: small-caps;
  font-weight: 900;
  align-content: center;
  text-align: center;
  border-radius: 20px;
  transition-duration: 200ms;
  color: var(--primary-background-color);
  background-color: var(--primary-color);
  /*color: var(--primary-active-color);*/
  /*background-color: var(--primary-background-color);*/
}

a.purchase:hover {
  transition-duration: 200ms;
  background-color: var(--primary-active-color);
  color: var(--primary-background-color);
  border-color: var(--primary-color);
}

@media (prefers-reduced-motion: no-preference) {
  use {
    stroke-dasharray: 1;
  }

  .dash-flow {
    animation: dash 5s linear infinite;
  }

  .dash-flow-fast {
    animation: dash 1.5s linear infinite;
  }

  @keyframes dash {
    to {
      stroke-dashoffset: -54.66;
    }
  }

  @keyframes breathe-big {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
  }

  @keyframes breathe {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }

  .breathe-circle-big-fast {
    animation: breathe-big 1s infinite ease-in-out;
    transform-origin: 50px 50px; /* Center of the 100x100 viewBox */
  }

  .breathe-circle {
    animation: breathe 2s infinite ease-in-out;
    transform-origin: 50px 50px; /* Center of the 100x100 viewBox */
  }
}