@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;1,600&display=swap');

:root {
  --gradient-orange: #ee7752;
  --gradient-raspberry: #e73c7e;
  --gradient-blue: #23a6d5;
  --gradient-green: #23d5ab;

  --fast-billy-color-main: orange;
  --method-girl-color-main: #37f1ff;
}


.w100 { width: 100%; }
.flex-start { align-items: flex-start; }
.flex-end { align-items: flex-end; }

@media screen and (min-width: 768px) {
  .mt-md-10 { margin-top: 10em; }
  .mt-md-20 { margin-top: 20em; }
}


.skew {
  @media only screen and (min-width: 576px) {
    transform: skew(-5deg);
  }
}


.fast-billy { color: var(--fast-billy-color-main); }
.method-girl { color: var(--method-girl-color-main); }
.spectrum {
  background: linear-gradient(0.25turn,  #ffa500, #fff900, #00ffff);
  color: transparent;
  background-clip: text;
}

.btn.rtaswc-btn-fast {
  border: none;
  border-radius: 0;
  text-transform: uppercase;
  transform: skew(-12deg, 0);
  padding-left: 2.8em !important;
  background: linear-gradient(to right,
    white, white .1em,
    transparent .1em, transparent .5em,
    white .5em, white .7em,
    transparent .7em, transparent 1em,
    white 1em, white 1.3em,
    transparent 1.3em, transparent 1.5em,
    white 1.5em, white 1.9em,
    transparent 1.9em, transparent 2em,
    white 2em);
  color: black;

  &:hover {
    color: var(--method-girl-color-main);
  }
}

body, html {
  position: relative;
}

/* Section generic settings */
section {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

section h3 {
  text-transform: uppercase;
}

section h4 {
  margin-top: 1em;
}

  /* .col is handling background for larger widths */
section .row {
  @media screen and (max-width: 767px) {
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(10px);
  }
}

section .container {
  padding-top: 0;
  padding-bottom: 0;

  @media screen and (min-width: 576px) {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

section .col {
  background-color: transparent;
  color: white;
  padding: 2em;
  font-size: larger;

  /* .row is handling background for narrow width */
  @media screen and (min-width: 768px) {
    background-color: rgba(0, 0, 0, .7);
    backdrop-filter: blur(10px);
  }
}

section blockquote {
  font-size: 200%;
  font-family: "Kanit", serif;
  font-weight: 600;
  font-style: italic;
  display: inline;
}


#flash-messages {
  padding: 0.5em;
  background-color: transparent;
}

#flash-messages div.alert {
  margin: 0;
  display: inline-block;
  border-radius: 0;

  @media screen and (min-width: 576px) {
    transform: skew(-6deg);
  }
}


#splash-screen {
  background: rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;


  @media screen and (max-width: 575px) {
    background: black;
    z-index: -1000;
    padding-bottom: 2em;
  }

  @media screen and (min-width: 576px) {
    min-height: 50vh;
  }

  @media screen and (min-width: 768px) {
    min-height: 70vh;
  }
}

#splash-screen .container {
  min-height: 100%;
}

#splash-screen abbr {
  text-decoration: none;
}

#splash-screen h2 {
  margin-top: 1em;
  text-transform: uppercase;
  font-style: italic;
  font-size: smaller;
}

.video-container-sm {
  @media screen and (max-width: 575px) {
    aspect-ratio: 16 / 9;
  }
}

#splash-screen video {
  @media screen and (max-width: 575px) {
    max-height: 100%;
  }

  @media screen and (min-width: 576px) {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
    z-index: -999;
  }
}

#logo-space {
  @media screen and (min-width: 576px) {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

#logo-space div.col {
  @media screen and (max-width: 575px) {
    padding: 1em;
    background-color: black;

    & svg {
      width: 70%;
    }
  }

  @media screen and (max-width: 767px) {
    background-color: rgba(0, 0, 0, .7);
    backdrop-filter: blur(10px);
  }
}

.newsletter-section {
  background: linear-gradient(0, var(--gradient-orange), var(--gradient-raspberry), var(--gradient-blue), var(--gradient-green));
  background-attachment: fixed;
}

.newsletter-section .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.newsletter-section .col, .newsletter-section .row {
    background-color: transparent;
    backdrop-filter: initial;
}

#story {
  background-image: url("/media/smartassembler.jpg");
}

#tribute {
  background-image: url("/media/cordless-screwdriver.jpg");
}

#team {
  background-image: url("/media/screws.jpg");
}

#support {
  background-image: url("/media/reporter.jpg");
}

/* Form */
.newsletter-form {
  & #new_subscriber_name {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  & #new_subscriber_email {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* footer */
footer {
  background: #333333;
  padding-top: 1em;
  padding-bottom: 1em;
  border-top: solid 1px black;
  color: #aaaaaa;
}

/* Captcha */
#captcha-container {
  display: none;
  position: fixed;
  background-color: rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
  min-width: 100vw;
  min-height: 100vh;
  top: 0;
  left: 0;
  z-index: 1000;
}

#captcha-container .container {
  background-color: white;
  border-radius: var(--bs-border-radius);
}

svg#excelsior {
  width: 20%;
  min-width: 100px;
}

svg#excelsior path {
  fill:none;
  stroke:rgba(0,0,0,.5  );
  stroke-width:2;
  stroke-linecap: round;
}