HiLo/static/css/styles.scss

// 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;
    }
  }
}

// mobile

$mobile-width: 768px;

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

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


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


html {
  background-color: $dark-grey;
}

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/hero.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  @include mobile {
    background-image: url("res/hero-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 {
    font-family: 'Hanson-Bold','Arial',sans-serif;
      color: white;
      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-family: 'Hanson-Bold','Arial',sans-serif;
  font-size: .8em;
  color: $text;
  @include mobile {
    font-size: .75em;

  }
}

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

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

.short-answer {
  padding-bottom: 10vh;
}

label {
  font-size: 1.25em;
}

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