/******************************************************************************

mostly just ported over the styles from the react app

******************************************************************************/

/* Our default values set as CSS variables */
:root {
  --color-bg: #190f52;
  --color-text-main: #ffffff;
  --color-headers: #fac9ff;
  --color-primary: #afece0;
  --wrapper-height: 85vh; /* unused */
  --image-max-width: calc(150px + 10vw);
  --font-family: Source Code Pro, sans-serif;
  --font-family-header: Source Code Pro, sans-serif;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
  line-height: 1.5;
}
[hidden] {
  display: none !important;
}

body {
  overflow: hidden;
}

h1 {
  color: var(--color-headers);
  font-family:
    Source Code Pro,
    sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: calc(2rem + 2.5vw);
  margin: 3vw 0;
  word-break: break-word;
  text-align: center;
}

/* Navigation footer */
footer {
  z-index: 10;
  padding: 1rem 0rem;
  width: 100%;
  border-top: 4px solid #fff;
  background-color: var(--color-bg);
  text-align: center;
  grid-area: footer;
}

footer a {
  font-family:
    Source Code Pro,
    sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  text-decoration: none;
  border-style: none;
}
footer a:hover {
  background: var(--color-primary);
}

.divider {
  padding: 0 1rem;
  color: var(--color-text-main);
}

/* Page structure */
body {
  font-family:
    Source Code Pro,
    sans-serif;
  background-color: var(--color-bg);
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
  grid-area: main;
}

@media (max-width: 400px) {
  .wrapper {
    justify-content: flex-start;
    margin: 20% 0;
  }
}

.homepage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page {
  max-height: 100vh;
  max-width: 85%;
  padding: calc(5vw + 2rem) 0;
}

.page h1 {
  font-size: calc(2rem + 2vw);
  text-align: left;
}

.page p {
  text-align: left;
}

.page a:hover {
  text-decoration: none;
}

/* idk what else to do abt this */
.empty {
  height: 10vw;
  display: block;
}

/* sizing of images and videos */
.page .images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  overflow: hidden;
  gap: 10vw;
  padding: 3vw 0vw;
}

.images img {
  max-width: 100%;
}

.txt {
  align-self: center;
}

@media (max-width: 800px) {
  .page .images {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 800px) {
  .images img {
    max-width: 80vw;
  }
}

video {
  max-width: 100%;
  padding: 3vh 0vw;
}

iframe {
  max-width: 100%;
  padding: 3vh 0vw;
}

/* misc styling */

h2 {
  color: var(--color-headers);
  text-align: center;
  font-size: calc(1rem + 1.5vw);
  padding-top: calc(1rem + 1vw);
}

p {
  font-size: 1.1rem;
  text-align: center;
}

#root {
  display: grid;
  height: 100dvh;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "main" "footer";
  align-items: center;
  overflow: hidden;
  color: var(--color-text-main);
}

#root a {
  color: var(--color-text-main);
}

/* Very light scaling for our illustration */
.illustration {
  max-width: 100%;
  max-height: var(--image-max-width);
  cursor: pointer;
  padding-left: 1rem;
}