/******************** Breakpoints *********************/
/******************** Media queries *********************/
/******************** Variables *********************/
#footer {
  display: grid;
  grid-template-areas: "logo logo logo logo" "rights rights free-space company-info" "legal-links legal-links free-space-2 communities";
  grid-template-columns: auto auto 1fr auto;
  grid-template-rows: auto auto auto;
  max-width: 1200px;
  margin: 0 auto;
  gap: 16px;
  padding: 16px;
  font-size: 1rem;
}

footer * {
  color: var(--secondary-text);
}

footer p {
  font-weight: 400;
}

footer a {
  color: var(--bluegray-dark);
}

#logos-container {
  display: flex;
  flex-direction: column;
  grid-area: logo;
  gap: 32px;
  margin-bottom: 16px;
  justify-content: center;
  align-items: center;
}

#studio-logo {
  height: 120px;
  shape-rendering: auto;
}

.studio-slogan {
  font-size: 1.125rem;
  font-weight: bold;
}

#company-info {
  grid-area: company-info;
  flex-direction: column;
  align-self: center;
  gap: 24px;
  align-items: end;
  text-align: end;
}

#company-info a {
  margin: 0;
}

#communities {
  grid-area: communities;
  display: flex;
  gap: 24px;
  height: 48px;
  justify-content: end;
}
#communities a {
  height: 48px;
  width: 48px;
}
#communities a img {
  height: 36px;
  width: 36px;
  padding: 6px;
}

#small-screen-info {
  display: inline;
}
@media (min-width: 64rem) {
  #small-screen-info {
    display: none;
  }
}

#large-screen-info {
  display: none;
}
@media (min-width: 64rem) {
  #large-screen-info {
    display: inline;
  }
}

#rights {
  grid-area: rights;
  align-content: flex-end;
  align-self: center;
}

#language-selector {
  -webkit-appearance: none;
  appearance: none;
  grid-area: company-info;
  background-color: transparent;
  border-radius: 8px;
  text-align: center;
}

#legal-links {
  grid-area: legal-links;
  display: flex;
  gap: 16px;
  justify-self: start;
  align-self: center;
  text-align: start;
}

@media (max-width: 64rem) {
  #footer {
    grid-template-areas: "logo" "communities" "copyright" "rights" "language-selector" "company-info" "legal-links";
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto auto;
    padding-bottom: 24px;
  }
  footer * {
    word-break: normal;
  }
  #studio-logo-anchor {
    margin: auto;
  }
  #studio-logo {
    height: auto;
    width: 100%;
    margin: 0px;
  }
  #communities {
    justify-content: center;
  }
  #company-info {
    width: 100%;
    align-items: center;
    text-align: center;
    margin: 0px;
    padding: 0px;
  }
  #company-info p {
    width: 100%;
    margin: 0px;
  }
  #company-info a {
    word-wrap: break-word;
  }
  #rights {
    text-align: center;
    margin: 0;
  }
  #legal-links {
    margin-top: 16px;
    justify-self: center;
  }
}
* {
  font-family: "Open Sans", sans-serif;
}

body {
  margin: 0;
  background-color: var(--dark-color);
  --dark-color: #1f1b17;
  --light-color: #fefbff;
  --primary-text: rgba(255, 255, 255, .9);
  --secondary-text: rgba(255, 255, 255, .7);
  --disabled-text: rgba(255, 255, 255, .5);
  --primary: #C49A6C;
  --secondary: #6d794e;
}

h1 {
  color: var(--secondary);
  text-align: center;
  font-size: 2rem;
}
@media (min-width: 64rem) {
  h1 {
    font-size: 2.5rem;
  }
}

a {
  flex-shrink: 1;
  color: var(--primary-text);
}

pre {
  max-width: 900px;
  margin: auto auto;
  margin-bottom: 64px;
  padding: 0 16px 0 16px;
  color: var(--primary-text);
  font-size: 1em;
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

#title-div {
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
  margin: 0;
  margin-bottom: 32px;
  padding: 32px;
  background-color: rgba(255, 255, 255, 0.04);
}

#language-change-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.subtitle {
  display: block;
  margin-top: 48px;
  color: var(--primary);
  font-weight: bolder;
  font-size: 1.5em;
  text-align: left;
}

.bulettedList {
  display: block;
  text-align: left;
}

@media (max-width: 800px) {
  pre {
    text-align: left;
  }
}
@media (min-width: 800px) {
  pre {
    text-align: justify;
  }
}

/*# sourceMappingURL=privacy-and-tos.css.map */