/* UNUSED BUT POTENTIALLY NEEDED LATER */



*
  border: 1px solid red !important



/* STRIPED BACKGROUND */

/*@keyframes move-it {
  0% {
    background-position: initial;
  }
  100% {
    background-position: 100px 0px;
  }
}

body {  
  background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 5%,
  #465298 5%,
  #465298 10%
);
  background-size: 100px 100px;
  animation: move-it 2s linear infinite;
}*/




 
/* CSS EFFECT - BACKGROUND IMAGE ON TEXT */
body {
  margin: 0;
  padding: 0;
  background-color: #000;
}

.text-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-container h1{
  margin: 0;
  font-size: 150px;
  color: rgba(225,225,225, .01);
  background-image: url("https://images.unsplash.com/photo-1499195333224-3ce974eecb47?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2cf549433129d4227d1879347b9e78ce&auto=format&fit=crop&w=1248&q=80");
  background-repeat: repeat;
  -webkit-background-clip:text;
  animation: animate 15s ease-in-out infinite;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  font-family: "Courier Prime", monospace;
  font-family: "Libre Barcode 39 Text", system-ui;
  font-family: "Redacted Script", cursive;
}
.text-container h1:hover {
  font-family: "Courier Prime", monospace;
}

  @keyframes animate {
    0%, 100% {
      background-position: left top;
    }
    25%{
      background-position: right bottom;
     }
    50% {
      background-position: left bottom;
    }
    75% {
      background-position: right top;
    }   
}




/* CSS EFFECT - CLOUDS */


/*transform: scaleY(-1); add this line to section */

/*section{
  position: absolute;
  width: 100%;
  height: 100vh;
  background: #3586ff;
}
section .air{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url(https://1.bp.blogspot.com/-xQUc-TovqDk/XdxogmMqIRI/AAAAAAAACvI/AizpnE509UMGBcTiLJ58BC6iViPYGYQfQCLcBGAsYHQ/s1600/wave.png);
  background-size: 1000px 100px
}
section .air.air1{
  animation: wave 30s linear infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
section .air.air2{
  animation: wave2 15s linear infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}
section .air.air3{
  animation: wave 30s linear infinite;
  z-index: 998;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 15px;
}
section .air.air4{
  animation: wave2 5s linear infinite;
  z-index: 997;
  opacity: 0.7;
  animation-delay: -5s;
  bottom: 20px;
}
@keyframes wave{
  0%{
    background-position-x: 0px; 
  }
  100%{
    background-position-x: 1000px; 
  }
}
@keyframes wave2{
  0%{
    background-position-x: 0px; 
  }
  100%{
    background-position-x: -1000px; 
  }
}*/


/* CSS EFFECT - SKY */












/* BLINKER UNDERSCORE EFFECT */
.category-title
  h1
    &:after
      padding: 24px 0 24px 24px
      content: "_"
      @extend .blinker


@font-face 
  src: url('../fonts/Redacted-Regular.ttf') format('tff')
  font-weight: 400
  font-style: normal


  
.hover-blue
  h2
    color: var(--color-blue)
.hover-green
  h2
    color: var(--color-green)
.hover-red
  h2
    color: var(--color-red)
.hover-orange
  h2
    color: var(--color-orange)
.hover-yellow
  h2
    color: var(--color-yellow)
.hover-purple
  h2
    color: var(--color-purple)



/* FUTURE CSS RULES NOT FULLY SUPPORTED YET */

.trim-text {
  text-box-trim: trim-both; /* Trim space from both top and bottom */
  text-box-edge: cap alphabetic; /* Use the cap height for the top edge and baseline for the bottom edge */
  line-height: 1; /* Set line height to a tight value (adjust as needed) */
}




@font-face 
  font-family: "Redacted", system-ui
  src: url('../fonts/Redacted-Regular.ttf') format('tff')
  font-weight: 400
  font-style: normal

*
  font-family: "Redacted", system-ui


* {
    box-sizing: border-box; 
}
 @-webkit-keyframes ticker {
    0% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
       visibility: visible;
   }
    100% {
       -webkit-transform: translate3d(-100%, 0, 0);
       transform: translate3d(-100%, 0, 0);
   }
}
 @keyframes ticker {
    0% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
       visibility: visible;
   }
    100% {
       -webkit-transform: translate3d(-100%, 0, 0);
       transform: translate3d(-100%, 0, 0);
   }
}
 .ticker-wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    height: 4rem;
    background-color: rgba(0, 0, 0, 0.9);
    padding-left: 100%;
    box-sizing: content-box;
    text-transform: uppercase;
    z-index: 9999;
   font-family: "Doto", sans-serif;
}
 .ticker-wrap .ticker {
    display: inline-block;
    height: 4rem;
    line-height: 4rem;
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
}
 .ticker-wrap .ticker__item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 2rem;
    color: white;
}


body, html {
  scroll-padding-top: 86px; /* Adjust this value to the height of your fixed header */
}



.image img {
  height: auto;
  padding: 8px 0;
  width: 100%;
}



    /* 
    .project-section
      p
        mix-blend-mode: luminosity
        filter: invert(1) 
    */

/* EFFECT - TV STATIC LINE */

.lines {
  rotate: 90(deg) !important
  border: 1px solid orange !important;
  padding: 4px !important;
}

.effect-tv-static {
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  opacity: 0.05
}
.effect-tv-static:nth-child(1) {
  left: 33%;
}
.effect-tv-static:nth-child(1)::after {
  animation-delay: -2s;
}
.effect-tv-static:nth-child(2) {
  left: 66%;
}
.effect-tv-static:nth-child(2)::after {
  animation-delay: -1s;
}
.effect-tv-static::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 75px;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation: animatedLine 5s 0s infinite;
  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
  animation-fill-mode: forwards;
}

@keyframes effect-tv-static {
  0% {
      top: -150px;
  }
  60% {
      top: calc(100% + 150px);
  }
  100% {
      top: calc(100% + 150px);
  }
}







body {
  background-color: hsl(240, 30, 10);
}

.library {
  display: flex;
  grid-gap: 16px;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.effect-shine-wrapper {
  display: flex;
  perspective: 1000px;
  perspective-origin: center top;
  height: max-content;

  .effect-shine {
    position: relative;
    display: flex;
    overflow: hidden;

    transform-origin: 100% 0;

    border-radius: 2px;
    transition: transform 0.3s ease-in-out;

    &:hover {
      transform: rotateX(10deg);

      .shine {
        height: 100%;
        opacity: 1;
      }
    }
  }

  .shine {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    z-index: 1;

    transform: rotate(30deg);
    transform-origin: top right;

    width: 200%;
    height: 65%;

    opacity: 0.3;
    background: linear-gradient(
      0turn,
      transparent 0%,
      rgba(200, 200, 200, 0.4) 5%,
      rgba(255, 255, 255, 0.2) 15%,
      rgba(255, 255, 255, 0.1) 100%
    );
    transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
}


























.neon-heading {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            text-shadow: 
                0 0 5px rgba(15, 247, 255, 0.7),
                0 0 10px rgba(15, 247, 255, 0.5),
                0 0 20px rgba(15, 247, 255, 0.3),
                0 0 30px rgba(15, 247, 255, 0.1),
                2px 2px 2px rgba(110, 23, 255, 0.5);
            transform-style: preserve-3d;
            perspective: 1000px;
        }




html {
  height:100%;
}

body {
  margin:0;
}

.bg {
  animation:slide 87s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #C0E4E2 50%, #7DCAC2 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:87s;
}

.bg3 {
  animation-duration:87s;
}

.content {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}


@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}





background: linear-gradient(to right, #451056, orange) !important












.grower.animated {
  animation-name: grow;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes grow {
  0% {
    transform: scaleX(1);
  }
  25% {
    background: darkturquoise;
  }
  50% {
    background: hotpink;
  }
  75% {
    background: purple;
    transform: scaleX(1.8);
  }
  100% {
    background: lightseagreen;
  }
}

/* Decorative styles */
.grower {
  width: 200px;
  height: 80px;
  background: lightseagreen;
  position: relative;
  margin-left: auto;
  margin-right: auto;

}

label {
  display: block;
}


/*   





 .bg-home {
    background: url("images/header.jpg") !important;
    background-repeat: no-repeat;
    background-position: top;
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: -9999; }






.header-image-full
  img
    width: 100%






.navbar
  width: 100%




.bg-glass
  background: rgba(230, 230, 230, .05)
  border-radius: 12px
  
.nav
  display: flex
  flex-wrap: wrap
  list-style: none
  margin: 0 0 0 -12px
  padding: 0

REMOVED CSS

.active
  font-style: italic

.ascii-drawing
  display: flex
  justify-content: flex-end
  pre
    color: var(--color-green)





SCROLL BAR STYLING  

::-webkit-scrollbar 
  width: 15px
  height: 15pxs

::-webkit-scrollbar-track-piece  
  background-color: rgba(255, 255, 255, 0.1) 
  backdrop-filter: blur(187px)

::-webkit-scrollbar-thumb:vertical 
  height: 30px
  background-color: rgba(255, 255, 255, 0.1) 
  backdrop-filter: blur(187px)

*/


/*

.test 
  li
    inside: avoid-column !important

*/

/*

textarea
  padding: .3em .6em
  resize: vertical

*/




/*.article-head-title
  color: var(--color-base)
  font-weight: var(--font-normal)
  text-align: left

.article-head-description
  color: var(--color-base)
  font-size: 2rem
  font-weight: var(--font-normal)
  line-height: 1.6em
  margin: 0 0 2vw
  text-align: left*/



/* SPACE BG EFFECT
body {background: #000 !important;}
.space {
    border: 1px solid pink !important;
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -42vw -4vh 0px 0px #fff,25vw -41vh 0px 0px #fff,-20vw 49vh 0px 1px #fff,5vw 40vh 1px 1px #fff,29vw 19vh 1px 0px #fff,-44vw -13vh 0px 0px #fff,46vw 41vh 0px 1px #fff,-3vw -45vh 0px 1px #fff,47vw 35vh 1px 0px #fff,12vw -8vh 1px 0px #fff,-34vw 48vh 1px 1px #fff,32vw 26vh 1px 1px #fff,32vw -41vh 1px 1px #fff,0vw 37vh 1px 1px #fff,34vw -26vh 1px 0px #fff,-14vw -49vh 1px 0px #fff,-12vw 45vh 0px 1px #fff,-44vw -33vh 0px 1px #fff,-13vw 41vh 0px 0px #fff,-36vw -11vh 0px 1px #fff,-23vw -24vh 1px 0px #fff,-38vw -27vh 0px 1px #fff,16vw -19vh 0px 0px #fff,28vw 33vh 1px 0px #fff,-49vw -4vh 0px 0px #fff,16vw 32vh 0px 1px #fff,36vw -18vh 1px 0px #fff,-25vw -30vh 1px 0px #fff,-23vw 24vh 0px 1px #fff,-2vw -35vh 1px 1px #fff,-25vw 9vh 0px 0px #fff,-15vw -34vh 0px 0px #fff,-8vw -19vh 1px 0px #fff,-20vw -20vh 1px 1px #fff,42vw 50vh 0px 1px #fff,-32vw 10vh 1px 0px #fff,-23vw -17vh 0px 0px #fff,44vw 15vh 1px 0px #fff,-40vw 33vh 1px 1px #fff,-43vw 8vh 0px 0px #fff,-48vw -15vh 1px 1px #fff,-24vw 17vh 0px 0px #fff,-31vw 50vh 1px 0px #fff,36vw -38vh 0px 1px #fff,-7vw 48vh 0px 0px #fff,15vw -32vh 0px 0px #fff,29vw -41vh 0px 0px #fff,2vw 37vh 1px 0px #fff,7vw -40vh 1px 1px #fff,15vw 18vh 0px 0px #fff,25vw -13vh 1px 1px #fff,-46vw -12vh 1px 1px #fff,-18vw 22vh 0px 0px #fff,23vw -9vh 1px 0px #fff,50vw 12vh 0px 1px #fff,45vw 2vh 0px 0px #fff,14vw -48vh 1px 0px #fff,23vw 43vh 0px 1px #fff,-40vw 16vh 1px 1px #fff,20vw -31vh 0px 1px #fff,-17vw 44vh 1px 1px #fff,18vw -45vh 0px 0px #fff,33vw -6vh 0px 0px #fff,0vw 7vh 0px 1px #fff,-10vw -18vh 0px 1px #fff,-19vw 5vh 1px 0px #fff,1vw 42vh 0px 0px #fff,22vw 48vh 0px 1px #fff,39vw -8vh 1px 1px #fff,-6vw -42vh 1px 0px #fff,-47vw 34vh 0px 0px #fff,-46vw 19vh 0px 1px #fff,-12vw -32vh 0px 0px #fff,-45vw -38vh 0px 1px #fff,-28vw 18vh 1px 0px #fff,-38vw -46vh 1px 1px #fff,49vw -6vh 1px 1px #fff,-28vw 18vh 1px 1px #fff,10vw -24vh 0px 1px #fff,-5vw -11vh 1px 1px #fff,33vw -8vh 1px 0px #fff,-16vw 17vh 0px 0px #fff,18vw 27vh 0px 1px #fff,-8vw -10vh 1px 1px #fff;
  */
  /* stars were too big with the layers above but left the code in case no one cares  -- as in, if noone's just that  one other loner who actually cares    */
  /*
  box-shadow: 24vw 9vh 1px 0px #fff,12vw -24vh 0px 1px #fff,-45vw -22vh 0px 0px #fff,-37vw -40vh 0px 1px #fff,29vw 19vh 0px 1px #fff,4vw -8vh 0px 1px #fff,-5vw 21vh 1px 1px #fff,-27vw 26vh 1px 1px #fff,-47vw -3vh 1px 1px #fff,-28vw -30vh 0px 1px #fff,-43vw -27vh 0px 1px #fff,4vw 22vh 1px 1px #fff,36vw 23vh 0px 0px #fff,-21vw 24vh 1px 1px #fff,-16vw 2vh 1px 0px #fff,-16vw -6vh 0px 0px #fff,5vw 26vh 0px 0px #fff,-34vw 41vh 0px 0px #fff,1vw 42vh 1px 1px #fff,11vw -13vh 1px 1px #fff,48vw -8vh 1px 0px #fff,22vw -15vh 0px 0px #fff,45vw 49vh 0px 0px #fff,43vw -27vh 1px 1px #fff,20vw -2vh 0px 0px #fff,8vw 22vh 0px 1px #fff,39vw 48vh 1px 1px #fff,-21vw -11vh 0px 1px #fff,-40vw 45vh 0px 1px #fff,11vw -30vh 1px 0px #fff,26vw 30vh 1px 0px #fff,45vw -29vh 0px 1px #fff,-2vw 18vh 0px 0px #fff,-29vw -45vh 1px 0px #fff,-7vw -27vh 1px 1px #fff,42vw 24vh 0px 0px #fff,45vw -48vh 1px 0px #fff,-36vw -18vh 0px 0px #fff,-44vw 13vh 0px 1px #fff,36vw 16vh 0px 1px #fff,40vw 24vh 0px 0px #fff,18vw 11vh 0px 0px #fff,-15vw -23vh 1px 0px #fff,-24vw 48vh 0px 1px #fff,27vw -45vh 1px 0px #fff,-2vw -24vh 0px 1px #fff,-15vw -28vh 0px 0px #fff,-43vw 13vh 1px 0px #fff,7vw 27vh 1px 0px #fff,47vw 5vh 0px 0px #fff,-45vw 15vh 1px 1px #fff,-5vw -28vh 0px 1px #fff,38vw 25vh 1px 1px #fff,-39vw -1vh 1px 0px #fff,5vw 0vh 1px 0px #fff,49vw 13vh 0px 0px #fff,48vw 10vh 0px 1px #fff,19vw -28vh 0px 0px #fff,4vw 7vh 0px 0px #fff,21vw 21vh 1px 1px #fff,-15vw -15vh 0px 1px #fff,-6vw -42vh 1px 0px #fff,-15vw 48vh 1px 1px #fff,-23vw 25vh 1px 1px #fff,-48vw 25vh 0px 1px #fff,-31vw -19vh 0px 1px #fff,4vw 37vh 1px 1px #fff,-43vw 28vh 0px 0px #fff,3vw -25vh 0px 1px #fff,-39vw 14vh 0px 1px #fff,-40vw 31vh 0px 1px #fff,35vw -36vh 1px 1px #fff,16vw 49vh 0px 0px #fff,6vw 39vh 0px 0px #fff,3vw -35vh 0px 1px #fff,-44vw -2vh 1px 0px #fff,-6vw 21vh 1px 0px #fff,48vw 9vh 1px 1px #fff,-43vw 30vh 1px 1px #fff,29vw -12vh 1px 1px #fff,-48vw 13vh 1px 0px #fff,-42vw 32vh 1px 1px #fff,34vw 15vh 1px 1px #fff,29vw -37vh 1px 1px #fff,28vw 2vh 0px 0px #fff;
  animation: zoom 16s alternate infinite; 
}

*/
  /*
@keyframes zoom {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}
*/
/*

form
  margin: 0 0 var(--margin) 0

fieldset
  border: 0
  margin: 0
  padding: 0

label
  color: var(--color-primary)
  display: block
  font-size: .9em
  font-weight: var(--font-bold)
  margin: 0 0 calc(var(--margin)*.5) 0

input
  &[type=email], &[type=password], &[type=search], &[type=tel], &[type=text], &[type=url]
    background: var(--color-bg)
    border: none
    border: 1px solid var(--color-border)
    border-radius: var(--radius)
    color: inherit
    display: block
    outline: 0
    padding: 0 .6em
    text-decoration: none
    width: 100%

select, textarea
  background: var(--color-bg)
  border: none
  border: 1px solid var(--color-border)
  border-radius: var(--radius)
  color: inherit
  display: block
  outline: 0
  padding: 0 .6em
  text-decoration: none
  width: 100%

  &:focus::-ms-value
    background-color: transparent

  &::-ms-expand
    display: none


input
  &[type=email], &[type=password], &[type=search], &[type=tel], &[type=text], &[type=url]
    background: var(--color-bg)
    border: none
    border: 1px solid var(--color-border)
    border-radius: var(--radius)
    color: inherit
    display: block
    outline: 0
    padding: 0 .6em
    text-decoration: none
    width: 100%

select, textarea
  background: var(--color-bg)
  border: none
  border: 1px solid var(--color-border)
  border-radius: var(--radius)
  color: inherit
  display: block
  outline: 0
  padding: 0 .6em
  text-decoration: none
  width: 100%

input
  &[type=email]:invalid, &[type=password]:invalid, &[type=search]:invalid, &[type=tel]:invalid, &[type=text]:invalid, &[type=url]:invalid
    box-shadow: none

select:invalid, textarea:invalid
  box-shadow: none

input
  &[type=email]:focus, &[type=password]:focus, &[type=search]:focus, &[type=tel]:focus, &[type=text]:focus, &[type=url]:focus
    border-color: var(--color-primary)
    box-shadow: 0 0 0 1px var(--color-primary)

select:focus, textarea:focus
  border-color: var(--color-primary)
  box-shadow: 0 0 0 1px var(--color-primary)

select
  height: var(--height)
  padding-right: var(--height)
  text-overflow: ellipsis

  option
    background: var(--color-bg)
    color: var(--color-primary)

*/

/*


.transition-fade
  animation: slideUp 0.9s cubic-bezier(0.075, 0.82, 0.165, 1) forwards
  opacity: 1
  transform: translate3d(0, 4vh, 0)
  transition: .25s
  opacity: 0

.img
  background-position: 50%
  background-size: cover
  border-radius: 100%
  display: block
  height: 100%
  width: 100%

.error-head
  height: 75vh
  h1
    font-size: 7rem
    font-weight: var(--font-heavy)
    letter-spacing: 10px
    line-height: 1.1em
    margin: 0
  p
    font-size: 1.4rem
    letter-spacing: 1px
    margin: 2vw 0 3vw
    text-transform: uppercase

.error-link
  font-size: 1.5rem
  margin-top: 1rem
  text-decoration: underline
  text-decoration-style: dotted
  text-underline-offset: 3px

.author-meta
  justify-content: center
  margin-bottom: 10px

.author-links, .author-meta
  align-items: center
  display: flex

.author-links
  margin-top: 20px
  a
    display: block
    margin: 0
    padding: 0 12px
    &:hover
      text-decoration: none

  .divider
    display: inline-block
    margin: 0 

*/
/*

select
  height: var(--height)

input
  &[type=email], &[type=password], &[type=search], &[type=tel], &[type=text], &[type=url]
    height: var(--height)


*/



/*

.site-head
  font-family: "JetBrains Mono", monospace
  font-weight: 400
  font-style: normal
  font-size: 1.8rem
  max-width: 987px

.site-head-container
  align-items: center
  display: block
  grid-template-columns: 1fr auto 1fr

.row
  display: flex
  flex: 0 1 auto
  flex-direction: row
  flex-wrap: wrap
  margin: 0 -1rem

blockquote flex, p
  margin: 0 0 1.5em

blockquote flex
  border-left: 0.5em solid var(--color-bg)
  margin: 1.5em 0
  padding: 0 1.6em

  p
    font-size: 1.2em
    font-weight: var(--font-normal)
    margin: .8em 0

  small
    display: inline-block
    font-size: .9em
    margin: .8em 0 .8em 1.5em

    &:before
      content: "\2014 \00A0"

  cite
    font-weight: var(--font-bold)

    a
      font-weight: var(--font-normal)

del
  text-decoration-thickness: 2px
  
ul
  list-style-type: square

  &.post-entries
    list-style-type: none

audio, canvas, iframe, img, svg, video
  vertical-align: middle

dt
  display: block
  font-weight: var(--font-bold)
  margin: 0 0 calc(var(--margin)*.5) 0

dd
  margin-left: var(--margin)
hr
  border: 0
  display: block
  height: 1px
  margin: 2.5em 0 3.5em
  padding: 0
  position: relative
  width: 100%


.button, button
  -webkit-appearance: none
  -moz-appearance: none
  appearance: none
  border: 0
  border-radius: var(--radius)
  cursor: pointer
  display: inline-block
  font-family: var(--font-sans-serif)
  font-size: 1.8rem
  font-weight: var(--font-normal)
  height: var(--height)
  line-height: var(--height)
  padding: 0 2rem
  text-align: center
  text-decoration: none
  transition: .4s ease
  white-space: nowrap

input
  &[type=button], &[type=checkbox], &[type=reset], &[type=submit]
    -webkit-appearance: none
    -moz-appearance: none
    appearance: none
    border: 0
    border-radius: var(--radius)
    cursor: pointer
    display: inline-block
    font-family: var(--font-sans-serif)
    font-size: 1.8rem
    font-weight: var(--font-normal)
    height: var(--height)
    line-height: var(--height)
    padding: 0 2rem
    text-align: center
    text-decoration: none
    transition: .4s ease
    white-space: nowrap

  &[type=checkbox]
    height: 2rem
    margin-right: 0
    width: 2rem

.button.fit, button.fit
  width: 100%

input
  &[type=button].fit, &[type=reset].fit, &[type=submit].fit
    width: 100%

.button.small, button.small
  font-size: 1.2rem
  height: calc(var(--height)*.9)
  line-height: calc(var(--height)*.9)
  padding: 0 1.5rem

input
  &[type=button].small, &[type=reset].small, &[type=submit].small
    font-size: 1.2rem
    height: calc(var(--height)*.9)
    line-height: calc(var(--height)*.9)
    padding: 0 1.5rem

.button.large, button.large
  font-size: 1.6rem
  height: calc(var(--height)*1.14)
  line-height: calc(var(--height)*1.14)
  padding: 0 3rem

input
  &[type=button].large, &[type=reset].large, &[type=submit].large
    font-size: 1.6rem
    height: calc(var(--height)*1.14)
    line-height: calc(var(--height)*1.14)
    padding: 0 3rem

.button
  &.disabled, &:disabled
    opacity: .4
    pointer-events: none

button
  &.disabled, &:disabled
    opacity: .4
    pointer-events: none

input
  &[type=button]
    &.disabled, &:disabled
      opacity: .4
      pointer-events: none

  &[type=checkbox]
    &.disabled, &:disabled
      opacity: .4
      pointer-events: none

  &[type=reset]
    &.disabled, &:disabled
      opacity: .4
      pointer-events: none

  &[type=submit]
    &.disabled, &:disabled
      opacity: .4
      pointer-events: none

.button, button
  background-color: transparent
  box-shadow: inset 0 0 0 2px var(--color-primary)
  color: var(--color-primary) !important

input
  &[type=button], &[type=checkbox], &[type=reset], &[type=submit]
    background-color: transparent
    box-shadow: inset 0 0 0 2px var(--color-primary)
    color: var(--color-primary) !important

.button:hover, button:hover
  box-shadow: inset 0 0 0 2px var(--color-primary)
  color: var(--color-bg) !important
  text-decoration: none
  transition: .2s ease

input
  &[type=button]:hover, &[type=checkbox]:hover, &[type=reset]:hover, &[type=submit]:hover
    box-shadow: inset 0 0 0 2px var(--color-primary)
    color: var(--color-bg) !important
    text-decoration: none
    transition: .2s ease

.button.primary, button.primary
  background-color: var(--color-primary)
  box-shadow: none
  color: #fff !important

input
  &[type=button].primary, &[type=reset].primary, &[type=submit].primary
    background-color: var(--color-primary)
    box-shadow: none
    color: #fff !important
















legend
  border: 0
  padding: 0

textarea
  overflow: auto

ul
  list-style: none

  line-height: normal

  &:focus
    outline: none

  &[type=checkbox], &[type=radio]
    box-sizing: border-box
    padding: 0

  &[type=number]
    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button
      height: auto

  &[type=search]
    -webkit-appearance: textfield
    box-sizing: content-box

    &::-webkit-search-cancel-button, &::-webkit-search-decoration
      -webkit-appearance: none

input
  &[type=checkbox], &[type=radio]
    display: block
    margin-right: -2em
    opacity: 0
    width: 1em
    z-index: -1

  &[type=checkbox] + label, &[type=radio] + label
    align-items: center
    color: var(--color-base)
    cursor: pointer
    display: flex
    font-size: 1em
    font-weight: var(--font-normal)
    padding-left: calc(var(--height)*.6 + .75em)
    padding-right: 2rem
    position: relative
    -webkit-user-select: none
    -moz-user-select: none
    user-select: none

  &[type=checkbox] + label:before, &[type=radio] + label:before
    background: var(--color-bg)
    border: 1px solid var(--color-border)
    border-radius: var(--radius)
    content: ""
    display: inline-block
    height: calc(var(--height)*.6)
    line-height: calc(var(--height)*.56)
    margin-right: 1rem
    text-align: center
    width: calc(var(--height)*.6)

  &[type=checkbox]:checked + label:before, &[type=radio]:checked + label:before
    background: var(--color-primary)
    border-color: var(--color-primary)
    color: var(--color-bg)
    content: "✓"

  &[type=checkbox]:focus + label:before, &[type=radio]:focus + label:before
    border-color: var(--color-primary)
    box-shadow: 0 0 0 1px var(--color-primary)

  &[type=checkbox] + label:before
    border-radius: var(--radius)

  &[type=radio] + label:before
    border-radius: 100%

button::-moz-focus-inner
  border: 0
  padding: 0

input
  &::-moz-focus-inner
    border: 0
    padding: 0


input
  &[type=reset], &[type=submit]
    -webkit-appearance: button
    cursor: pointer


select
  text-transform: none


button, input, optgroup, select, textarea
  color: inherit
  font: inherit
  margin: 0

button[disabled], html input[disabled]
  cursor: default

button
  border: none
  overflow: visible
  text-transform: none


button, html input[type=button]
  -webkit-appearance: button
  cursor: pointer

q
  &:after, &:before
    content: ""
    content: none


html
  box-sizing: border-box
  -ms-text-size-adjust: 100%
  -webkit-text-size-adjust: 100%


blockquote flex
  &:after, &:before
    content: ""
    content: none

*, :after, :before
  box-sizing: inherit

dfn, em, i
  font-style: italic

img
  max-width: 100%


section.block
  margin: 40px 0
  padding: 24px 16px 0

  h1, h2, h3, h4, h5
    margin-top: 0


sub
  bottom: -.25em


mark
  background-color: #fdffb6


sub
  font-size: 75%
  line-height: 0
  position: relative
  vertical-align: baseline

sup
  font-size: 75%
  line-height: 0
  position: relative
  vertical-align: baseline
  top: -3.5em


blockquote flex, q
  quote flexs: none

.page-head
  align-items: flex-start
  display: flex
  flex-direction: column
  justify-content: left
  margin: 0
  padding: 6vw 0
  text-align: left
*/


              <pre>                        
                        ◎
                        │
                        │                ┌─────────────────────┐
                 ┌──────◇──────┐         │                     │
                 │             │         │                     │
             ┏■──┘━━━━━━━━━━━━━└──■┓     │                     │
             ┃*━━━━━━━━━━━━━━━━━━━*┃     ◍ Hello, dear friend! │
             ┃┃   ■■■■■   ■■■■■   ┃┃    ╱                      │
             ┃┃   ■■■■■   ■■■■■   ┃┃   ╱                       │
             ┃┃   ■■■■■   ■■■■■   ┃┃  ╱──◍                     │
             ┃*━━━━━━━━━━━━━━━━━━━*┃     └─────────────────────┘
            ◆─────◆─────◆─────◆─────◆
            │╲***╱*╲***╱*╲***╱*╲***╱│
            │*╲*╱***╲*╱***╲*╱***╲*╱*│
            └──◆─────◆─────◆─────◆──┘
             ┗━━━━━━━━━━━━━━━━━━━━━┛
      ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┏━━━━━┃///////////////////////////////////┃━━━━━┓
┃ ┌─┐ ┃.▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫▫.┃ ┌─┐ ┃
┃ │ │ ┃.▫          ╔═════════╗          ▫.┃ │ │ ┃
┗━│ │━┃.▫          ║   ┌┐ ●─○║          ▫.┃━│ │━┛
  │ │ ◎─▣──────────▣   ││  ┌─▣──────────▣─◎ │ │
  │ │ ┃.▫▨▨▨▨▨▨▨▨▨▨└┐ ┌┘└┐┌┘ ║▨▨▨▨▨▨▨▨▨▨▫.┃ │ │
  │ │ ┃.▫◹◹◹◹◹◹◹◹◹◹║└─┘  └┘  ║◸◸◸◸◸◸◸◸◸◸▫.┃ │ │
  │ │ ┃.           ╚═════════╝           .┃ │ │
 ┏━━━┓┃.                                 .┃┏━━━┓
 ┗━━━┛┃.     M  O  N  O  D  R  A  W      .┃┗━━━┛
  │ │ ┃.                                 .┃ │ │
  │ │ ┗━━━━━━///////////////////////━━━━━━┛ │ │
  │ │       ┃◦                     ◦┃       │ │
  │ │       ┃   ┏━━━━━━━━━━━━━━━┓   ┃       │ │
  │ │       ┃◦  ┃▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤┃  ◦┃       │ │
  │ │       ┃   ┗━━━━━━━━━━━━━━━┛   ┃       │ │
┌──◎──┐     ┃◦                     ◦┃     ┌──◎──┐
│ ┌─┐ │ ┏━━━━━━━━━━━━┓◬◬◬◬◬┏━━━━━━━━━━━━┓ │ ┌─┐ │
└─┘ └─┘ ┃            ┃━━━━━┃            ┃ └─┘ └─┘
        ┃            ┃     ┃            ┃
        ┃            ┃     ┃            ┃
        ┃            ┃     ┃            ┃
        ┃            ┃     ┃            ┃
        ┃\\\\\\\\\\\\┃     ┃\\\\\\\\\\\\┃
       ┌──────────────┐   ┌──────────────┐
       │              │   │              │
       └──────────────┘   └──────────────┘
        ┃////////////┃     ┃////////////┃
        ┃            ┃     ┃            ┃
        ┃            ┃     ┃            ┃
        ┃            ┃     ┃            ┃
        ┃            ┃     ┃            ┃
      ┌────────────────┐ ┌────────────────┐
      │                │ │                │
      ┏━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━━┓
      ┗━━━━━━━━━━━━━━━━┛ ┗━━━━━━━━━━━━━━━━┛
  </pre>