@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Roboto+Mono|Shrikhand');
@import url("../fonts/font-awesome.min.css");

:root {
    --day-border-color: #46B29D;
    --red: #FF6067;
    --yellow: #FF8353;
    --black:#322C36;
    --white:#FFFFEC;
    --white-white:#ffffff;
    --bg:#322C36;
}

body{
    background-color:var(--bg);
    height:100%;
}

.overlay {
  width: auto;
  height: auto;
  background: url("../img/sparkle.svg") top left no-repeat;
}

.overlay2 {
  width: auto;
  height: auto;
  background: url("../img/sparkle.svg") top center no-repeat;
}

.overlay3 {
  width: auto;
  background: url("../img/sparkle.svg") center center no-repeat;
  transform: rotate(45deg);
}

.navbar{
  font-family: 'Roboto Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color:var(--white);
  background-color:var(--bg);
}

.navbar-nav{
  padding-right:1.2em;
}

.nav-link{
  color:var(--yellow);
}

.navbar-toggler{
  color:var(--yellow);
}

.nav-logo{
  height:44px;
  width:auto;
}

a{
  color:var(--red);
}

a:hover{
  color:var(--yellow);
  text-decoration: none;
}

.nav-link:hover{
  color:var(--white);
}

h1{
    font-family: 'Shrikhand', cursive;
    font-size: 7.4em;
    color:var(--black);
    line-height: 0.8em;
}

.h1H{
    font-size: 1.3em;
}

h2{
    font-family: 'Roboto Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color:var(--white);
    margin-bottom: 1em;
}

h3{
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 2.2em;
    letter-spacing: -0.04em;
    margin-top:-10px;
    color:var(--white);
}

h4{
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 2.0em !important;
    letter-spacing: -0.03em;
    margin-top:-10px;
    color:var(--white);
}

th{
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.6em !important;
  color:var(--black);
}

th a{
  color:var(--black);
}

th a:hover{
  color:var(--white);
}

td{
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.6em !important;
  color:var(--white);
}

li{
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.4em !important;
  color:var(--black);
}

.zaxxon{
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.4xem !important;
  color:var(--black);
}

.about{
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.9em;
  color:var(--black);
}

label{
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.2em !important;
  color:var(--white);
}

.danpic{
  width:500px;
  height:auto;
}

.videomore{
    margin-top:20px;
}

.btn-dark{
  background-color:var(--black);
}

.card p{
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.1em !important;
  letter-spacing:0.1em;
  color:var(--red);
}

.card-orange p{
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.1em !important;
  letter-spacing:0.1em;
  color:var(--yellow);
}

.zero-lSpace{
  letter-spacing: -120px;
  line-height: 10px;
}

.dan{
    margin-top:3em;
    font-size:2.6em;
    padding:0.33em;
}
.dan span{
    background-color: rgba(0, 0, 0, 0.65);
    padding:0.1em;
    line-height: 1.2em;
    box-shadow: 10px 0 0 rgba(0, 0, 0, 0.65), -10px 0 0 rgba(0, 0, 0, 0.65);
}

.dan-title{
    background-color: rgba(0, 0, 0, 1);
    padding:0.1em;
    line-height: 1.2em;
    box-shadow: 12px 0 0 rgba(0, 0, 0, 1), -12px 0 0 rgba(0, 0, 0, 1);
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: 0.1em;
}

.leftcol{
    background-color:var(--bg);
}

.leftcol-inner{
    height:100%;
    background-color:var(--yellow);
    padding:4em 2em 0px 2em;
    margin-right:0.25em;
    margin-left:-15px
}

.rightcol{
    background-color:var(--red);
    padding:2em;
}

.orangecol{
  min-height:100%;
  background-color:var(--yellow);
  padding:1em;
}

.pinkcol{
  min-height:100%;
  background-color:var(--red);
  padding:1em;
}

.p-col{
    margin:0px;
    padding:0px;
}

.stripes{
  background: repeating-linear-gradient(
    45deg,
    #322C36,
    #322C36 10px,
    #FF6067 10px,
    #FF6067 20px
  );
}

.stripes2{
  background: repeating-linear-gradient(
    -35deg,
    #FF8353,
    #FF8353 10px,
    #FF6067 10px,
    #FF6067 20px
  );
}

.left-border{
  border-left-style: solid;
  border-left-width: 2px !important;
  border-left-color:var(--black) !important;
}

.card{
  background-color:var(--black) !important;
  color:var(--white);
}
/* ------------------------------------------------------------------ */
/* MEDIA QUERIES ---------------------------------------------------- */
/* ------------------------------------------------------------------ */

/*  Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px){
  h1{
    text-align: center;
    font-size: 3.2em;
    word-break: break-all;
    word-break: break-word;
  }
  h2{
    text-align: center;
    font-size: 1.6em;
    padding-left: 20px;
  }
  .leftcol-inner{
      margin-left:-20px;
  }

  .img-30{
    width: 130%; height: auto;
  }
  .left-border{
    border:0;
  }

  .dan{
      margin-top:10px;
  }
  .danpic{
    width:350px;
    height:auto;
  }
}

/*  Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .leftcol-inner{
        margin-right:-15px
    }
    h1{
      text-align: center;
      font-size: 4.8em;
      margin-bottom: 0.35em;
    }

    h2{
      text-align: center;
      margin-top: -0.3em;
    }

}

/*  Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}