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

// 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/WildYouth-Regular.otf");
    font-family: "WildYouth";
}

@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;
$darker-grey: #4b4b4b;
$text: #000000;
$text-light: #fff;
$header-stroke: #305899;

$green: #80ea7b;
$red: #f85151;

html {
  background-color: black;
  font-family: $font-stack;

  overflow-x: none!important;
}

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

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

.hero {
  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;
   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-size: contain;
  background-attachment: fixed;
  width: 100vw;
}

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

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

  @include mobile {
    font-size: 1.5em;
    //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 {
  border-bottom: 2px solid white;
  font-family: $font-stack;
  div {
    background-color: #ffffff;
  }
}

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

.poll-section {
  text-align: center;
}

.poll {
  color: white;
  //background-image: url("res/poll-gradient.png");
  background: $darker-grey;
  background: -webkit-linear-gradient(#191919, $darker-grey);
  background: linear-gradient(#191919, $darker-grey);
  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.1em;
}

.title {
  color: $text-light;
  font-size: 1.40em;
  text-align: center;
  @include desktop {
    font-size: 1.45em;
  }
}

.subtitle {
  color: $text-light;
  font-size: 1.1em;
  @include desktop {
    font-size: 1.2em;
  }
}

label {
  font-size: 1.25em;
}

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

.hi {
  color: $green;
}

.lo {
  color: $red;
}

[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
  width: 25vw;
  height: auto;
  @include desktop {
    width: 10vw;
    height: auto;
    margin: auto;
    display: block;
  };
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid $text;
}

.hidden {
  display: none;
}

.w-80 {
  width: 80%;
}

.results-emote {
  width: 150px;
  height: auto;
}

.question {
  font-size: 2em;
}