@import url("https://fonts.googleapis.com/css?family=Tangerine|Roboto");
:root {
  --base-scale: 1rem;
  --scaling-factor: 1.333;
  --fourths: calc(var(--base-scale) * var(--scaling-factor));
}

.button {
  border: none;
  color: #574F55;
  padding: 15px 32px;
  text-align: center;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  background-color: #F8A7E5;
  border-radius: 25px;
}

.myCard {
  background-color: #F8A7E5;
  padding: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 25px;
  margin: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #F8A7E5;
  border-radius: 1rem;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

li {
  border: 1px solid black;
  margin: 0.5em;
  padding: 0.5em;
  background-color: white;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  color: #574F55;
}

a {
  color: #574F55;
}

body {
  padding: 50px;
  text-align: center;
  background-color: white;
  color: black;
  font-family: "Roboto";
}

.container {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  --columns: 6;
}

nav, header, article, aside, footer {
  -ms-flex-preferred-size: calc(var(--width, 0) / var(--columns, 6) * 100%);
      flex-basis: calc(var(--width, 0) / var(--columns, 6) * 100%);
  text-align: center;
  color: #F8A7E5;
}

*, ::after, ::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container > * {
  padding: 0.5em;
}

h1, h2, h3, h4 {
  font-family: "Tangerine";
}

h2, h3, h4 {
  color: #574F55;
}

h1 {
  background-color: #F8A7E5;
  color: black;
  border-radius: 1rem;
  margin-top: 0;
  font-size: calc(var(--fourths) * (var(--scaling-factor) * (var(--scaling-factor) * (var(--scaling-factor) * (var(--scaling-factor))))));
}

h2 {
  font-size: calc(var(--fourths) * (var(--scaling-factor) * (var(--scaling-factor) * (var(--scaling-factor)))));
}

h3 {
  font-size: calc(var(--fourths) * (var(--scaling-factor) * (var(--scaling-factor))));
}

h4 {
  font-size: calc(var(--fourths) * var(--scaling-factor));
}

p {
  text-align: left;
  text-indent: 2rem;
  color: black;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: flex wrap;
          flex-flow: flex wrap;
  padding: 0.3em;
}

footer {
  background-color: #F8A7E5;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: flex wrap;
          flex-flow: flex wrap;
  border-radius: 25px;
}

img {
  border-radius: 25px;
}

@media (min-width: 500px) {
  header, article, aside, nav, footer {
    --width: 6;
  }
  
}

@media (min-width: 900px) {
  header, nav, footer {
    --width: 6;
  }
  a:hover {
    background-color: #f7a4e2;
  }
  article, aside {
    --width: 6;
  }
  .myCard {
    width: calc(25% - 20px);
  }
}
/*# sourceMappingURL=main.css.map */