:root {
  --blue: #02b8ff;
  --pink: #ff21d8;
  --green: #00ff15;
  --orange: #ff9900;
  --yellow: #ffee00;
  --dgray: #333333;
  --mgray: #7e7e7e;
  --lgray: #e9e8ea;
  --pgray: #f8f9fa;
  --white: #ffffff;
  --black: #000000;
}

@font-face {
  font-family: "Gagalin";
  src: url("Gagalin-Regular.eot");
  src: url("Gagalin-Regular.eot?#iefix") format("embedded-opentype"),
    url("Gagalin-Regular.woff2") format("woff2"),
    url("Gagalin-Regular.woff") format("woff"),
    url("Gagalin-Regular.ttf") format("truetype"),
    url("Gagalin-Regular.svg#Gagalin-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

html {
  scroll-behavior: smooth !important;
}

body {
  font-family: "Montserrat", sans-serif;
  background-image: radial-gradient(circle, yellow, orange);
  background-attachment: fixed;
}

h1 .text-dark,
h2 .text-dark,
h3 .text-dark,
h4 .text-dark,
h5 .text-dark,
h6 .text-dark {
  color: var(--dgray) !important;
}

p .text-dark {
  color: var(--mgray) !important;
}

h1 .text-light,
h2 .text-light,
h3 .text-light,
h4 .text-light,
h5 .text-light,
h6 .text-light {
  color: var(--pgray) !important;
}

p .text-light {
  color: var(--white) !important;
}

footer .copyright {
  font-size: 12px;
}

/*
 * fas: font-awesome
 * far: font-awesome
 * fal: font-awesome
 * fad: font-awesome
 * fab: font-awesome
 */
footer .fas:hover,
footer .fas:active,
footer .far:hover,
footer .far:active,
footer .fal:hover,
footer .fal:active,
footer .fad:hover,
footer .fad:active,
footer .fab:hover,
footer .fab:active {
  color: var(--blue);
}

/*
 * display-*: bootstrap
 */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: "Gagalin", sans-serif !important;
  line-height: 55% !important;
}

/*
 * text-dark: bootstrap
 */
.text-dark {
  color: var(--dgray) !important;
}

/*
 * text-muted: bootstrap
 */
.text-muted {
  color: var(--mgray) !important;
}

/*
 * text-muted: bootstrap
 */
.text-light {
  color: var(--pgray) !important;
}

/*
 * text-primary: bootstrap
 */
.text-primary {
  color: var(--blue) !important;
}

/*
 * text-info: bootstrap
 */
.text-info {
  color: var(--blue) !important;
}

/*
 * text-justify: bootstrap deprecated
 */
.text-justify {
  text-align: justify !important;
  text-align-last: center !important;
}

/*
 * text-center: bootstrap
 */
.text-center {
  text-align: center !important;
  text-align-last: center !important;
}

/*
 * text-left: bootstrap
 */
.text-left {
  text-align: left !important;
  text-align-last: left !important;
}

/*
 * text-xl-left: bootstrap
 */
@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
    text-align-last: left !important;
  }
}

/*
 * outline using the unit circle with 0.1em stroke
 */
.text-outline {
  --shadow-color: var(--black);
  text-shadow: calc(1 * 0.1em) 0px 0 var(--shadow-color),
    calc(0.966 * 0.1em) calc(0.259 * 0.1em) 0 var(--shadow-color),
    calc(0.866 * 0.1em) calc(0.5 * 0.1em) 0 var(--shadow-color),
    calc(0.707 * 0.1em) calc(0.707 * 0.1em) 0 var(--shadow-color),
    calc(0.5 * 0.1em) calc(0.866 * 0.1em) 0 var(--shadow-color),
    calc(0.259 * 0.1em) calc(0.966 * 0.1em) 0 var(--shadow-color),
    0px calc(1 * 0.1em) 0 var(--shadow-color),
    calc(-0.259 * 0.1em) calc(0.966 * 0.1em) 0 var(--shadow-color),
    calc(-0.5 * 0.1em) calc(0.866 * 0.1em) 0 var(--shadow-color),
    calc(-0.707 * 0.1em) calc(0.707 * 0.1em) 0 var(--shadow-color),
    calc(-0.866 * 0.1em) calc(0.5 * 0.1em) 0 var(--shadow-color),
    calc(-0.966 * 0.1em) calc(0.259 * 0.1em) 0 var(--shadow-color),
    calc(-1 * 0.1em) 0px 0 var(--shadow-color),
    calc(-0.966 * 0.1em) calc(-0.259 * 0.1em) 0 var(--shadow-color),
    calc(-0.866 * 0.1em) calc(-0.5 * 0.1em) 0 var(--shadow-color),
    calc(-0.707 * 0.1em) calc(-0.707 * 0.1em) 0 var(--shadow-color),
    calc(-0.5 * 0.1em) calc(-0.866 * 0.1em) 0 var(--shadow-color),
    calc(-0.259 * 0.1em) calc(-0.966 * 0.1em) 0 var(--shadow-color),
    0px calc(-1 * 0.1em) 0 var(--shadow-color),
    calc(0.259 * 0.1em) calc(-0.966 * 0.1em) 0 var(--shadow-color),
    calc(0.5 * 0.1em) calc(-0.866 * 0.1em) 0 var(--shadow-color),
    calc(0.707 * 0.1em) calc(-0.707 * 0.1em) 0 var(--shadow-color),
    calc(0.866 * 0.1em) calc(-0.5 * 0.1em) 0 var(--shadow-color),
    calc(0.966 * 0.1em) calc(-0.259 * 0.1em) 0 var(--shadow-color);
}

.text-shadow {
  text-shadow: 0.1em 0.1em 0.25em var(--black);
}

.text-tilt {
  transform: rotateZ(-2deg);
}

.bg-cover {
  background-position: center;
  background-clip: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-cover-fixed {
  background-position: center;
  background-clip: border-box;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-info {
  background-color: var(--blue) !important;
}

.border-info {
  border-color: var(--blue) !important;
}

/*
 * btn-primary: bootstrap
 */
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  font-family: "Gagalin", sans-serif !important;
  background-color: var(--blue) !important;
  border-color: var(--blue) !important;
  box-shadow: none !important;
}

/*
 * form-control: bootstrap
 */
.form-control,
.form-control:focus {
  box-shadow: none !important;
  background-color: var(--pgray) !important;
  border-color: var(--pgray) !important;
}

.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-right-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-bottom-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-left-0 {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.kapow-burst {
  z-index: 1031;
}

.stamp {
  --animation-delay: 2.5s;
  --animation-duration: 0.3s;
  --animation-fill-mode: forwards;
  --animation-name: stamp;
  opacity: 0;
  transform-origin: center;
  animation-name: var(--animation-name);
  animation-delay: var(--animation-delay);
  animation-duration: var(--animation-duration);
  animation-fill-mode: var(--animation-fill-mode);
  -webkit-animation-name: var(--animation-name);
  -webkit-animation-delay: var(--animation-delay);
  -webkit-animation-duration: var(--animation-duration);
  -webkit-animation-fill-mode: forwards;
}

@keyframes stamp {
  0% {
    opacity: 0;
    transform: rotateZ(0deg) scale3d(1, 1, 1);
  }
  10% {
    opacity: 0.5;
    transform: rotateZ(0deg) scale3d(6, 6, 1);
  }
  100% {
    opacity: 1;
    transform: rotateZ(-2deg) scale3d(1, 1, 1);
  }
}

@-webkit-keyframes stamp {
  0% {
    opacity: 0;
    transform: rotateZ(0deg) scale3d(1, 1, 1);
  }
  10% {
    opacity: 0.5;
    transform: rotateZ(0deg) scale3d(6, 6, 1);
  }
  100% {
    opacity: 1;
    transform: rotateZ(-2deg) scale3d(1, 1, 1);
  }
}

.comic {
  display:flex;
  flex-wrap:wrap;
  font-family: "Gagalin", sans-serif !important;
  padding:1vmin;
}

.panel {
  background-color:#fff;
  border:solid 2px #000;
  box-shadow:0 6px 6px -6px #000;
  display:inline-block;
  flex:1 1;
  margin:1vmin;
  overflow:hidden;
  position:relative;
}

.blurb {
  background-color:#fff;
  border:solid 2px #000;
  margin:0;
  padding:3px 10px;
}

.top-left {
  left:-6px;
  position:absolute;
  top:-2px;
  transform:skew(-15deg);
}

.bottom-right {
  bottom:-2px;
  position:absolute;
  right:-6px;
  transform:skew(-15deg);
}