/* Use same queries as tailwindcss to brevent broken layouts! */
:root {
  /* === Colors === */
  --primary-50: #d8c6b7ff;
  --secondary-50: #df9f29ff;
  --on-primary-50: #2c302eff;
  --on-primary-25: #474a48ff;
  --on-primary-0: rgb(213, 213, 213);
  --tertiary-50: #508ca4ff;
  --background-50: rgb(240, 240, 240);
  --background-60: rgb(230, 230, 230);
  --on-background-50: rgba(149, 157, 165, 0.2);
  color-scheme: light dark;
  color: var(--on-primary-50);
  background-color: transparent;
  /* === Typography === */
  /* seems that 1em == 16px (default) */
  --font-calligraphic: "great-vibes", sans-serif;
  --font-heading: "Barlow Condensed", sans-serif;
  --font-body: Helvetica, Arial, "Lucida Grande", sans-serif;
  --font-xsm: 0.8em;
  --font-sm: 1.1em;
  --font-md: 2em;
  --font-lg: 2.5em;
  --font-xl: 3.2em;
  --font-xxl: 5.2em;
  --font-icon-md: 1.5em;
  font-family: var(--font-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* === Spaces === */
  --padding-md: 25px;
  --padding-lg: 35px;
  /* === Animations === */
  --animation-normal: 0.5s;
  --animation-slow: 1s;
  --animation-slower: 1.5s;
}

/* Generic */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0 auto;
  background-color: var(--background-50);
  min-width: 320px;
}
body > * {
  max-width: 1536px;
}
body > .body {
  margin: 0 auto;
  padding-left: var(--padding-md);
  padding-right: var(--padding-md);
  max-width: 1024px;
}

footer {
  padding: 15px 0;
}

/* Multimedia */
.video-full {
  position: relative;
}
.video-full .play {
  position: absolute;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--font-md);
  width: var(--font-md);
  inset: 80% 0 0 50%;
  transform: translate(-50%, -50%);
  background-color: var(--background-50);
  border-radius: 100%;
  cursor: pointer;
}
.video-full .play * {
  padding-left: 8px;
  font-size: var(--font-md);
}
.video-full video {
  height: 100vh;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .video-full .video-title {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -125%);
  }
}
/* Icons */
.icon {
  width: 32px;
  height: 32px;
}

/* Buttons and links */
button {
  padding: 5px;
  cursor: pointer;
}

button.stand-out {
  padding: 8px 10px;
  min-width: 120px;
  width: fit-content;
  border-width: 1px;
  border-style: solid;
  border-color: var(--on-primary-50);
  transition: all var(--animation-normal);
}

button.stand-out:hover {
  color: var(--secondary-50);
  border-color: var(--secondary-50);
  transition: all var(--animation-normal);
}

button.stand-out:disabled,
button.stand-out:disabled:hover {
  color: var(--on-background-50);
  border-color: var(--on-background-50);
  cursor: default;
}

a {
  color: var(--on-primary-50);
}

a.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  gap: 0 10px;
  padding: 8px 18px;
  border-width: 1px;
  border-style: solid;
  font-weight: lighter;
  background-color: transparent;
  transition: all var(--animation-normal);
}

a.button:hover {
  transition: all var(--animation-normal);
}

a.stand-out {
  font-weight: lighter;
  color: var(--tertiary-50);
}

a.stand-out:hover {
  color: var(--on-primary-50);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -2px;
  font-size: var(--font-xl);
  font-family: var(--font-heading);
}

p {
  font-weight: lighter;
}

label {
  font-weight: lighter;
}

input,
textarea {
  padding: 6px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  outline: none;
  border-bottom-color: var(--on-primary-25);
  transition: all var(--animation-normal);
}

input:hover,
textarea:hover {
  outline: none;
}

input:focus,
textarea:focus {
  outline: none;
  border-bottom-color: var(--secondary-50);
  transition: all var(--animation-normal);
}

/* Font Awesome and Icons */
i {
  color: var(--on-primary-50);
  font-size: var(--font-icon-sm);
}

/* Utility classes */
.swf-font-xxl {
  font-size: var(--font-xxl);
}

.swf-font-sm {
  font-size: var(--font-sm);
}

.swf-font-xsm {
  font-size: var(--font-xsm);
}

.swf-text-default {
  color: var(--on-primary-25);
}

.swf-text-stand-out {
  color: var(--secondary-50);
}

/* Animations */
@keyframes fadeIn {
  from {
    visibility: hidden;
    opacity: 0;
  }
  1% {
    visibility: visible;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    visibility: visible;
    opacity: 1;
  }
  99% {
    visibility: visible;
    opacity: 0;
  }
  to {
    visibility: hidden;
    opacity: 0;
  }
}