@import url("https://unpkg.com/modern-normalize");

:root {
  --white: #fff;
  --black: #1c1c1c;
  --teal: #007EAE;
  --green: #0BAE75;
  --light-blue: #3DB2A9;
  --tan: #CBC1B8;
  --red: #BC161A;
}

body {
  font-family: "Roboto", sans-serif;
  background: var(--tan);
  background: -webkit-linear-gradient(10deg,
      var(--black) 0%,
      var(--teal) 10%,
      var(--light-blue) 15%,
      var(--tan) 50%,
      var(--tan) 100%);
  background: -moz-linear-gradient(10deg,
      var(--black) 0%,
      var(--teal) 10%,
      var(--light-blue) 15%,
      var(--tan) 50%,
      var(--tan) 100%);
  background: linear-gradient(10deg,
      var(--black) 0%,
      var(--teal) 10%,
      var(--light-blue) 15%,
      var(--tan) 50%,
      var(--tan) 100%);
  color: var(--black);
  height: 100vh;
  width: 100vw;
}

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
}

#links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  margin: 0 auto;

  & .link {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    width: 75%;
  }

  & .icon {
    width: 30%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;


    & img {
      width: 45px;
    }
  }

  & a {
    display: block;
    text-decoration: none;
    background-color: var(--teal);
    color: var(--white);
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--teal);
    text-align: center;
    width: 100%;

    &:hover {
      background-color: var(--white);
      color: var(--black);
      animation: button-hover 0.5s ease-in-out infinite;
    }
  }
}

@keyframes button-hover {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.01);
  }

  100% {
    transform: scale(1);
  }
}

h1 {
  background: #1C1C1C;
  background: -webkit-linear-gradient(to right, var(--light-blue) 10%, var(--red) 25%, var(--red) 75%, var(--teal) 150%);
  background: -moz-linear-gradient(to right, var(--light-blue) 10%, var(--red) 25%, var(--red) 75%, var(--teal) 150%);
  background: linear-gradient(to right, var(--light-blue) 10%, var(--red) 25%, var(--red) 75%, var(--teal) 150%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--teal);

  & a {
    color: var(--black);
  }
}