@import url('./fonts.css');
@import url("./colors.css");
@import url("./algemenestyling.css");


body {
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../images//starwarsthemebg.jpeg);
  background-repeat: no-repeat;
  background-size: cover;

}

h1 {
  font-family: "Deathstar";
  color: var(--text-color-choosetheme);
  font-size: var(--h1);
  letter-spacing: 1rem;
  text-align: center;

  @media(max-width:500px) {
    font-family: "Deathstar";
    color: var(--text-color-choosetheme);
    font-size: var(--h1);
    text-align: center;
  }

  @media(max-width:1000px) {
    font-family: "Deathstar";
    color: var(--text-color-choosetheme);
    font-size: var(--h1);
    text-align: center;
  }
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10rem;

  @media(max-width:500px) {
    gap: 5rem;
    flex-direction: column;
    width: auto;
    height: auto;
  }

  @media(max-width:1000px) {
    gap: 5rem;
    flex-direction: column;
    width: auto;
    height: auto;
  }
}

section {
  display: flex;
  gap: 20rem;
  flex-direction: row;

  @media(max-width:1000px) {
    gap: 5rem;
    flex-direction: column;
  }

  @media(max-width:500px) {
    gap: 2.5rem;
    flex-direction: column;
  }
}

a {
  max-width: 40rem;
  max-height: 40rem;
  background: none;
  border: none;

  /* Button text styling*/
  font-family: 'Montserrat';
  font-weight: 500;
  font-size: var(--p);
  color: var(--bg-color);

  text-decoration: none;

  &:focus {
    outline: 3px solid var(--starwars-yellow);
    outline-offset: 5px;
  }

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

  &:visited {
    color: var(--starwars-yellow);
  }

  @media (max-width:500px) {
    max-width: 20rem;
    max-height: 20rem;
    background: none;
    border: none;

    /* Button text styling*/
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: var(--p);
    color: var(--bg-color);
  }

  @media(max-width:1000px) {
    max-width: 40rem;
    max-height: 40rem;
    background: none;
    border: none;

    /* Button text styling*/
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: var(--p);
    color: var(--bg-color);
  }
}

a:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  transform: scale(1.1);
  animation: ease-in;
  transition: .5s;

  @media(prefers-reduced-motion: no-preference) {
    animation-play-state: paused;
  }

  @media(max-width:500px) {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    transform: scale(1.1);
    animation: ease-in;
    transition: .5s;
  }

  @media(max-width:1000px) {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    transform: scale(1.1);
    animation: ease-in;
    transition: .5s;
  }
}

img {
  max-width: 40rem;
  max-height: 40rem;

  @media(max-width:500px) {
    max-width: 100%;
  }

  @media(max-width:1000px) {
    max-width: 100%;
  }
}