*,
*::before,
*::after {
  /* Use a more-intuitive box-sizing model. */
  box-sizing: border-box;
}

* {
  /* Remove default margin */
  margin: 0;
}

html,
body {
  /* Allow percentage-based heights in the application */
  height: 100%;
  width: 100%;
}

body {
  /* Nicer text rendering */
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  /* Nicer media defaults */
  display: block;
  max-width: 100%;
}

.root {
  isolation: isolate;
}

a:link {
  color: rgba(var(--rgb-black), 1);
}

a:visited {
  color: #344;
}

.root {
  width: 100%;
  height: 100%;

  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  /* Scrollable when the viewport is too short */
  overflow-y: auto;
  min-height: 0; /* Needed for Firefox */

  color: rgba(var(--rgb-black), 1) !important;
}

.background {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;

  background-image: url("assets/exum-background.gif");
  background-clip: border-box;
  background-size: cover;
  background-position: center;
}

.header {
  display: flex;
  flex-direction: row;
}

@media (max-width: 600px) {
  :root {
    --scale: 1;
  }
}
@media (min-width: 600px) {
  :root {
    --scale: 1.5;
  }
}

:root {
  --title-size: calc(var(--scale) * 3.5rem);
  --sticker-size: calc(var(--scale) * 1.25rem);
  --whenwhere-size: calc(var(--scale) * 2rem);
  --address-size: calc(var(--scale) * 1rem);
  --social-size: calc(var(--scale) * 0.8rem);
  --lower-right-size: calc(var(--scale) * 0.8rem);

  --rgb-black: 10, 10, 10;
}

.title {
  font-size: var(--title-size);
  line-height: 1;
  font-family: "Adelphe_FlorealSemiBold";

  min-height: min-content;
}

.sticker-section {
  flex-grow: 0;
  width: 100%;
  display: flex;
}

.sticker {
  /* Hug the text */
  padding: 1rem;
  width: fit-content;
  height: fit-content;

  background-color: white;
  border: 0.3rem rgba(var(--rgb-black)) solid;
  filter: drop-shadow(1.2rem 1.2rem 0rem rgba(var(--rgb-black), 0.8));

  font-family: "Avara_BoldItalic";
  font-size: var(--sticker-size);
  line-height: 1.5;
  text-align: center;
}

.signup-link {
  padding: 10px;
  border-radius: 5px;
  font-family: "Avara_Bold";
}

.signup-link:link { background: #ddb; }
.signup-link:hover { background: #bdd; }
.signup-link:active { background: #0ff; }
.signup-link:visited { color: #668; }

.root > .sticker-section {
  /* put the sticker in the middle of the section */
  justify-content: space-around;
}

.root > .sticker-section > .sticker {
  margin-top: 1rem;
  margin-bottom: 2.5rem;

  /* don't shrink */
  flex-grow: 0;
  min-width: fit-content;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  /* overflow:hidden; */

  min-height: min-content;
}

.info {
  /* Don't shrink */
  flex-shrink: 0;
  min-width: fit-content;
}

.whenwhere {
  font-family: "Adelphe_FlorealItalic";
  font-size: var(--whenwhere-size);
  line-height: 1.2;

  padding-bottom: 0.5rem;
}

.address {
  font-family: "Adelphe_FlorealBoldItalic";
  font-size: var(--address-size);

  padding-bottom: 1rem;
}

.social {
  font-family: "Avara_Bold";
  font-size: var(--social-size);
}

.lower-right {
  position: fixed;
  right: 10px;
  bottom: 10px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25em;
}

.logos {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;

  /* Responsive logo section to cozy up next to social */
  width: max(2rem, 30vw);

  gap: 0.25rem;
}

.logos img {
  max-height: calc(var(--scale) * 2rem);
  height: calc(var(--scale) * 2rem);
}

.lower-right p {
  font-family: "Avara_Bold";
  font-size: var(--lower-right-size);
}