/* CUSTOM PROPERTIES
  ============================= */
:root {
  --ff-sans-serif: 'Gotu', sans-serif;
  --ff-serif: 'Suravaram', serif;
  --ff-cursive: 'Parisienne', cursive;
  --fs-xs: 0.8rem;
  --fs-s: 1.2rem;
  --fs-base: 1.6rem;
  --fs-l: 2rem;
  --fs-xl: 2.4rem;
  --fw-base: 400;
  --c-lightgray: #f2f2f2;
  --c-colorful: #55286f;
  --c-light: #fff;
  --c-dark: #210b2c;
}
/* BASE
  ============================= */
html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family: var(--ff-serif);
  font-size: var(--fs-base);
  font-weight: var(--fw-base);
  color: var(--c-dark);
}

main {
  text-align: center;
}

main p {
  font-family: var(--ff-sans-serif);
  color: var(--c-colorful);
}

main button {
  display: block;
  margin: 2rem auto;
  border: none;
  padding: 2rem;
  border-radius: 1rem;
  background-color: var(--c-colorful);
  color: var(--c-light);
  font-size: var(--fs-base);
  transition: all 0.3s ease-in-out;
}

main button:hover {
  cursor: pointer;
  background-color: var(--c-light);
  color: var(--c-colorful);
  border: thin solid var(--c-colorful);
}

main button:focus {
  outline: none;
}

main .instructions {
  color: #000;
}

aside p {
  text-align: left;
  color: #000;
}

aside p span {
  font-family: var(--ff-cursive);
  color: var(--c-colorful);
}

aside table {
  width: min(100%, 32rem);
  margin: auto;
  border-collapse: collapse;
  text-transform: uppercase;
}

aside table caption {
  font-size: var(--fs-s);
  color: var(--c-colorful);
}

aside table tr {
  font-family: var(--ff-sans-serif);
  font-size: var(--fs-xs);
}

aside table tr th,
aside table tr td {
  border: thin solid var(--c-lightgray);
  padding: 0.5rem 0.2rem;
}

aside table tr td:nth-child(even) {
  background-color: var(--c-lightgray);
}

aside iframe {
  width: min(100%, 32rem);
  height: 18rem;
  display: block;
  margin: 2rem auto;
}

/* GLOBALS
  ============================= */
.container {
  width: 100%;
}
/* MEDIA QUERIES
  ============================= */
@media screen and (min-width: 576px) {
  .container {
    max-width: 540px;
    margin: auto;
    padding: 0;
  }

  aside table {
    width: 100%;
  }

  aside table caption {
    font-size: var(--fs-base);
  }

  aside table tr {
    font-size: var(--fs-s);
  }

  aside table tr th,
  aside table tr td {
    padding: 0.5rem;
  }

  aside iframe {
    width: 48rem;
    height: 27rem;
  }
}

@media screen and (min-width: 768px) {
  .container {
    max-width: 720px;
  }

  aside p,
  aside table caption {
    font-size: var(--fs-l);
  }

  aside table tr th,
  aside table tr td {
    padding: 1rem;
  }

  aside iframe {
    width: 64rem;
    height: 36rem;
  }
}

@media screen and (min-width: 992px) {
  .container {
    max-width: 960px;
  }

  aside p {
    text-align: center;
  }

  aside table {
    width: 84rem;
  }

  aside table tr {
    font-size: var(--fs-base);
  }
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media screen and (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* DEVELOPER
  ============================= */
.dev {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: lighter;
}
.dev a {
  color: #05a6f1;
}
.dev a:link {
  text-decoration: none;
}
.dev a:visited {
  font-style: italic;
}
.dev a:hover {
  text-decoration: underline;
}
.dev a:active {
  font-style: italic;
  text-decoration: underline;
  color: gray;
}
.dev .top a,
.dev .bottom a {
  display: flex;
  align-items: center;
  padding: 16px;
}
.dev .top a {
  justify-content: flex-start;
}
.dev .bottom a {
  justify-content: flex-end;
}
.dev span {
  color: gray;
}
.dev img {
  width: 32px;
  margin: 0 8px;
}