/* Global */
html {
  margin: 0;
  padding:  0;
  scroll-behavior: smooth;
}

body {
  margin:  0;
  padding:  0;
  overflow-x:  hidden;
  font-family: 'Roboto Mono', monospace;
  font-size:  120%;
  color:  #FFF;
  background-image: 
    repeating-radial-gradient(
      circle at 89% 28%,
      hsla(303.33, 47.37%, 14.9%, 0.7549864653551353) 5%,
      hsla(139.09, 53.66%, 16.08%, 0.1858348361119515) 99%
    ),
    repeating-radial-gradient(
      circle at 26% 38%,
      hsla(166.78, 31.89%, 63.73%, 0.8069924273481652) 14%,
      hsla(14.22, 97.74%, 65.29%, 0.47876422092105564) 69%
    ),
    conic-gradient(
      from 117deg at 54% 11%,
      hsla(302.71, 63.03%, 58.63%, 0.4340801752707284) 11%,
      hsla(222.3, 58.16%, 46.86%, 0.15545325842719904) 20%
    ),
    radial-gradient(
      ellipse at 29% 45%,
      hsla(233.57, 13.21%, 41.57%, 0.43972461500154036) 46%,
      hsla(224.11, 69.59%, 57.45%, 0.377292580981355) 94%
    ),
    repeating-radial-gradient(circle at 42% 32%, #d14721 7%, #fd7950 92%);
  background-position:  fixed;
}

::selection {
    background: hsla(180, 100%, 50%, 0.267);
    color: #FFF;
    text-shadow: none;
}

.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}

img {
  max-width: 100%;
  height: auto;
}


h1, h2, h3 {
  weight:  500;
}

h3 {font-size: 90%; margin-top: 35px;}

 a{color: #FFF;}
 a:hover {text-decoration:  none;}

/* Header */

header {
  margin: 0;
  width:  100%;
  height:  100%;
}

.animation header {
  height:  auto;
}

nav {
  text-align:right;
  margin: 10px 10px 15px 10px;
  padding: 0 10px 15px 0;
  border-bottom: 1px dotted rgba(255,255,255,0.3);
}

nav a {opacity: 0.75; font-weight: 700; text-decoration:none; transition: opacity 1s;}
nav a:hover {opacity: 1; transition: opacity 1s;}

#splash {
  padding: 20% 0 15% 0;
}

.animation #splash {
  padding: 50px 0 30px 0;
}

#logo {
  text-align:  center;
  margin-bottom:  100px;
  font-size:  300%;
}

.animation #logo {
  font-size:  200%;
  margin-bottom: 50;
}

#intro {
  padding: 0 10px;
  text-align:  center;
  font-size: 220%;
}

#challenge-links {
  padding: 0 10px;
}

#quick-links {
  width:  375px;
  margin:  0 auto;
  text-align: center;
  position: relative;
}

#quick-links a {text-decoration: none;}

#quick-links p {
  margin: 50px 0 10px 0;
}

.quick-btn {
  color: #FFF;
  transition: all 0.5s;
  position: relative;
  width:  150px;
  text-align:  center;
  padding:  10px 15px;
}
.quick-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(255,255,255,0.1);
  transition: all 0.3s;
}
.quick-btn:hover::before {
  opacity: 0 ;
  transform: scale(0.5,0.5);
}
.quick-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.5);
  transform: scale(1.2,1.2);
}
.quick-btn:hover::after {
  opacity: 1;
  transform: scale(1,1);
}



.notebook, .discord {
  float:  left;
}

.github, .twitter {
  float:  right;
}

 .patreon {
  margin: 0 auto;
}

/* Sections */
section {
  width:  85%;
  margin:  0 auto 50px auto;
}

section#about, section#resources {
  padding: 0 0 50px 0;
  border-bottom: 1px dotted rgba(255,255,255,0.3);
}

.divider {
  margin: 25px 0;
  height: 1px;
  background: #FFF;
  opacity: 0.1;
}

.divider-full {
  margin: 25px 10px;
  height: 1px;
  background: #FFF;
  opacity: 0.1;
}

/* Iframes */
.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* Animation */
canvas {
    position: fixed;
    top: 0; 
    left: 0;
    display:  block;
    z-index: 1;
    background-color: #EEEEEE;
    width: 100vw;
    height: 100vh;
    animation-name: fadeout;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes fadeout {
  0% {opacity: 1;}
  99% {opacity: 0;width: 100vw;height: 100vh;}
  100% {opacity: 0; width: 1px; height: 1px; top: -1; left: -1;}
  }
}

/* Resource pages */

#3d {margin-bottom: 50px;}

.video-left {width: 320px; margin: 0 auto;}
.video-right {width: 320px; margin: 0 auto;}
.small-text {font-size:  90%; font-style: italic;}

@media (prefers-color-scheme: light) {

}


@media (prefers-color-scheme: dark) {
body {
  color:  #FFF;
  background-image: 
    repeating-radial-gradient(
      circle at 89% 28%,
      hsla(303.33, 47.37%, 4%, 0.7549864653551353) 5%,
      hsla(139.09, 53.66%, 1%, 0.1858348361119515) 99%
    ),
    repeating-radial-gradient(
      circle at 26% 38%,
      hsla(166.78, 31.89%, 4%, 0.8069924273481652) 14%,
      hsla(14.22, 97.74%, 1%, 0.47876422092105564) 69%
    ),
    conic-gradient(
      from 117deg at 54% 11%,
      hsla(302.71, 63.03%, 4%, 0.4340801752707284) 11%,
      hsla(222.3, 58.16%, 1%, 0.15545325842719904) 20%
    ),
    radial-gradient(
      ellipse at 29% 45%,
      hsla(233.57, 13.21%, 4%, 0.43972461500154036) 46%,
      hsla(224.11, 69.59%, 1%, 0.377292580981355) 94%
    ),
    repeating-radial-gradient(circle at 42% 32%, #d14721 7%, #fd7950 92%);
  background-position:  fixed;
  }
}


@media only screen and (min-width:768px) {
section {
  width:  50%;
}
.video-wrapper {width: 80%; margin:  0 auto;}
.video-left {float: left;width: 320px; margin: 0 0;}
.video-right {float: right; width: 320px; margin: 0 0;}

header {
  margin: 0;
  width:  100%;
  height:  100vh;
}

#splash {
  padding: 15% 0 15% 0;
}

#challenge-links {
  width: 20%;
  margin: 15px auto;
}


}


@media only screen and (min-width:1280px) {

}

@media only screen and (min-width:1650px) {

}