styles.css

@font-face {
  font-family: 'Suisse Intl';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/SuisseIntl-Regular-WebM.woff') format('woff');
}
@font-face {
  font-family: 'Suisse Intl';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/SuisseIntl-RegularItalic-WebM.woff') format('woff');
}
@font-face {
  font-family: 'Suisse Intl';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/SuisseIntl-Bold-WebM.woff') format('woff');
}
@font-face {
  font-family: 'Suisse Intl';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/SuisseIntl-BoldItalic-WebM.woff') format('woff');
}
@font-face {
  font-family: 'Radio Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/PPRadioGrotesk-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Radio Grotesk Light';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/PPRadioGrotesk-Light.woff') format('woff');
}
@font-face {
  font-family: 'Reckless Neue';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/RecklessNeue-Light.woff') format('woff');
}

.markdown p:not(:last-child) {
  margin-bottom: 1rem;
}
section > .text-center .markdown img {
  margin: auto;
}
section > .text-right .markdown img {
  margin-left: auto;
}

/* Hide various rich-text toolbar items */
.with-toolbar .sticky {
  width: 280px !important;
}
.with-toolbar .sticky .grid .grid span.z-10,
.with-toolbar .sticky .grid .grid > div,
.with-toolbar span[data-test="popoverRichTextButton"],
.with-toolbar span[data-test="quoteButton"],
.with-toolbar span[data-test="codeButton"],
.with-toolbar span[data-test="codeBlockButton"] {
  display: none;
}
.with-toolbar span[data-test="italicButton"],
.with-toolbar span[data-test="boldButton"] {
  visibility: visible !important;
  pointer-events: auto !important;
}
.with-toolbar span[data-test="italicButton"] {
  border-right: 1px solid rgb(225 221 236 / var(--tw-border-opacity));
}

/* Make global settings modal sidebar width and remove overlay */
#modal-root > div > div > div {
  max-width: 450px;
}
#modal-root > div > div:last-child {
  display: none;
}

/* dtravel Passport specific */
@keyframes slideIn {
  from {
    top: -40px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

body { 
  background-color: #070706;
}
[data-tinafield='blocks.0'] .flex-col {
  margin-top: -50px;
}
[data-tinafield='blocks.0'] h1, 
[data-tinafield='blocks.0'] h2, 
[data-tinafield='blocks.0'] h3, 
[data-tinafield='blocks.0'] h4, 
[data-tinafield='blocks.0'] a {
  position: relative;
  z-index: 2;
}
[data-tinafield='blocks.0'] h4 {
  letter-spacing: .1em;
  opacity: .6;
}
[data-tinafield='blocks.0'] h2, 
[data-tinafield='blocks.0'] h1 {
  letter-spacing: -0.015em;
}
[data-tinafield='blocks.0'] h3 {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
[data-tinafield='blocks.0'] a { 
  border-radius: 4px; 
  font-family: 'Radio Grotesk';
  font-size: 18px !important; 
  line-height: 18px !important;
  height: unset !important;
  padding: 16px 24px; 
  transition: opacity .2s ease;
  width: 100%;
}
[data-tinafield='blocks.0'] .order-4 {
  justify-content: center;
  width: 100%;
}
[data-tinafield='blocks.0'] .order-4 a:first-of-type {
  padding-top: 17px;
}
[data-tinafield='blocks.0'] a:hover {
  opacity: .8 !important;
}

[data-tinafield='blocks.1'] {
  background-color: #000000;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 1;
}
#background-video {
  height: 100vh;
  overflow: hidden;
}
#background-video video {
  height: 100vh;
  object-fit: cover;
  width: 100vw;
}
[data-tinafield='blocks.1'] .max-w-desktop-full {
  max-width: 100vw !important; 
  padding: 0 !important;
}

@media (min-width: 1025px){
  .max-w-desktop-full {
    max-width: 100vw !important;
  }
  [data-tinafield='blocks.0'] .flex-col {
    margin-top: 0;
    max-width: none !important;
  }
 [data-tinafield='blocks.1'] img {
    display: none;
  }
  [data-tinafield='blocks.1'] {
    display: block;
  }
  
  [data-tinafield='blocks.0'] .order-4 {
    justify-content: flex-start;
  }

  [data-tinafield='blocks.0'] h1, 
  [data-tinafield='blocks.0'] h2, 
  [data-tinafield='blocks.0'] h3, 
  [data-tinafield='blocks.0'] h4, 
  [data-tinafield='blocks.0'] .order-4 a {
  display: none;
  max-width: 100%;
  opacity: 0;
  overflow: hidden;
  text-align: left;
  transition: opacity .3s ease-in;
  }
  body.animated [data-tinafield='blocks.0'] h1, 
  body.animated [data-tinafield='blocks.0'] h2, 
  body.animated [data-tinafield='blocks.0'] h3, 
  body.animated [data-tinafield='blocks.0'] .order-4 a {
    animation: 1s linear 0s 1 slideIn;
    display: block;
    opacity: 1;
  }
  body.animated [data-tinafield='blocks.0'] h4 {
    animation: 1s linear 0s 1 slideIn;
    display: block;
    opacity: .6;
  }
}

@media (min-width: 600px){
  [data-tinafield='blocks.0'] .flex-col {
    max-width: 568px;
    margin-left: auto;
    margin-right: auto;
  }

  [data-tinafield='blocks.0'] h2, 
  [data-tinafield='blocks.0'] h1 {
    font-size: 88px;
    line-height: 88px;
    letter-spacing: -0.025em;
  }
  
  [data-tinafield='blocks.0'] h4 {
    font-size: 16px;
    line-height: 20px;
  }

  [data-tinafield='blocks.0'] .order-4 a {
    width: auto;
  }
}
@media (max-width: 600px){
  .relative > img.w-full {
    height: 600px;
    object-fit: cover;
  }
}

/* hide the hamburger */
.absolute.top-0.p-4.right-0.hidden.sm\:block,
.absolute.top-0.p-4.right-0.hidden.sm\:block + ul {
  display: none;
}

@tailwind base;
@tailwind components;
@tailwind utilities;