/* Web fonts */
@import url("libs/fonts/fonts.css");

html {
  /* set base value for rem calculation */
  font-size: 20px;
  line-height: 1.6;
  hyphens: auto;
}

header {
  img {
    width: 10rem;
    margin-top: 1rem;
  }
}

header, footer {
  background-color: #333;
}

header, main, section, footer {
  padding: 1rem 2rem;
  text-wrap: balance;
}

body {
  /* background, global margins and fonts */
  font-family: Roboto, sans-serif;
  background-color: #222;
  color: #ccc;
  margin: 3rem;
}

@media (max-width: 800px) {
  /* smaller margins and paddings for narrow displays */
  body {
    margin: 0;
  }

  header, main, section, footer {
    padding: 0.5rem 1rem;
  }
}

/* section buttons */
section, main {
  .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    border-width: 1px;
    border-color: black;
    border-style: solid;
    border-radius: 8px;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    max-width: fit-content;

    &:hover {
      background-color: rgba(127, 127, 127, 0.3) !important;
    }
  }
}

/* footer links */
footer > p > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #8bc34a;

  &:hover {
    text-decoration: underline;
  }
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1.4rem;

  img {
    width: 2rem;
    height: 2rem;
  }
}

#intro {
  background-color: rgb(72, 72, 72);
  color: #dddddd;
}

#youtube, #youtube a {
  background-color: rgba(182, 32, 31, 0.82);
  color: white;
}

#insta, #insta a {
  background-color: #EEEEEED0;
  color: #333;
}