/*
      MAIN MIXIN
      Handcrafted By WhiteCube.
      ---------------------------

      Shapes, positions and sets a rotation to pseudo-element
      in order to make a leaning border (with a background-image
      if you want to).
      The anchor point will be positionned exactly where you
      want it, even if the pseudo-element's anchor point is
      outside the parent-element.
      Use this mixin along with your other styling rules inside
      your pseudo-element in order to make something beautiful.

      -----

      @include kaduk( $position, $degrees, $width )

      $position: string ('bottom-right'|'bottom-left'|'top-right'|'top-left');
      $degrees: int (with 'deg' unit)
      $width: int (with css width unit. Width of pseudo-element)

      -----

      # EXAMPLE - TEST IT
      ---------------------------
      In order to truly understand what this does,
      test this code.

      ## HTML
      -------

      <div class="kaduk-test"><p>Some content</p></div>

      ## SCSS
      -------

      .kaduk-test{
            position: relative;
            width: 400px;
            height: 200px;
            background: #000;
            &:before{
                  @include kaduk('bottom-right', -3.5deg, 200%);
                  background: rgba(#c8c8c8, 0.8);
            }
      }


      # FUNCTIONS
      ---------------------------
*/
/*
      # MIXINS
      ---------------------------
*/
/**
 * Needs a bit of JS to work:
 * 
 * yarn add object-fit-images
 *
 * Then in main JS script
 * import objectFitImages from 'object-fit-images';
 * objectFitImages();
 */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.wrapper {
  width: 64em;
  max-width: 90%;
  margin: 0 auto;
  position: relative;
}
.wrapper.grid {
  background: repeating-linear-gradient(90deg, tomato, tomato 4.7526041667%, white 4.7526041667%, white 8.6588541667%);
}

.sro {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

*:focus {
  outline: none;
}

.logo3d {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: #1A092B;
}
.logo3d svg {
  display: none;
}

.webcam-logo {
  width: 200px;
  height: 200px;
  position: fixed;
}
.webcam-logo__canvas {
  width: 200px;
  height: 200px;
}
.webcam-logo svg {
  display: none;
}

.sub-count {
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  justify-content: center;
}
.sub-count__canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

.webcam {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-color: #1A092B;
}
.webcam:before, .webcam:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: top right;
  top: 0;
  background-size: cover;
  mix-blend-mode: lighten;
}
.webcam:before {
  background-image: none;
}
.webcam--don:before, .webcam--sub:before {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
}
.webcam--don:before {
  background-image: url("../video/cam-don.gif");
}
.webcam--sub:before {
  background-image: url("../video/cam-sub.gif");
}
.webcam:after {
  opacity: 0;
  mix-blend-mode: lighten;
  background-image: url("../video/donation_leaks.gif");
  transition: opacity 200ms;
  background-color: #1A092B;
}
.webcam--alert:after {
  opacity: 1;
}

.big-logo {
  width: 1200px;
  height: 1200px;
}
.big-logo__canvas {
  width: 1200px;
  height: 1200px;
}
.big-logo svg {
  display: none;
}

.home {
  background: #1A092B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  height: 100vh;
}
.home__logo {
  width: 7.5rem;
}
.home__title {
  font-family: Heebo, sans-serif;
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-top: 1.25rem;
  letter-spacing: 3px;
}