/*This Pen is a fork of Antti Mattila's Pen Variable Fonts, Animated.*/

@font-face {
  font-family: 'Phase-B';
  src: url('https://v-fonts.com/assets/fonts/Phase-AGX.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Charybdis';
  src: url('https://v-fonts.com/assets/fonts/charybdisVF.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/Inter.var.woff2?v=3.8") format("woff2");
}

::-moz-selection {
 color: black;
 background-color: white;
}

::selection {
 color: black;
 background-color: white;
}

::-webkit-scrollbar {
    width: 17px;
}

::-webkit-scrollbar-track {
    background: black;
    border: none;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) inset;
}
 
::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: white;
}

body {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 background-color:black;
 font-family: "Phase-B", Georgia, "New Times Roman", serif;
 font-size: 13rem;
 color:white;
	font-weight: normal;
 line-height: .8;
 font-variation-settings:'phon' 0,'phtw' 0,'phth' 0;
}

h3 {
 font-family: 'Charybdis', sans-serif;
 font-variation-settings: "wdth" 800;
 font-feature-settings: 'liga' 1, 'kern' 1;
 line-height: 1.6;
 font-size: 20px;
 text-align: left;
 -webkit-hyphens: auto;
	-moz-hyphens: auto !important;
	-ms-hyphens: auto !important;
 hyphens: auto !important;
}

h4 {
 font-family: 'Charybdis', sans-serif;
 font-variation-settings: "wdth" 800;
 font-feature-settings: 'liga' 1, 'kern' 1;
 line-height: 1.6;
 font-size: 25px;
 text-transform: uppercase;
 text-align: center;
 -webkit-hyphens: auto;
	-moz-hyphens: auto !important;
	-ms-hyphens: auto !important;
 hyphens: auto !important;
}

h5 {
 font-family: 'Charybdis', sans-serif;
 font-variation-settings: "wdth" 800;
  font-feature-settings: 'liga' 1, 'kern' 1;
 line-height: 1.6;
 font-size: 20px;
 text-transform: uppercase;
 text-align: center;
 -webkit-hyphens: auto;
	-moz-hyphens: auto !important;
	-ms-hyphens: auto !important;
 hyphens: auto !important;
}

p {
  font-family: 'Inter var', sans-serif;
  text-rendering: optimizelegibility;
  text-align: left;
  line-height: 1.7;
  font-size: 19px;
  letter-spacing: -0.014em;
  -webkit-hyphens: auto;
	-moz-hyphens: auto !important;
	-ms-hyphens: auto !important;
  hyphens: auto !important;
 	font-feature-settings: 'liga' 1, 'calt' 1, 'ss01' 1, 'kern' 1, 'case' 1, 'cv10' 1, 'cv05' 1, 'cv06' 1;
	-webkit-font-feature-settings: 'liga' 1, 'calt' 1, 'ss01' 1, 'kern' 1, 'case' 1, 'cv10' 1, 'cv05' 1, 'cv06' 1;
 	-moz-font-feature-settings:  'liga' 1, 'calt' 1, 'ss01' 1, 'kern' 1, 'case' 1, 'cv10' 1, 'cv05' 1, 'cv06' 1;
	-ms-font-feature-settings: 'liga' 1, 'calt' 1, 'ss01' 1, 'kern' 1, 'case' 1, 'cv10' 1, 'cv05' 1, 'cv06' 1;
	-o-font-feature-settings: 'liga' 1, 'calt' 1, 'ss01' 1, 'kern' 1, 'case' 1, 'cv10' 1, 'cv05' 1, 'cv06' 1;
}

a {
  color:white;
  font-variation-settings: "wdth" 1000;
  text-decoration:none;
  border-bottom:2px solid white;
  padding-bottom: 3px;
}

a:hover {
  animation: flow 3s ease-in-out infinite;
  background: linear-gradient(-60deg, #904e95, #904e95, #e73c7e, #ee7752);
  background-size: 800%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes flow {
  0% {
    background-position: 0 50%;
  }
   50% {
    background-position: 100% 50%;
  }
   100% {
    background-position: 0% 50%;
  }
}

.rotate {
 transform: rotate3d(20, 20, 1, 45deg);
 z-index: -100;
}

.underline {
  padding:15px 30px;
  background-color:black;  
}
.underline2 {
  border: 2px solid white;
  border-radius: 50%;
  padding:25px 20px 20px;
  background-color:black;
}

.section {
  margin-top: 40px;
  z-index:100;
}

.section2 {
  margin-top: 50px;
  padding-bottom:50px;
  padding-top: 30px;
}

.block {
  border-bottom: 2px solid white;
  margin-top: 100px;
  padding-top: 20px;
  padding-bottom:100px;
}

.anim {
  animation-name: bounce;
  animation-duration: 2.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.anim1 {
  animation-delay: 0;
}

.anim2 {
  animation-delay: 0.5s;
}

.anim3 {
  animation-delay: 1s;
}


.anim4 {
  animation-delay: 0s;
}
.anim5 {
  animation-delay: 0.25s;
}
.anim6 {
  animation-delay: 0.5s;
}
.anim7 {
  animation-delay: 0.75s;
}
.anim8 {
  animation-delay: 1s;
}
.anim9 {
  animation-delay: 1.25s;
}
.anim10 {
  animation-delay: 1.5s;
}
.anim11 {
  animation-delay: 1.75s;
}
.anim12 {
  animation-delay: 2s;
}
.anim13 {
  animation-delay: 2.25s;
}


@keyframes bounce {
  0% {
    font-variation-settings: 
      'phon' 0,'phtw' 0,'phth' 0;  
  }
  100% {
    font-variation-settings: 
      'phon' 100,'phtw' 100,'phth' 100;  
  }
}

.dot {
  margin-left:auto;
  margin-right:auto;
  border-radius: 50%;
  margin-bottom:25px;
  width: 60%;
  height: 10px;
  background-color: white;
}

.dot-small {
 margin-top: 25px;
 margin-left:auto;
 margin-right:auto;
 border-radius: 50%;
 width: 15px;
 height: 15px;
 background-color: white;
}

----

@charset "UTF-8";
/*-----------------------------------*\

  $TOAST-GRID

  An insane grid.
  You'd be mad to use it.

  Usage
  =====

  Assuming default values:

  <div class="grid">
    <div class="grid__col grid__col--1-of-2">
      A half-width column.
    </div>
    <div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
      A quarter, pulled left by its own width. You get this, right?
    </div>
  </div>


  Customisation
  =============

  $toast-grid-namespace and $toast-grid-column-namespace
  adjusts the class names for the grid. With
  default values, grid wrappers have a class
  of '.grid' and columns '.grid__col'.

  $toast-col-groups(n) adjusts column divisions.
  For example, $toast-col-groups(12) will produce
  a 12-column grid. $col-groups(3,6,8)
  will produce a 3-, 6-, and 8-column grid.

  $toast-gutter-width is—you guessed it—the gutter
  width. Accepts any unit.

  That's it. Have fun.

\*-----------------------------------*/
.grid {
  list-style: none;
  margin-left: -20px;}

.grid .grid__col {
 display:inline-block;
}

.grid__col--2-of-2, .grid__col--3-of-3, .grid__col--4-of-4, .grid__col--5-of-5, .grid__col--6-of-6, .grid__col--8-of-8, .grid__col--12-of-12 {
  width: 100%; }

.grid__col--1-of-2, .grid__col--2-of-4, .grid__col--3-of-6, .grid__col--4-of-8, .grid__col--6-of-12 {
  width: 50%; }

.grid__col--1-of-3, .grid__col--2-of-6, .grid__col--4-of-12 {
  width: 33.33333%; }

.grid__col--2-of-3, .grid__col--4-of-6, .grid__col--8-of-12 {
  width: 66.66667%; }

.grid__col--1-of-4, .grid__col--2-of-8, .grid__col--3-of-12 {
  width: 25%; }

.grid__col--3-of-4, .grid__col--6-of-8, .grid__col--9-of-12 {
  width: 75%; }

.grid__col--push-2-of-2, .grid__col--push-3-of-3, .grid__col--push-4-of-4, .grid__col--push-5-of-5, .grid__col--push-6-of-6, .grid__col--push-8-of-8, .grid__col--push-12-of-12 {
  margin-left: 100%; }

.grid__col--push-1-of-2, .grid__col--push-2-of-4, .grid__col--push-3-of-6, .grid__col--push-4-of-8, .grid__col--push-6-of-12 {
  margin-left: 50%; }

.grid__col--push-1-of-3, .grid__col--push-2-of-6, .grid__col--push-4-of-12 {
  margin-left: 33.33333%; }

.grid__col--push-2-of-3, .grid__col--push-4-of-6, .grid__col--push-8-of-12 {
  margin-left: 66.66667%; }

.grid__col--push-1-of-4, .grid__col--push-2-of-8, .grid__col--push-3-of-12 {
  margin-left: 25%; }

.grid__col--push-3-of-4, .grid__col--push-6-of-8, .grid__col--push-9-of-12 {
  margin-left: 75%; }

.grid__col--pull-2-of-2, .grid__col--pull-3-of-3, .grid__col--pull-4-of-4, .grid__col--pull-5-of-5, .grid__col--pull-6-of-6, .grid__col--pull-8-of-8, .grid__col--pull-12-of-12 {
  margin-left: -100%; }

.grid__col--pull-1-of-2, .grid__col--pull-2-of-4, .grid__col--pull-3-of-6, .grid__col--pull-4-of-8, .grid__col--pull-6-of-12 {
  margin-left: -50%; }

.grid__col--pull-1-of-3, .grid__col--pull-2-of-6, .grid__col--pull-4-of-12 {
  margin-left: -33.33333%; }

.grid__col--pull-2-of-3, .grid__col--pull-4-of-6, .grid__col--pull-8-of-12 {
  margin-left: -66.66667%; }

.grid__col--pull-1-of-4, .grid__col--pull-2-of-8, .grid__col--pull-3-of-12 {
  margin-left: -25%; }

.grid__col--pull-3-of-4, .grid__col--pull-6-of-8, .grid__col--pull-9-of-12 {
  margin-left: -75%; }

.grid__col--1-of-5 {
  width: 20%; }

.grid__col--push-1-of-5 {
  margin-left: 20%; }

.grid__col--pull-1-of-5 {
  margin-left: -20%; }

.grid__col--2-of-5 {
  width: 40%; }

.grid__col--push-2-of-5 {
  margin-left: 40%; }

.grid__col--pull-2-of-5 {
  margin-left: -40%; }

.grid__col--3-of-5 {
  width: 60%; }

.grid__col--push-3-of-5 {
  margin-left: 60%; }

.grid__col--pull-3-of-5 {
  margin-left: -60%; }

.grid__col--4-of-5 {
  width: 80%; }

.grid__col--push-4-of-5 {
  margin-left: 80%; }

.grid__col--pull-4-of-5 {
  margin-left: -80%; }

.grid__col--1-of-6 {
  width: 16.66667%; }

.grid__col--push-1-of-6 {
  margin-left: 16.66667%; }

.grid__col--pull-1-of-6 {
  margin-left: -16.66667%; }

.grid__col--5-of-6 {
  width: 83.33333%; }

.grid__col--push-5-of-6 {
  margin-left: 83.33333%; }

.grid__col--pull-5-of-6 {
  margin-left: -83.33333%; }

.grid__col--1-of-8 {
  width: 12.5%; }

.grid__col--push-1-of-8 {
  margin-left: 12.5%; }

.grid__col--pull-1-of-8 {
  margin-left: -12.5%; }

.grid__col--3-of-8 {
  width: 37.5%; }

.grid__col--push-3-of-8 {
  margin-left: 37.5%; }

.grid__col--pull-3-of-8 {
  margin-left: -37.5%; }

.grid__col--5-of-8 {
  width: 62.5%; }

.grid__col--push-5-of-8 {
  margin-left: 62.5%; }

.grid__col--pull-5-of-8 {
  margin-left: -62.5%; }

.grid__col--7-of-8 {
  width: 87.5%; }

.grid__col--push-7-of-8 {
  margin-left: 87.5%; }

.grid__col--pull-7-of-8 {
  margin-left: -87.5%; }

.grid__col--1-of-12 {
  width: 8.33333%; }

.grid__col--push-1-of-12 {
  margin-left: 8.33333%; }

.grid__col--pull-1-of-12 {
  margin-left: -8.33333%; }

.grid__col--2-of-12 {
  width: 16.66667%; }

.grid__col--push-2-of-12 {
  margin-left: 16.66667%; }

.grid__col--pull-2-of-12 {
  margin-left: -16.66667%; }

.grid__col--5-of-12 {
  width: 41.66667%; }

.grid__col--push-5-of-12 {
  margin-left: 41.66667%; }

.grid__col--pull-5-of-12 {
  margin-left: -41.66667%; }

.grid__col--7-of-12 {
  width: 58.33333%; }

.grid__col--push-7-of-12 {
  margin-left: 58.33333%; }

.grid__col--pull-7-of-12 {
  margin-left: -58.33333%; }

.grid__col--10-of-12 {
  width: 83.33333%; }

.grid__col--push-10-of-12 {
  margin-left: 83.33333%; }

.grid__col--pull-10-of-12 {
  margin-left: -83.33333%; }

.grid__col--11-of-12 {
  width: 91.66667%; }

.grid__col--push-11-of-12 {
  margin-left: 91.66667%; }

.grid__col--pull-11-of-12 {
  margin-left: -91.66667%; }

.grid__col {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: 20px;
  vertical-align: top; }
  @media (max-width: 700px) {
    .grid__col {
      display: block;
      margin-left: 0;
      margin-right: 0;
      width: auto; } }
  @media (max-width: 700px) and (min-width: 480px) {
    .grid__col[class*="grid__col--m-"] {
      display: inline-block;
      margin-right: -.24em; }
    .grid__col.grid__col--m-1-of-2, .grid__col.grid__col--m-2-of-4 {
      width: 50%; }
    .grid__col.grid__col--m-1-of-3 {
      width: 33.33333%; }
    .grid__col.grid__col--m-2-of-3 {
      width: 66.66667%; }
    .grid__col.grid__col--m-1-of-4 {
      width: 25%; }
    .grid__col.grid__col--m-3-of-4 {
      width: 75%; } }
  @media (max-width: 480px) {
    .grid__col[class*="grid__col--s-"] {
      display: inline-block;
      margin-right: -.24em; }
    .grid__col.grid__col--s-1-of-2, .grid__col.grid__col--s-2-of-4 {
      width: 50%; }
    .grid__col.grid__col--s-1-of-3 {
      width: 33.33333%; }
    .grid__col.grid__col--s-2-of-3 {
      width: 66.66667%; }
    .grid__col.grid__col--s-1-of-4 {
      width: 25%; }
    .grid__col.grid__col--s-3-of-4 {
      width: 75%; } }

.grid__col--centered {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.grid__col--d-first {
  float: left; }

.grid__col--d-last {
  float: right; }

.grid--no-gutter {
  margin-left: 0;
  width: 100%; }
  .grid--no-gutter .grid__col {
    padding-left: 0; }
  .grid--no-gutter .grid__col--span-all {
    margin-left: 0;
    width: 100%; }

.grid__col--ab {
  vertical-align: bottom; }

.grid__col--am {
  vertical-align: middle; }

/*# sourceMappingURL=grid.css.map */