// mixins
@mixin animation-keyframes {
  $animation-number: 0 !default !global;
  $animation-number: $animation-number + 1 !global;
  $name: unquote("การเคลื่อนไหวที่-#{$animation-number}");
  animation-name: $name;
  @at-root {
    @keyframes #{$name} {
      @content;
    }
  }
}

// fonts
$font-stack: 'Hanson-Bold','Arial',sans-serif;

@font-face {
    src: url("./fonts/Hanson-Bold.ttf");
    font-family: "Hanson-Bold";
}

@font-face {
    src: url("./fonts/FuturaPTMedium.otf");
    font-family: "Futura";
    font-weight: normal;
    font-style: normal;
}

@font-face {
    src: url("./fonts/FuturaPTLight.otf");
    font-family: "Futura-Light";
}

@font-face {
    src: url("./fonts/FuturaPTHeavy.otf");
    font-family: "Futura-Heavy";
}

// mobile

$mobile-width: 768px;

@mixin mobile {
  @media (max-width: $mobile-width) { @content }
}

@mixin desktop {
  @media (min-width: $mobile-width) { @content }
}


// colors
$dark-grey: #333;
$text: #2b5291;
$text-light: #42b8c7;
$header-stroke: #305899;

$green: #48B93E;
$red: #E34848;

html {
  background-color: $dark-grey;
  font-family: $font-stack;

  overflow-x: none;
}

body {
  overflow-y: scroll;  /* Keep scroll functionality */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar {
    display: none;
}

.hero {
  color: $dark-grey !important;
  background-color: $dark-grey !important;
  background-image: url("res/hilo-hero-text.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  @include mobile {
    background-image: url("res/hilo-hero-text-mobile.png");
  };
}

.container .arrow {

}

.arrow {
   cursor: pointer;
   width: 70px;
   margin: 0 auto;
   margin-top: 70vh;
   height: 100px;
}

.arrow:after {
     content: "";
     margin-top: 70vh;
     width: 70px;
     height: 100px;
     position: absolute;
     background-image: url('res/arrow.svg');
     background-size: cover;
     background-repeat: no-repeat;

     -webkit-animation: 3s infinite ease;
     animation: 3s infinite ease;
     @include mobile {

     }

     @include animation-keyframes {
       0%,
       100% {
            top: 50px;
       }

       50% {
            top: 80px;
       }
    }
}


.vh-25 {
  height: 25vh;
}

.vh-50 {
  height: 50vh;
}

.banner {
  color: white;
  background-image: url("res/banner.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.info-col{
  background-color: #fff;
}

.info-header {
  color: white;
  font-family: $font-stack;
  text-stroke: 3px $header-stroke;
  -webkit-text-stroke: 3px $header-stroke;

  @include mobile {
    font-size: 1.25em;
    text-stroke: 2px $header-stroke;
    -webkit-text-stroke: 2px $header-stroke;
  }
}

.info {
  font-size: .8em;
  color: $text;
  font-family: $font-stack;
  @include mobile {
    font-size: .75em;

  }
}

#insta-section {
  background-color: $dark-grey;
}

.bg-colored:before {
    right: -999em;
    background:  #0b3b52;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

.poll {
  color: white;
  background-image: url("res/gradient-mobile.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: $font-stack;
  font-weight: lighter;
  font-size: .75em;
  @include mobile {
    background-image: url("res/gradient-mobile.png");
  };
}

.short-answer {
  font-size: 1.2em;
}

.title {
  color: $text-light;
  font-size: 1.45em;
}

.subtitle {
  color: $text-light;
  font-size: 1.15em;
}

label {
  font-size: 1.25em;
}

.emote img {
  width: 25vw;
  height: auto;
}

.btn {
  color: $text;
  border-image-repeat: none;
}

.hi {
  color: $green;
}

.lo {
  color: $red;
}