/* Style Sheet for The Saprobeious Kingdom website */

/* Space Reset */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Root */
:root {
  /* Font Family */
  --body-font: "Texturina", serif;
  --header-font: "Manufacturing Consent", cursive;
  /* Colors */
  --primary-background: #6e3161;
  --secondary-background: rgba(220, 167, 195, 50%);
  --foreground: rgba(255, 242, 218, 50%);
  --gold-accent: #f0ca54;
  --red-accent: #991064;
  --light-font: #f5f5ff;
  --dark-font: #6e3161;
  /* Font Sizes */
  --font-size-xsmall: 1.5rem;
  --font-size-small: 1.7rem;
  --font-size-medium: 2.2rem;
  --font-size-large: 2.5rem;
  --font-size-xlarge: 4rem;
  /* Line Heights */
  --line-height-small: 1.3;
  --line-height-medium: 1.5;
  --line-height-large: 1.7;
  /* Letter Spacing */
  --letter-spacing-s: 0.1em;
  --letter-spacing-xs: 0.05em;
  /* Font Weights */
  --font-weight-bold: 900;
  --font-weight-header: 500;
  --font-weight-body: 400;
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-s: 1rem;
  --spacing-m: 1.5rem;
  --spacing-l: 2rem;
  --spacing-xl: 3rem;
}

/* Global Styles */
body {
  font-family: var(--body-font);
  background-color: var(--primary-background);
}
h1,
h2,
h3 {
  font-family: var(--header-font);
}
a,
li,
p,
h1,
h2,
h3 {
  color: var(--light-font);
}
h1 {
  font-size: var(--font-size-xlarge);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-s);
  font-weight: var(--font-weight-header);
  padding: var(--spacing-s);
}
h2 {
  font-size: var(--font-size-large);
  line-height: var(--line-height-medium);
  letter-spacing: var(--letter-spacing-s);
  font-weight: var(--font-weight-header);
  padding: var(--spacing-s);
}
h3 {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-s);
  font-weight: var(--font-weight-header);
  padding: var(--spacing-s);
}
p {
  font-size: var(--font-size-small);
  line-height: var(--line-height-medium);
  letter-spacing: var(--letter-spacing-xs);
  font-weight: var(--font-weight-body);
  padding: var(--spacing-s);
}
a,
li {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-xs);
  font-weight: var(--font-weight-bold);
  padding: 1rem;
}
ul {
  padding: var(--spacing-m);
  list-style-position: inside;
}

/* Header Grid */
header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "hero nav";
}
.hero-container {
  grid-area: hero;
}
.nav-grid {
  grid-area: nav;
}

/* Main */
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Flex Container Layouts */
.queen-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.culture-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.events-container {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.events {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
footer {
  display: flex;
  flex-flow: column;
}
.footer-verification {
  display: flex;
}

/* Header */
.nav {
  padding: var(--spacing-l) var(--spacing-s) var(--spacing-m) var(--spacing-s);
}
.nav-ul {
  list-style-type: none;
}
.nav-ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 300px;
  width: 100%;
  text-align: center;
}
.second-nav-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 300px;
  width: 100%;
  text-align: center;
}
.nav-border {
  border-left: 5px solid var(--gold-accent);
  border-bottom: 5px solid var(--gold-accent);
  border-right: 5px solid var(--gold-accent);
  margin: 0 var(--spacing-l);
}
.nav-button {
  background-color: var(--gold-accent);
  color: var(--dark-font);
  padding: 2rem 3rem;
  border: 3px solid var(--red-accent);
  border-radius: 5px;
  margin: var(--spacing-m);
}
.queen-button {
  padding: 2.5rem 3rem;
  margin: 1.5rem;
}
.logo-crest {
  bottom: 0;
}
.hero-space {
  padding: 0 4rem;
}
.hero-img {
  padding: var(--spacing-l);
  background-color: var(--foreground);
}

/* Queen */
.queen-container {
  width: 100%;
  padding: var(--spacing-m) var(--spacing-s);
  margin: 4rem var(--spacing-m);
}
.queen-info {
  padding: var(--spacing-m);
  width: 60%;
}
.queen-decrees {
  padding: var(--spacing-l);
  width: 40%;
  /* Frame */
  background-color: var(--primary-background);
  border: 5px solid var(--gold-accent);
}
.queen-img {
  padding: var(--spacing-s);
  background-color: var(--foreground);
}
.list-length {
  width: 25ch;
}

/* Culture */
.culture-container {
  padding: var(--spacing-xl) var(--spacing-s) 0 var(--spacing-s);
  margin: var(--spacing-s) 0 0 0;
}
.culture-info {
  padding: var(--spacing-l);
  width: 50%;
}
.half-width {
  width: 50%;
  gap: 6rem;
}
.culture-pastimes {
  padding: var(--spacing-s);
  /* Frame */
  background-color: var(--secondary-background);
  border: 5px solid var(--gold-accent);
}
.culture-img {
  padding: var(--spacing-s);
  background-color: var(--foreground);
}
.culture-button {
  background-color: var(--foreground);
  color: var(--dark-font);
  padding: 0.5rem 1rem;
  border: 3px solid var(--red-accent);
  border-radius: 5px;
  margin-bottom: var(--spacing-m);
}

/* Events */
.events-container {
  padding: var(--spacing-s);
  margin: var(--spacing-xl) 0 var(--spacing-xl) 0;
}
.events-header {
  margin: var(--spacing-l) 0 var(--spacing-l) 0;
}
.events {
  margin: var(--spacing-s);
}
.events-img {
  padding: var(--spacing-s);
  background-color: var(--foreground);
}
.event-box {
  padding: 1.8rem var(--spacing-xs);
  margin: var(--spacing-s);
}
.events-safety {
  margin: var(--spacing-l);
}

/* Footer */
.footer-list {
  list-style-type: none;
  text-align: center;
}
.footer-verification {
  padding: var(--spacing-m);
  background-color: var(--foreground);
}

/* Specific Positioning */
.specific-positioning-crest,
.specific-positioning {
  position: absolute;
}
.rel-logo,
.rel-button {
  position: relative;
}
.rel-logo .specific-positioning-crest {
  bottom: -5%;
  left: -5%;
}
.rel-button .specific-positioning {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Helper Classes */
.margin-l {
  margin: var(--spacing-l);
  padding: var(--spacing-m);
}
.flex-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.flex-col-center {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
.highlight {
  color: var(--gold-accent);
  background-color: #6e3161;
}
.special-list-item {
  font-weight: var(--font-weight-bold);
  font-size: 1.8rem;
  color: var(--gold-accent);
}
.text-center {
  text-align: center;
}
.dark-text {
  color: var(--dark-font);
}
.dark-bg {
  background-color: var(--primary-background);
}
.alt-bg {
  background-color: var(--secondary-background);
}
.smaller-text {
  font-size: 1.3rem;
}
.responsive-width {
  width: 100%;
}
.top-border {
  border-top: 5px solid var(--gold-accent);
}
.red-border {
  border: 3px solid var(--red-accent);
  background-color: var(--foreground);
  color: var(--dark-font);
}

/* Media Queries */
@media screen and (max-width: 1024px) {
  header {
    display: flex;
    flex-direction: column;
  }
  .nav {
    padding: 0.5rem;
  }
  .nav-button {
    padding: 2rem 3rem;
    margin: 0;
  }
  .queen-button {
    margin: 2.5rem;
  }
  .second-nav-list {
    display: flex;
    flex-direction: row;
  }
  .queen-container,
  .culture-container {
    display: flex;
    flex-direction: column;
  }
  .queen-info,
  .queen-decrees,
  .culture-info,
  .half-width {
    width: 100%;
  }
  .culture-container {
    border: none;
  }
  .events {
    display: flex;
    flex-wrap: wrap;
  }
  .event-box {
    flex-direction: row;
  }
  .padding-l {
    padding: 1rem;
  }
  .reverse {
    flex-direction: row-reverse;
  }
  /* This is for smaller screens to be more cohesive */
  .new-border {
    border-top: 4px solid var(--gold-accent);
  }
}

@media screen and (max-width: 768px) {
  .event-box {
    flex-direction: column;
  }
  .reverse {
    flex-direction: column;
  }
}

@media screen and (max-width: 425px) {
  .specific-positioning-crest {
    left: 50%;
  }
  .second-nav-list {
    flex-direction: column;
  }
  h1 {
    font-size: var(--font-size-large);
    line-height: var(--line-height-medium);
  }
  h2 {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-small);
  }
  h3 {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }
  p {
    font-size: 1.2rem;
    line-height: var(--line-height-medium);
  }
  a,
  li {
    font-size: 1.3rem;
    line-height: 1.9;
  }
  .smaller-text {
    font-size: 1.3rem;
  }
  .special-list-item {
    font-size: 1.5rem;
  }
  .hero-space,
  .hero-container,
  .queen-container,
  .culture-container,
  .events-container {
    padding: 0.5rem;
  }
  .rel-logo .specific-positioning-crest {
    bottom: -126%;
    left: 42%;
  }
}