/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(12, 1fr);
}
.grid[columns], .grid[data-columns] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(12, 1fr);
}
.grid.gap, .grid[gap], .grid[data-gap] {
  grid-gap: 2em;
}
.grid.small-gap, .grid[small-gap], .grid[data-small-gap] {
  grid-gap: 1em;
}
.grid.tiny-gap, .grid[tiny-gap], .grid[data-tiny-gap] {
  grid-gap: 0.5em;
}
.grid.no-gap, .grid[no-gap], .grid[data-no-gap] {
  grid-gap: 0;
}

.grid.columns-24, .grid[columns="24"], .grid[data-columns="24"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(24, 1fr);
}
.grid.columns-24 > *, .grid[columns="24"] > *, .grid[data-columns="24"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-23, .grid[columns="23"], .grid[data-columns="23"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(23, 1fr);
}
.grid.columns-23 > *, .grid[columns="23"] > *, .grid[data-columns="23"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-22, .grid[columns="22"], .grid[data-columns="22"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(22, 1fr);
}
.grid.columns-22 > *, .grid[columns="22"] > *, .grid[data-columns="22"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-21, .grid[columns="21"], .grid[data-columns="21"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(21, 1fr);
}
.grid.columns-21 > *, .grid[columns="21"] > *, .grid[data-columns="21"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-20, .grid[columns="20"], .grid[data-columns="20"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(20, 1fr);
}
.grid.columns-20 > *, .grid[columns="20"] > *, .grid[data-columns="20"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-19, .grid[columns="19"], .grid[data-columns="19"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(19, 1fr);
}
.grid.columns-19 > *, .grid[columns="19"] > *, .grid[data-columns="19"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-18, .grid[columns="18"], .grid[data-columns="18"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(18, 1fr);
}
.grid.columns-18 > *, .grid[columns="18"] > *, .grid[data-columns="18"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-17, .grid[columns="17"], .grid[data-columns="17"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(17, 1fr);
}
.grid.columns-17 > *, .grid[columns="17"] > *, .grid[data-columns="17"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-16, .grid[columns="16"], .grid[data-columns="16"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(16, 1fr);
}
.grid.columns-16 > *, .grid[columns="16"] > *, .grid[data-columns="16"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-15, .grid[columns="15"], .grid[data-columns="15"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(15, 1fr);
}
.grid.columns-15 > *, .grid[columns="15"] > *, .grid[data-columns="15"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-14, .grid[columns="14"], .grid[data-columns="14"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(14, 1fr);
}
.grid.columns-14 > *, .grid[columns="14"] > *, .grid[data-columns="14"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-13, .grid[columns="13"], .grid[data-columns="13"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(13, 1fr);
}
.grid.columns-13 > *, .grid[columns="13"] > *, .grid[data-columns="13"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-12, .grid[columns="12"], .grid[data-columns="12"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(12, 1fr);
}
.grid.columns-12 > *, .grid[columns="12"] > *, .grid[data-columns="12"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-11, .grid[columns="11"], .grid[data-columns="11"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(11, 1fr);
}
.grid.columns-11 > *, .grid[columns="11"] > *, .grid[data-columns="11"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-10, .grid[columns="10"], .grid[data-columns="10"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(10, 1fr);
}
.grid.columns-10 > *, .grid[columns="10"] > *, .grid[data-columns="10"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-9, .grid[columns="9"], .grid[data-columns="9"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(9, 1fr);
}
.grid.columns-9 > *, .grid[columns="9"] > *, .grid[data-columns="9"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-8, .grid[columns="8"], .grid[data-columns="8"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(8, 1fr);
}
.grid.columns-8 > *, .grid[columns="8"] > *, .grid[data-columns="8"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-7, .grid[columns="7"], .grid[data-columns="7"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(7, 1fr);
}
.grid.columns-7 > *, .grid[columns="7"] > *, .grid[data-columns="7"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-6, .grid[columns="6"], .grid[data-columns="6"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(6, 1fr);
}
.grid.columns-6 > *, .grid[columns="6"] > *, .grid[data-columns="6"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-5, .grid[columns="5"], .grid[data-columns="5"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(5, 1fr);
}
.grid.columns-5 > *, .grid[columns="5"] > *, .grid[data-columns="5"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-4, .grid[columns="4"], .grid[data-columns="4"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(4, 1fr);
}
.grid.columns-4 > *, .grid[columns="4"] > *, .grid[data-columns="4"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-3, .grid[columns="3"], .grid[data-columns="3"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(3, 1fr);
}
.grid.columns-3 > *, .grid[columns="3"] > *, .grid[data-columns="3"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-2, .grid[columns="2"], .grid[data-columns="2"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(2, 1fr);
}
.grid.columns-2 > *, .grid[columns="2"] > *, .grid[data-columns="2"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid.columns-1, .grid[columns="1"], .grid[data-columns="1"] {
  -ms-grid-columns: 1fr [12];
  grid-template-columns: repeat(1, 1fr);
}
.grid.columns-1 > *, .grid[columns="1"] > *, .grid[data-columns="1"] > * {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}

.grid > *.span-1 {
  -ms-grid-column-span: 1;
  grid-column: auto/span 1;
}
.grid > *.offset-1 {
  grid-column-start: 2 !important;
}

.grid > *.span-2 {
  -ms-grid-column-span: 2;
  grid-column: auto/span 2;
}
.grid > *.offset-2 {
  grid-column-start: 3 !important;
}

.grid > *.span-3 {
  -ms-grid-column-span: 3;
  grid-column: auto/span 3;
}
.grid > *.offset-3 {
  grid-column-start: 4 !important;
}

.grid > *.span-4 {
  -ms-grid-column-span: 4;
  grid-column: auto/span 4;
}
.grid > *.offset-4 {
  grid-column-start: 5 !important;
}

.grid > *.span-5 {
  -ms-grid-column-span: 5;
  grid-column: auto/span 5;
}
.grid > *.offset-5 {
  grid-column-start: 6 !important;
}

.grid > *.span-6 {
  -ms-grid-column-span: 6;
  grid-column: auto/span 6;
}
.grid > *.offset-6 {
  grid-column-start: 7 !important;
}

.grid > *.span-7 {
  -ms-grid-column-span: 7;
  grid-column: auto/span 7;
}
.grid > *.offset-7 {
  grid-column-start: 8 !important;
}

.grid > *.span-8 {
  -ms-grid-column-span: 8;
  grid-column: auto/span 8;
}
.grid > *.offset-8 {
  grid-column-start: 9 !important;
}

.grid > *.span-9 {
  -ms-grid-column-span: 9;
  grid-column: auto/span 9;
}
.grid > *.offset-9 {
  grid-column-start: 10 !important;
}

.grid > *.span-10 {
  -ms-grid-column-span: 10;
  grid-column: auto/span 10;
}
.grid > *.offset-10 {
  grid-column-start: 11 !important;
}

.grid > *.span-11 {
  -ms-grid-column-span: 11;
  grid-column: auto/span 11;
}
.grid > *.offset-11 {
  grid-column-start: 12 !important;
}

.grid > *.span-12 {
  -ms-grid-column-span: 12;
  grid-column: auto/span 12;
}
.grid > *.offset-12 {
  grid-column-start: 13 !important;
}

.grid > *.span-13 {
  -ms-grid-column-span: 13;
  grid-column: auto/span 13;
}
.grid > *.offset-13 {
  grid-column-start: 14 !important;
}

.grid > *.span-14 {
  -ms-grid-column-span: 14;
  grid-column: auto/span 14;
}
.grid > *.offset-14 {
  grid-column-start: 15 !important;
}

.grid > *.span-15 {
  -ms-grid-column-span: 15;
  grid-column: auto/span 15;
}
.grid > *.offset-15 {
  grid-column-start: 16 !important;
}

.grid > *.span-16 {
  -ms-grid-column-span: 16;
  grid-column: auto/span 16;
}
.grid > *.offset-16 {
  grid-column-start: 17 !important;
}

.grid > *.span-17 {
  -ms-grid-column-span: 17;
  grid-column: auto/span 17;
}
.grid > *.offset-17 {
  grid-column-start: 18 !important;
}

.grid > *.span-18 {
  -ms-grid-column-span: 18;
  grid-column: auto/span 18;
}
.grid > *.offset-18 {
  grid-column-start: 19 !important;
}

.grid > *.span-19 {
  -ms-grid-column-span: 19;
  grid-column: auto/span 19;
}
.grid > *.offset-19 {
  grid-column-start: 20 !important;
}

.grid > *.span-20 {
  -ms-grid-column-span: 20;
  grid-column: auto/span 20;
}
.grid > *.offset-20 {
  grid-column-start: 21 !important;
}

.grid > *.span-21 {
  -ms-grid-column-span: 21;
  grid-column: auto/span 21;
}
.grid > *.offset-21 {
  grid-column-start: 22 !important;
}

.grid > *.span-22 {
  -ms-grid-column-span: 22;
  grid-column: auto/span 22;
}
.grid > *.offset-22 {
  grid-column-start: 23 !important;
}

.grid > *.span-23 {
  -ms-grid-column-span: 23;
  grid-column: auto/span 23;
}
.grid > *.offset-23 {
  grid-column-start: 24 !important;
}

.grid > *.span-24 {
  -ms-grid-column-span: 24;
  grid-column: auto/span 24;
}
.grid > *.offset-24 {
  grid-column-start: 25 !important;
}

.grid > .span-all {
  grid-column-start: 1;
  grid-column-end: -1;
}

.flex,
.flex-children > *,
[class^=flex-],
[class*=" flex-"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.inline-flex,
.inline-flex-childen > *,
[class^=inline-flex-] [class*=" inline-flex-"] {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-row-reverse, .flex.row-reverse {
  flex-direction: row-reverse;
}

.flex-col-reverse, .flex.col-reverse {
  flex-direction: column-reverse;
}

.flex-top {
  margin-bottom: auto;
}

.flex-left {
  margin-right: auto;
}

.flex-right {
  margin-left: auto;
}

.flex-bottom {
  margin-top: auto;
}

.flex-end {
  justify-content: flex-end;
}

.flex-start {
  justify-content: flex-start;
}

.flex-grow,
.flex-grow-children > * {
  flex-grow: 1;
  display: flex;
}

.flex-shrink,
.flex-shrink-children > * {
  flex-shrink: 1;
  display: flex;
}

.nowrap,
.flex-nowrap {
  flex-wrap: nowrap;
}

.wrap,
.flex-wrap {
  flex-wrap: wrap;
}

.wrap-reverse,
.flex-wrap-reverse {
  flex-wrap: reverse;
}

.justify-center,
.justify-center-children > * {
  justify-content: center;
  display: flex;
}

.align-center,
.align-center-children > * {
  align-items: center;
  display: flex;
}

.space-between {
  display: flex;
  justify-content: space-between;
}

.space-around {
  display: flex;
  justify-content: space-around;
}

[data-tooltip] {
  position: relative;
}
[data-tooltip]:after, [data-tooltip]:before {
  transition: 0.25s all ease-out;
  opacity: 0;
  position: absolute;
  z-index: 100;
  pointer-events: none;
}
[data-tooltip]:after {
  content: attr(data-tooltip);
  padding: 2px 12px;
  transform: translateY(24px) rotate(0);
}
[data-tooltip]:not(.tt-hidden):not(.tt-hover):after, [data-tooltip].tt-hover:hover:after {
  opacity: 1;
  transform: translateY(0) rotate(0);
}
[data-tooltip]:not(.tt-hidden):not(.tt-hover):before, [data-tooltip].tt-hover:hover:before {
  opacity: 1;
}
[data-tooltip].tt-ltr:after {
  transform: translateX(-24px) rotate(0);
}
[data-tooltip]:not(.tt-hidden):not(.tt-hover):after, [data-tooltip].tt-ltr:hover:after {
  opacity: 1;
  transform: translateX(0) rotate(0);
}

body.is-clash-card {
  background: linear-gradient(to bottom, rgb(140, 122, 122) 0%, rgb(175, 135, 124) 65%, rgb(175, 135, 124) 100%) fixed;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/coc-background.jpg") no-repeat center center fixed;
  background-size: cover;
  font: 14px/20px "Lato", Arial, sans-serif;
  color: #9E9E9E;
  margin-top: 30px;
}

.slide-container {
  margin: auto;
  width: 600px;
  text-align: center;
}

.wrapper {
  padding-top: 40px;
  padding-bottom: 40px;
}
.wrapper:focus {
  outline: 0;
}

.clash-card {
  background: white;
  width: 300px;
  display: inline-block;
  margin: auto;
  border-radius: 19px;
  position: relative;
  text-align: center;
  box-shadow: -1px 15px 30px -12px black;
  z-index: 9999;
  margin-top: 32px;
}

.clash-card__image {
  position: relative;
  height: 230px;
  margin-bottom: 35px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.clash-card__image--squamatha {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/barbarian-bg.jpg");
}
.clash-card__image--squamatha img {
  width: 400px;
  position: absolute;
  top: -70px;
  left: -50px;
}

.clash-card__image--archer {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/archer-bg.jpg");
}
.clash-card__image--archer img {
  width: 400px;
  position: absolute;
  top: -3px;
  left: -37px;
}

.clash-card__image--giant {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/giant-bg.jpg");
}
.clash-card__image--giant img {
  width: 340px;
  position: absolute;
  top: -30px;
  left: -25px;
}

.clash-card__image--goblin {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/goblin-bg.jpg");
}
.clash-card__image--goblin img {
  width: 370px;
  position: absolute;
  top: -21px;
  left: -37px;
}

.clash-card__image--wizard {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/wizard-bg.jpg");
}
.clash-card__image--wizard img {
  width: 345px;
  position: absolute;
  top: -28px;
  left: -10px;
}

.clash-card__level {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 3px;
  margin-top: -12px;
}

.clash-card__level--squamatha {
  color: #EC9B3B;
}

.clash-card__level--archer {
  color: #EE5487;
}

.clash-card__level--giant {
  color: #F6901A;
}

.clash-card__level--goblin {
  color: #82BB30;
}

.clash-card__level--wizard {
  color: #4FACFF;
}

.clash-card__unit-name {
  font-size: 26px;
  color: black;
  font-weight: 900;
  margin-bottom: 24px;
}

.clash-card__unit-description {
  padding: 20px;
  margin-bottom: 10px;
}

.clash-card__unit-stats--squamatha {
  background: #EC9B3B;
}
.clash-card__unit-stats--squamatha .one-third {
  border-right: 1px solid #BD7C2F;
}

.clash-card__unit-stats--archer {
  background: #EE5487;
}
.clash-card__unit-stats--archer .one-third {
  border-right: 1px solid #D04976;
}

.clash-card__unit-stats--giant {
  background: #F6901A;
}
.clash-card__unit-stats--giant .one-third {
  border-right: 1px solid #de7b09;
}

.clash-card__unit-stats--goblin {
  background: #82BB30;
}
.clash-card__unit-stats--goblin .one-third {
  border-right: 1px solid #71a32a;
}

.clash-card__unit-stats--wizard {
  background: #4FACFF;
}
.clash-card__unit-stats--wizard .one-third {
  border-right: 1px solid #309eff;
}

.clash-card__unit-stats {
  color: white;
  font-weight: 700;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.clash-card__unit-stats .one-third {
  width: 33%;
  font-size: 28px;
  float: left;
  padding: 20px 2px 10px;
}
.clash-card__unit-stats sup {
  position: relative;
  top: -8px;
  display: inline-block;
  font-size: 45%;
  margin-left: 2px;
}
.clash-card__unit-stats .stat {
  position: relative;
  font-size: 24px;
  margin-bottom: 10px;
  white-space: nowrap;
}
.clash-card__unit-stats .stat-value {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 12px;
}
.clash-card__unit-stats .no-border {
  border-right: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.slick-prev {
  left: 100px;
  z-index: 999;
}

.slick-next {
  right: 100px;
  z-index: 999;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}
.veggieburger-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 70px;
  height: 50px;
  cursor: pointer;
}
.veggieburger-menu * {
  transition: 0.25s all ease-out;
}
.veggieburger-menu li {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: white;
  margin-bottom: 10px;
}
.veggieburger-menu li:nth-child(2) {
  height: 0;
  border: 5px solid #fff;
}
.veggieburger-menu li:nth-child(2):after {
  content: "";
  position: absolute;
  right: 10px;
  top: 0px;
  width: 0;
  height: 0;
  border-top: 0 solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transition: 0.25s all ease-out;
}
.veggieburger-menu li:nth-child(2):before {
  content: "";
  position: absolute;
  top: 0px;
  transition: 0.25s all ease-out;
  border: none;
  width: 64px;
  height: 3px;
  background: #fff;
  left: -2px;
  right: 0;
}
.veggieburger-menu li:nth-child(3) {
  margin-bottom: 0;
}
.veggieburger-menu.active li:nth-child(1) {
  width: 70px;
  height: 30px;
  margin-top: -20px;
  border-radius: 150px 150px 30px 30px;
  border: 10px solid white;
  border-bottom: none;
  background: transparent;
  background: #d3ac63;
  border-color: #d3ac63;
}
.veggieburger-menu.active li:nth-child(2) {
  border-color: #40bb1b #40bb1b #563528 #40bb1b;
}
.veggieburger-menu.active li:nth-child(2):after {
  border-width: 10px 8px 0 20px;
  border-top-color: #fdd937;
}
.veggieburger-menu.active li:nth-child(2):before {
  background: #dd454f;
  top: -8px;
}
.veggieburger-menu.active li:nth-child(3) {
  background: #d3ac63;
}

h1 {
  font-size: 52px;
  font-weight: 900;
}

span.rainbow {
  font-weight: 900;
  color: #fff;
  background: -webkit-linear-gradient(0deg, #fff, #e38b30);
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: -o-linear-gradient(transparent, transparent);
  -webkit-animation: rainbow 18s infinite;
  -z-animation: rainbow 18s infinite;
  -o-animation: rainbow 18s infinite;
  animation: rainbow 18s infinite;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

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

.skew-title-container {
  display: grid;
  align-items: center;
  justify-content: center;
  transform: skew(0, -10deg);
  pointer-events: none;
}

.skew-title {
  order: 2;
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 0.75em;
  text-align: center;
  text-shadow: 3px 1px 1px var(--red1), 2px 2px 1px var(--red2), 4px 2px 1px var(--red1), 3px 3px 1px var(--red2), 5px 3px 1px var(--red1), 4px 4px 1px var(--red2), 6px 4px 1px var(--red1), 5px 5px 1px var(--red2), 7px 5px 1px var(--red1), 6px 6px 1px var(--red2), 8px 6px 1px var(--red1), 7px 7px 1px var(--red2), 9px 7px 1px var(--red1);
}
.skew-title > * {
  margin: 0;
  color: #fff;
  display: block;
  position: relative;
  font-weight: 900;
}
.skew-title > *:before {
  content: attr(data-text);
  position: absolute;
  text-shadow: 2px 2px 1px #e94aa1, -1px -1px 1px #c736f9, -2px 2px 1px #e94aa1, 1px -1px 1px #f736f9;
  z-index: 1;
}
.skew-title > *:nth-child(1) {
  padding-right: 2.25rem;
}
.skew-title > *:nth-child(2) {
  padding-left: 2.25rem;
}
.skew-title h1 {
  font-size: 1em;
}
.skew-title h2 {
  font-size: 0.8em;
}
.skew-title h3 {
  font-size: 0.6em;
}
.skew-title h4 {
  font-size: 0.5em;
}
.skew-title h5 {
  font-size: 0.4em;
}
.skew-title h6 {
  font-size: 0.3em;
}

.skew-title-container.section-header {
  width: 100%;
  text-align: left;
  justify-content: left;
  z-index: 10;
  position: relative;
  transform: translate(-3em, -1.5em) skew(0, -10deg);
}

@keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}
* {
  box-sizing: border-box;
}

.scrollbar-override::-webkit-scrollbar {
  width: 12px;
}
.scrollbar-override::-webkit-scrollbar-track {
  background: #797c88;
  border: 3px solid #797c88;
}
.scrollbar-override::-webkit-scrollbar-thumb {
  background: #53536d;
  border-radius: 10px;
  border: 3px solid #797c88;
}
.scrollbar-override::-webkit-scrollbar-thumb:hover {
  background: #0095ee;
}

body {
  background: #16171d;
  background: linear-gradient(-10deg, #a92026, #16171d);
  background-size: 100% 140vh;
  max-width: 100vw;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}
body.loading {
  overflow-y: hidden;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
body > * {
  max-width: 1460px;
  width: 100%;
  padding: 40px;
}
body > header {
  z-index: 1000;
}

a {
  color: #fff;
  text-decoration: none;
}

main {
  padding: 0;
  width: 100%;
  max-width: none;
}
main > * {
  max-width: 1460px;
  width: 100%;
  padding: 40px;
  margin-bottom: 40px;
}

@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
.loading-container {
  width: 240px;
  height: 240px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-ring {
  position: absolute;
  width: 240px;
  height: 240px;
}
.loading-ring:first-child {
  transform: skew(30deg, 20deg);
}
.loading-ring:last-child {
  transform: skew(-30deg, -20deg) scale(-1, 1);
}
.loading-ring:last-child svg {
  animation-delay: -0.25s;
}
.loading-ring svg {
  animation: loading-rotate 0.9s linear infinite;
  fill: rgba(0, 0, 0, 0.2);
}
.loading-ring.alt svg {
  fill: rgba(200, 0, 0, 0.2);
  animation-duration: 1.2s;
}

#hero {
  position: relative;
}

#content {
  position: relative;
  background: #191b21;
  padding-top: 0;
  max-width: none;
  margin-bottom: 0;
}
#content > * {
  max-width: 1460px;
  margin: 0 auto;
}
#content p.description {
  max-width: 820px;
  margin: 0 auto;
  color: #9d9aa2;
  font-size: 21px;
  position: relative;
  color: #fff;
  z-index: 1;
}

#wave {
  width: 100vw;
  max-width: none;
  height: 250px;
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: -250px;
  transform: translateX(-50%);
}

.wave {
  height: 250px;
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: -250px;
  transform: translateX(-50%);
}

#inner-content {
  margin-top: -120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#inner-content > * {
  padding-top: 128px;
}
#inner-content > *:hover {
  z-index: 100;
}

#about {
  max-width: calc(100% + 40px);
  width: 820px;
  padding-top: 0;
}
#about .description {
  padding: 2em;
}
#about .description p {
  margin: 0;
  position: relative;
  z-index: 1;
}

#socials {
  padding-top: 24px;
  max-width: calc(100% + 40px);
  width: 820px;
  text-align: center;
  justify-content: center;
  gap: 24px;
}
#socials > * {
  flex-basis: calc(33.3333% - 16px);
  box-sizing: border-box;
}

.star-rating {
  width: 120px;
  position: relative;
}
.star-rating svg {
  fill: currentColor;
  stroke-width: 1;
}
.star-rating .earned {
  color: #0095ee;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  z-index: 1;
}
.star-rating .earned svg {
  stroke: #33c8ff;
  filter: drop-shadow(0px 0px 3px #0095ee);
}
.star-rating .missed {
  opacity: 0.4;
  color: #16171d;
  z-index: 0;
}
.star-rating .missed svg {
  stroke: #191b21;
}

#twitch-embed {
  width: 854px !important;
  max-width: 100% !important;
  height: 0;
  padding-bottom: 50.2%;
  position: relative;
}
#twitch-embed > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dyanosaur-button {
  position: fixed;
  bottom: 10px;
  z-index: 10000;
  padding: 0;
  margin: 0;
  right: 10px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d5917c;
  padding: 3px;
  border-radius: 6px;
  border: 2px solid #b5715c;
}
.dyanosaur-button:hover {
  background: #b5715c;
  border-color: #d5917c;
}
.dyanosaur-button img {
  height: 32px;
}

#follow {
  display: none;
}

body.is-dyanosaur {
  background-image: url("https://squamatha.com/assets/img/dyanosaur-bg.png");
  background-size: 1920px 1080px;
}
body.is-dyanosaur * {
  cursor: none;
}
body.is-dyanosaur #follower {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}
body.is-dyanosaur #follower #image-cursor-MA {
  position: absolute;
  width: 150px;
  height: 150px;
  margin-top: -5em;
  margin-left: -7.5em;
  background-image: url("https://squamatha.com/assets/img/dyanosaur.png");
  background-size: cover;
  z-index: 1;
  pointer-events: none;
}

@media all and (max-width: 1080px) {
  #fitness-playlist {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  #fitness-playlist > *, #fitness-playlist > * > * {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
  }
}
@media all and (max-width: 780px) {
  #twitch-embed {
    padding-bottom: 160%;
  }
}
@media all and (max-width: 960px) {
  #content > * {
    max-width: calc(100% - 80px);
  }
  #wave {
    max-width: 100%;
  }
  .skew-title-container.section-header {
    transform: translate(-3em, -4vw) skew(0, -10deg);
  }
}
header {
  max-width: 100%;
  transform: translateY(0);
  background: transparent;
  padding-bottom: 20px;
  position: sticky;
  top: 0;
  transition: 0.25s width ease-out, 2s background ease-out, 0.25s padding ease-out, 0.25s transform ease-out;
}
header > div {
  transition: 0.25s all ease-out;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
header #header-wave {
  width: 100%;
  transform: translateX(-50%) rotate(180deg);
  top: 0;
  opacity: 0;
  transition: 2s opacity;
  top: 100%;
}
header.scrolled {
  background: linear-gradient(to bottom right, #16171d, #191b21);
  position: sticky;
  top: 0;
  z-index: 10001;
  padding: 40px 20px 20px;
  transform: translateY(-20px);
}
header.scrolled > div {
  max-width: 1440px;
  width: 100%;
}
header.scrolled #header-wave {
  opacity: 1;
}
#logo {
  font-weight: 800;
  font-size: 42px;
}

nav .menu-item {
  color: #fff;
  text-decoration: none;
  padding: 16px;
  font-weight: 600;
  display: inline-flex;
  z-index: 10;
}
nav .menu-item:not(.has-children):not(.button):hover {
  opacity: 0.75;
}
nav .menu-item svg {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}
nav .menu-item.button {
  margin: 0 10px;
}
nav .has-children {
  position: relative;
  padding-right: 0;
}
nav .has-children > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav .has-children > span svg {
  transition: 0.25s all ease-out;
  width: 18px;
  height: 18px;
  margin: 0;
}
nav .has-children .sub-menu {
  position: absolute;
  left: 0;
  top: 52px;
  transition: 0.15s all ease-in;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  background: #35383f;
  text-align: left;
}
nav .has-children .sub-menu .menu-item {
  padding: 5px 16px;
}
nav .has-children .sub-menu .menu-item span {
  display: flex;
  align-items: center;
}
nav .has-children:hover {
  z-index: 100;
  position: relative;
}
nav .has-children:hover .sub-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  z-index: 101;
}
nav .has-children:hover > span svg {
  transform: rotate(90deg);
}

.veggieburger-menu {
  display: none;
}

@media all and (max-width: 1260px) {
  header #logo {
    width: 100%;
    text-align: center;
  }
  header nav {
    width: 100%;
    text-align: center;
  }
}
@media all and (max-width: 1100px) {
  nav {
    width: 100%;
    text-align: center;
  }
  nav > .menu-item:not(.has-children):not(.button) {
    padding: 8px;
  }
  nav > .menu-item {
    font-size: 16px;
  }
  nav > .menu-item.button {
    padding: 10px 26px;
  }
  nav > .menu-item.button.twitch:before {
    width: 21px;
    height: 21px;
  }
}
@media all and (max-width: 820px) {
  #hero {
    padding-top: 60px !important;
  }
  .carousel {
    margin-top: -32px;
  }
  header {
    padding: 20px;
  }
  header .veggieburger-menu {
    display: block;
  }
  header nav {
    display: none;
  }
  header .veggieburger-menu.active + nav {
    display: block;
  }
  header #logo {
    width: auto;
  }
}
:root {
  --red1: #8d0d13;
  --red2: #fd252f;
}

#hero {
  text-align: center;
  padding: 140px 20px 40px;
}
#hero h1 {
  margin: 0;
}
#hero h2 {
  margin-top: 0;
  margin-bottom: 64px;
}
#hero .skew-title h1 {
  font-size: 1em;
}
#hero .skew-title h2 {
  font-size: 0.5em;
  line-height: 1em;
  margin-left: 2em;
}

.carousel {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.carousel-item {
  --items: 10;
  --width: clamp(150px, 30vw,	300px);
  --height: clamp(200px, 40vw, 400px);
  --x: calc(var(--active) * 400%);
  --y: calc(var(--active) * 200%);
  --rot: calc(var(--active) * 120deg);
  --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);
  overflow: hidden;
  position: absolute;
  z-index: var(--zIndex);
  width: var(--width);
  height: var(--height);
  margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
  border-radius: 10px;
  top: 50%;
  left: 50%;
  user-select: none;
  transform-origin: 0% 100%;
  box-shadow: 0 10px 50px 10px rgba(0, 0, 0, 0.5);
  background: black;
  pointer-events: all;
  transform: translate(var(--x), var(--y)) rotate(var(--rot));
  transition: transform 0.8s cubic-bezier(0, 0.02, 0, 1);
}
.carousel-item .carousel-box {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
  opacity: var(--opacity);
  font-family: "sans-serif", serif;
}
.carousel-item .carousel-box:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5));
}
.carousel-item .title {
  position: absolute;
  z-index: 1;
  color: #fff;
  bottom: 20px;
  left: 20px;
  transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
  font-size: clamp(20px, 3vw, 30px);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.carousel-item .num {
  position: absolute;
  z-index: 1;
  color: #fff;
  top: 10px;
  left: 20px;
  transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
  font-size: clamp(20px, 10vw, 80px);
}
.carousel-item img, .carousel-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.layout {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.layout:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 90px;
  width: 10px;
  height: 100%;
  border: 1px solid #fff;
  border-top: none;
  border-bottom: none;
  opacity: 0.15;
}
.layout .box {
  position: absolute;
  bottom: 0;
  left: 30px;
  color: #fff;
  transform-origin: 0% 10%;
  transform: rotate(-90deg);
  font-size: 9px;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0.4;
}

main > .carousel {
  min-height: 140vh;
  position: absolute;
  z-index: -1;
  top: 0;
  max-width: none;
}

#hero > .carousel {
  overflow: visible;
  height: 480px;
  max-height: 30vh;
  min-height: 360px;
  z-index: -1;
  margin: 32px 0;
}
#hero > .carousel.loading {
  opacity: 0;
}

/* https://codepen.io/LukyVj/pen/YzOXepM */
@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --rotate {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-translate-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-size {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-blur {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@property --glow-radius {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@property --white-shadow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
:root {
  --debug: 0;
  --supported: 0;
  --not-supported: 0;
  --card-color: hsl(260deg 100% 3%);
  --text-color: hsl(260deg 10% 55%);
  --card-radius: 3.6vw;
  --card-width: 35vw;
  --border-width: 3px;
  --bg-size: 1;
  --hue: 0;
  --hue-speed: 1;
  --rotate: 0;
  --animation-speed: 4s;
  --interaction-speed: 0.55s;
  --glow-scale: 1.5;
  --scale-factor: 1;
  --glow-blur: 6;
  --glow-opacity: 1;
  --glow-radius: 100;
  --glow-rotate-unit: 1deg;
}

.hue-glow {
  width: var(--card-width);
  width: min(480px, var(--card-width));
  color: white;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  border-radius: var(--card-radius);
}
.hue-glow:before, .hue-glow:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--card-radius);
}
.hue-glow > div {
  width: 100%;
  height: 100%;
  background: #191b21;
  border-radius: calc(var(--card-radius) * 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--card-width) / 8);
}
.hue-glow > div span {
  display: inline-block;
  padding: 0.25em;
  border-radius: 4px;
  background: var(--text-color);
  color: black;
  margin-right: 8px;
  font-weight: 900;
}
.hue-glow > div:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--card-radius) * 0.9);
  mix-blend-mode: color-burn;
  z-index: -1;
  background: hsl(0deg, 0%, 16%) radial-gradient(30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%), hsl(calc(var(--hue) * var(--hue-speed) * 1deg), 100%, 90%) calc(0% * var(--bg-size)), hsl(calc(var(--hue) * var(--hue-speed) * 1deg), 100%, 80%) calc(20% * var(--bg-size)), hsl(calc(var(--hue) * var(--hue-speed) * 1deg), 100%, 60%) calc(40% * var(--bg-size)), transparent 100%);
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  animation: hue-animation var(--animation-speed) linear infinite, rotate-bg var(--animation-speed) linear infinite;
  transition: --bg-size var(--interaction-speed) ease;
}
.hue-glow .glow {
  --glow-translate-y: 0;
  display: block;
  position: absolute;
  width: calc(var(--card-width) / 5);
  height: calc(var(--card-width) / 5);
  animation: rotate var(--animation-speed) linear infinite;
  transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
  transform-origin: center;
  border-radius: calc(var(--glow-radius) * 10vw);
}
.hue-glow .glow:after {
  content: "";
  display: block;
  z-index: -2;
  filter: blur(calc(var(--glow-blur) * 10px));
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
  background: hsl(calc(var(--hue) * var(--hue-speed) * 1deg), 100%, 60%);
  position: relative;
  border-radius: calc(var(--glow-radius) * 10vw);
  animation: hue-animation var(--animation-speed) linear infinite;
  transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1)) scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2)) translateY(calc(var(--glow-translate-y) * 1%));
  opacity: var(--glow-opacity);
}

@keyframes shadow-pulse {
  0%, 24%, 46%, 73%, 96% {
    --white-shadow: 0.5;
  }
  12%, 28%, 41%, 63%, 75%, 82%, 98% {
    --white-shadow: 2.5;
  }
  6%, 32%, 57% {
    --white-shadow: 1.3;
  }
  18%, 52%, 88% {
    --white-shadow: 3.5;
  }
}
@keyframes rotate-bg {
  0% {
    --bg-x: 0;
    --bg-y: 0;
  }
  25% {
    --bg-x: 100;
    --bg-y: 0;
  }
  50% {
    --bg-x: 100;
    --bg-y: 100;
  }
  75% {
    --bg-x: 0;
    --bg-y: 100;
  }
  100% {
    --bg-x: 0;
    --bg-y: 0;
  }
}
@keyframes rotate {
  from {
    --rotate: -70;
    --glow-translate-y: -65;
  }
  25% {
    --glow-translate-y: -65;
  }
  50% {
    --glow-translate-y: -65;
  }
  60%, 75% {
    --glow-translate-y: -65;
  }
  85% {
    --glow-translate-y: -65;
  }
  to {
    --rotate: calc(360 - 70);
    --glow-translate-y: -65;
  }
}
@keyframes hue-animation {
  0% {
    --hue: 0;
  }
  100% {
    --hue: 360;
  }
}
.hue-glow > div:after {
  content: "";
  background: linear-gradient(to bottom, rgba(25, 27, 33, 0), rgb(25, 27, 33));
  display: block;
  width: calc(100% + 20px);
  height: 100px;
  position: absolute;
  bottom: -2px;
  left: -10px;
}
.hue-glow.alt > div:after {
  bottom: auto;
  top: -24px;
}

.hue-glow, .hue-glow > div, .hue-glow:before, .hue-glow:after {
  width: 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.hue-glow.alt, .hue-glow.alt > div, .hue-glow.alt:before, .hue-glow.alt:after {
  border-radius: var(--card-radius);
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.steam-wishlist {
  display: flex;
  flex-wrap: wrap;
  max-width: 984px;
  width: calc(100vw - 40px);
  gap: 24px;
  padding-top: 48px !important;
  max-height: 60vh;
  overflow-y: scroll;
  max-width: 1080px;
  padding: 0 24px !important;
  margin-top: 48px;
}
.steam-wishlist .item {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-radius: 8px;
  padding: 16px 32px;
  align-items: center;
  justify-content: flex-start;
  background-size: cover;
  width: 600px;
  position: relative;
  aspect-ratio: 2.5/1;
  z-index: 1;
  text-align: left;
  flex-basis: 480px;
  border: 1px solid transparent;
  box-shadow: 0 0 32px -12px rgba(51, 200, 255, 0);
  transition: 0.25s all ease-out;
  flex-grow: 1;
}
.steam-wishlist .item:after {
  content: attr(data-price);
  position: absolute;
  top: 16px;
  right: 16px;
  background: #0095ee;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #33c8ff;
  font-weight: 800;
}
.steam-wishlist .item:hover {
  box-shadow: 0 0 32px -12px #33c8ff;
  border-color: #0095ee;
}
.steam-wishlist .capsule {
  width: 180px;
}
.steam-wishlist .primary {
  padding: 16px;
}
.steam-wishlist .screenshots {
  transform: rotate(-30deg) translate(80px, 110px) scale(0.7);
  z-index: -1;
  position: absolute;
  filter: blur(1px) brightness(0.8);
}
.steam-wishlist .screenshots img {
  --rot: calc(var(--num) * 15deg);
  --x: calc(var(--num) * 20%);
  --y: calc(var(--num) * -30%);
  --scale: calc(1 + var(--num) * .3 );
  --blur: calc(var(--num) - 1px);
  filter: blur(var(--blur));
  transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(var(--scale));
}
.steam-wishlist .blurred-background {
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  filter: blur(8px) grayscale(0.6) brightness(0.75);
}
.steam-wishlist .tags {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 11px;
}
.steam-wishlist .tags .tag {
  margin: 4px;
  padding: 2px 8px;
  background: #191b21;
  border: 1px solid #16171d;
  opacity: 0.8;
  border-radius: 3px;
  display: inline-flex;
}

#twitch-clips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-gap: 20px;
  width: 100%;
  position: relative;
}
#twitch-clips .section-header {
  position: absolute;
  top: 0;
  margin-left: 16px;
}

.twitch-clip {
  position: relative;
}
.twitch-clip .clip-container {
  width: 640px;
  max-width: 100%;
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  transition: 0.15s all ease-out;
  box-shadow: 0 0 #a92026;
}
.twitch-clip .clip-container:hover {
  box-shadow: -8px 8px #a92026;
  transform: translate(8px, -8px);
}
.twitch-clip .clip-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.twitch-clip .stat {
  position: absolute;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  pointer-events: none;
  margin: 1rem;
  font-size: 14px;
  padding: 2px 5px;
}
.twitch-clip .clip-info {
  display: flex;
  margin-top: 6px;
  text-align: left;
  font-size: 14px;
}
.twitch-clip .clip-info .title {
  font-weight: 700;
  display: block;
}
.twitch-clip .clip-info .clipped-by {
  margin-top: 6px;
}
.twitch-clip .clip-info .clipped-by a {
  color: #a92026;
  font-weight: 700;
}
.twitch-clip .clip-info .clipped-by a:hover {
  color: #ba3137;
}
.twitch-clip .box-art {
  margin: 0 6px 6px 0;
  width: 56px;
}
.twitch-clip .duration {
  top: 0px;
  left: 0px;
}
.twitch-clip .views {
  bottom: 0;
  left: 0;
}
.twitch-clip .created {
  bottom: 0;
  right: 0;
}

button,
a.button,
[role=button] {
  border: 2px solid #232226;
  padding: 20px 52px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
  justify-content: center;
  z-index: 10;
}
button:after,
a.button:after,
[role=button]:after {
  z-index: -1;
}
button:before,
a.button:before,
[role=button]:before {
  z-index: 2;
  position: relative;
}
button svg, button span,
a.button svg,
a.button span,
[role=button] svg,
[role=button] span {
  z-index: 3;
}
button.twitch:before, button.twitch.menu-item,
a.button.twitch:before,
a.button.twitch.menu-item,
[role=button].twitch:before,
[role=button].twitch.menu-item {
  border-color: #c8a3ff;
  background-color: #a970ff;
  background: linear-gradient(90deg, #a970ff 0%, #8b3dff 100%);
}
button.twitch:before:hover, button.twitch.menu-item:hover,
a.button.twitch:before:hover,
a.button.twitch.menu-item:hover,
[role=button].twitch:before:hover,
[role=button].twitch.menu-item:hover {
  background: linear-gradient(90deg, #a970ff 30%, #8b3dff 100%);
}
button.ko-fi:before, button.ko-fi.menu-item,
a.button.ko-fi:before,
a.button.ko-fi.menu-item,
[role=button].ko-fi:before,
[role=button].ko-fi.menu-item {
  border-color: #8eb0fe;
  background-color: #ff5f5f;
  background: linear-gradient(90deg, #5b8dfe 0%, #ff5f5f 100%);
}
button.ko-fi:before:hover, button.ko-fi.menu-item:hover,
a.button.ko-fi:before:hover,
a.button.ko-fi.menu-item:hover,
[role=button].ko-fi:before:hover,
[role=button].ko-fi.menu-item:hover {
  background: linear-gradient(90deg, #5b8dfe 30%, #ff5f5f 100%);
}
button.discord:before, button.discord.menu-item,
a.button.discord:before,
a.button.discord.menu-item,
[role=button].discord:before,
[role=button].discord.menu-item {
  border-color: #a8aff9;
  background-color: #7983f5;
  background: linear-gradient(90deg, #7983f5 0%, #5865f2 100%);
}
button.discord:before:hover, button.discord.menu-item:hover,
a.button.discord:before:hover,
a.button.discord.menu-item:hover,
[role=button].discord:before:hover,
[role=button].discord.menu-item:hover {
  background: linear-gradient(90deg, #7983f5 30%, #5865f2 100%);
}
button.twitter:before,
a.button.twitter:before,
[role=button].twitter:before {
  border-color: #6fd2f7;
  background-color: #3fc3f4;
  background: linear-gradient(90deg, #3fc3f4 0%, #1da1f2 100%);
}
button.twitter:before:hover,
a.button.twitter:before:hover,
[role=button].twitter:before:hover {
  background: linear-gradient(90deg, #3fc3f4 30%, #1da1f2 100%);
}
button.spotify svg,
a.button.spotify svg,
[role=button].spotify svg {
  fill: #fff;
  width: 24px;
}
button.spotify:before,
a.button.spotify:before,
[role=button].spotify:before {
  border-color: #5ceba7;
  background-color: #2fe58f;
  background: linear-gradient(90deg, #2fe58f 0%, #1db954 100%);
}
button.spotify:before:hover,
a.button.spotify:before:hover,
[role=button].spotify:before:hover {
  background: linear-gradient(90deg, #2fe58f 30%, #1db954 100%);
}
button.tiktok:before,
a.button.tiktok:before,
[role=button].tiktok:before {
  border-color: transparent;
  background-color: #000;
  box-shadow: -3px -2px #25f5f0, 3px 2px #ff2d56;
}
button.tiktok:before svg,
a.button.tiktok:before svg,
[role=button].tiktok:before svg {
  width: 24px;
  height: 24px;
}
button.tiktok:before:hover,
a.button.tiktok:before:hover,
[role=button].tiktok:before:hover {
  box-shadow: -3px -2px #ff2d56, 3px 2px #25f5f0;
}
button.youtube:before,
a.button.youtube:before,
[role=button].youtube:before {
  border-color: #ff3333;
  background-color: #f00;
  background: linear-gradient(90deg, #f00 0%, #cc0100 100%);
}
button.youtube:before:hover,
a.button.youtube:before:hover,
[role=button].youtube:before:hover {
  background: linear-gradient(90deg, #f00 30%, #cc0100 100%);
}
button.kick:before,
a.button.kick:before,
[role=button].kick:before {
  border-color: #78fd4a;
  background: linear-gradient(90.42deg, #234118 0%, #264E19 25.22%, #191B1F 60.9%, #070708 99.94%);
}
button.kick:before:hover,
a.button.kick:before:hover,
[role=button].kick:before:hover {
  background: linear-gradient(90.42deg, #070708 0%, #191B1F 25.22%, #264E19 60.9%, #234118 99.94%);
}
button.instagram:before,
a.button.instagram:before,
[role=button].instagram:before {
  border-color: #d14fa7;
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}
button.steam:before,
a.button.steam:before,
[role=button].steam:before {
  border-color: #39ccff;
  background: linear-gradient(90deg, #06BFFF 0%, #2D73FF 100%);
  text-transform: uppercase;
}
button.steam:before:hover,
a.button.steam:before:hover,
[role=button].steam:before:hover {
  background: linear-gradient(90deg, #06BFFF 30%, #2D73FF 100%);
}
button.status-circle,
a.button.status-circle,
[role=button].status-circle {
  position: relative;
}
button.status-circle:before,
a.button.status-circle:before,
[role=button].status-circle:before {
  content: "";
  width: 28px;
  height: 28px;
  background: #777;
  display: inline-flex;
  position: absolute;
  top: -10px;
  left: -10px;
  border-radius: 256px;
  border: 5px solid #16171d;
  opacity: 1;
}
button.status-circle:after,
a.button.status-circle:after,
[role=button].status-circle:after {
  top: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  top: 6px;
  font-size: 12px;
  left: 20px;
}
button.status-circle.live:before,
a.button.status-circle.live:before,
[role=button].status-circle.live:before {
  background: #eb0400;
  animation: pulse-red 2s infinite;
}
button.status-circle.red:before,
a.button.status-circle.red:before,
[role=button].status-circle.red:before {
  background: #eb0400;
}
button.status-circle[data-status-text]:before,
a.button.status-circle[data-status-text]:before,
[role=button].status-circle[data-status-text]:before {
  display: flex;
  align-items: center;
  justify-content: center;
  content: attr(data-status-text);
}
button:not(.status-circle),
a.button:not(.status-circle),
[role=button]:not(.status-circle) {
  padding: 22px 54px;
  border: 0px transparent;
}
button:not(.status-circle):before,
a.button:not(.status-circle):before,
[role=button]:not(.status-circle):before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 2px;
  border-style: solid;
  box-sizing: border-box;
  border-radius: 12px;
}
button.primary,
a.button.primary,
[role=button].primary {
  background: #b20;
  border-color: #b20;
}
button.icon svg,
a.button.icon svg,
[role=button].icon svg {
  margin-left: -16px;
  margin-right: 24px;
}
button:hover,
a.button:hover,
[role=button]:hover {
  z-index: 1000;
}
button:hover:before,
a.button:hover:before,
[role=button]:hover:before {
  filter: brightness(1.2);
}

.dino:not(.menu-item):after,
button:not(.menu-item):after,
a.button:not(.menu-item):after,
[role=button]:not(.menu-item):after,
.clip-container:not(.menu-item):after {
  content: "";
  width: 128px;
  height: 128px;
  background-image: url("https://squamatha.com/assets/img/dyanosaur.png");
  background-size: contain;
  position: absolute;
  z-index: -1;
  top: -68px;
  left: 0;
  transform-origin: bottom;
  transform: scale(1, 0.45);
  transition: 0.2s all cubic-bezier(1, 0, 0.62, 2.15);
  pointer-events: none;
}
.dino:not(.menu-item):hover:after,
button:not(.menu-item):hover:after,
a.button:not(.menu-item):hover:after,
[role=button]:not(.menu-item):hover:after,
.clip-container:not(.menu-item):hover:after {
  transform: scale(0.75) translate(0, -42px);
}

.cards {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  max-width: 820px;
}

.card--1 .card__img, .card--1 .card__img--hover {
  background-image: url("https://images.pexels.com/photos/45202/brownie-dessert-cake-sweet-45202.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
}

.card--2 .card__img, .card--2 .card__img--hover {
  background-image: url("https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
}

.card__like {
  width: 18px;
}

.card__clock {
  width: 15px;
  vertical-align: middle;
  fill: #AD7D52;
}

.card__time {
  font-size: 12px;
  color: #AD7D52;
  vertical-align: middle;
  margin-left: 5px;
}

.card__clock-info {
  float: right;
}

.card__img {
  visibility: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 235px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.card__info-hover {
  position: absolute;
  padding: 16px;
  width: 100%;
  opacity: 0;
  top: 0;
}

.card__img--hover {
  transition: 0.2s all ease-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  height: 235px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  top: 0;
}

.card {
  margin-right: 25px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
  background-color: #fff;
  width: 33.3%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
  transform: scale(1.1, 1.1);
}

.card__info {
  z-index: 2;
  background-color: #fff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 16px 24px 24px 24px;
}

.card__category {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #868686;
}

.card__title {
  margin-top: 5px;
  margin-bottom: 10px;
  font-family: "Roboto Slab", serif;
}

.card__by {
  font-size: 12px;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
}

.card__author {
  font-weight: 600;
  text-decoration: none;
  color: #AD7D52;
}

.card:hover .card__img--hover {
  height: 100%;
  opacity: 0.3;
}

.card:hover .card__info {
  background-color: transparent;
  position: relative;
}

.card:hover .card__info-hover {
  opacity: 1;
}

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