@import url("modern-normalize.css");
@import url("currency.css");
@import url("agelimit.css");
@import url("team.css");

:root {
  --color-green: #9fddc5;
  --color-deep-blue: #0c69ad;
  --color-deep-purple: #6a69ef;
  --color-purple: #9fb8dc;
  --color-mint: #9aecca;
  --color-purpler: #c699ec;
  --color-dark-pink: #ef2a6e;
  --color-pink: #debcda;
  --color-off-white: #e7edf2;
  --color-cyan: #7fdff0;
  --color-piss: #f7f1b7;
}

body {
  background-color: var(--color-green);

  font-size: 16px;
  font-family: "Short Stack", cursive;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
}

a {
  color: var(--color-deep-blue);
}

.container {
  width: 800px;
  max-width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.logo {
  max-width: 100%;
  width: 500px;
  user-select: none;
  align-self: center;
}

#content {
  background-color: var(--color-off-white);
  padding: 16px;

  img {
    max-width: 100%;
  }
}

#menu {
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    li {
      /* no word wrap */
      white-space: nowrap;

      a {
        display: block;
        padding: 12px;
        text-decoration: none;
        color: white;
        background-color: var(--color-dark-pink);
        border-radius: 8px;
        transition: background-color 0.1s;

        &:hover {
          background-color: var(--color-pink);
        }
      }
    }
  }
}

.bottom-picture {
  width: 100%;
}