/*------ FONTS ------*/

@font-face {
  font-family: ClassicFont; /* set name */
  src: url(../fonts/ClassicShit.ttf); /* url of the font */
}

@font-face {
  font-family: Limeless; /* set name */
  src: url(../fonts/limeless.ttf); /* url of the font */
}

@font-face {
    font-family: BrownSugar;
    src: url(../fonts/Balhattan-Regular.ttf);
}

header {
    font-family: Limeless;
    font-size: xx-large;
}

h1 {
    font-family: BrownSugar;
}

p {
    font-family: ClassicFont;
}

/*------ My Styles ------*/

@keyframes glow-effect {
    0% {
        -webkit-box-shadow:0px 0px 59px 13px rgba(46,105,255,0.4);
        -moz-box-shadow: 0px 0px 59px 13px rgba(46,105,255,0.4);
        box-shadow: 0px 0px 59px 13px rgba(46,105,255,0.4);
    }

    50% {
        -webkit-box-shadow:0px 0px 59px 36px rgba(46,105,255,0.4);
        -moz-box-shadow: 0px 0px 59px 36px rgba(46,105,255,0.4);
        box-shadow: 0px 0px 59px 36px rgba(46,105,255,0.4);
    }

    100% {
        -webkit-box-shadow:0px 0px 59px 13px rgba(46,105,255,0.4);
        -moz-box-shadow: 0px 0px 59px 13px rgba(46,105,255,0.4);
        box-shadow: 0px 0px 59px 13px rgba(46,105,255,0.4);
    }
}

@keyframes cloudmovement {

    0% {
        background-position: 0 100%;
    }
    100% {
        background-position: 0 300%;
    }
}

/* Background Stuff*/

.clouds-bg {
    position: fixed;
    z-index: -2;
    width: 100%;
    height: 100%;
    top: 0;
    background-image: url(../images/nebula_gnat.png);
    background-repeat: repeat;
    background-size: 400%;
    animation-name: cloudmovement;
    animation-duration: 360s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    mix-blend-mode: overlay;
    opacity: 25%;
}

/* sauce */
body {
    background: linear-gradient(180deg,rgb(38, 11, 43) 0%, rgb(16, 4, 31) 50%, rgb(46, 0, 46) 100%);
    height: 100%;
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    font-size: x-large;
}

.glow-effect {
   animation-name: glow-effect;
   animation-duration: 4s;
   animation-iteration-count: infinite;
}

.background-img {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -2;
    top: 0;
    left: 0;
    mix-blend-mode:overlay;
    opacity: 65%;
}


/* ---- reset ---- */
canvas { 
    display: block; 
    
}
 /* ---- particles.js container ---- */ 
#particles-js {
    position:fixed; 
    width: 100%; 
    height: 100%; 
    top: 0;
    z-index: -1;
    opacity: 50%;
    mix-blend-mode:hard-light;
    /* filter: url('#pixelate'); */
}

/* Body */

.hero {
    height: 100vh;
}

.hero-content {
    padding-top: 40vh;
    color: white;
}

.body-background {
    background-color: rgba(51, 51, 51, 0.75);
    padding-bottom: 50px;
}

.body-container {
    background-color: rgb(185, 140, 80);
    padding-left: 50px;
}

.body-row {
    background-color: antiquewhite;
    padding: 10px;
}

@media only all and (max-width: 1100px) {

    .body-background {
        background-color: #00000000
    }

    .body-container {
        max-width: 100%;
    }

}

/* footer */

footer {
    background-color: #333333;
    border-top: 5px solid rgba(0,0,0,0.5);
    color: white;
    
}

footer .container {
    background-color: #444444;
    border-left: 5px solid rgba(0,0,0,0.5);
    border-right: 5px solid rgba(0,0,0,0.5);
}

/* header */

.website-icon {
    position: relative;
    margin-top: -10px;
    height: 100%;
    padding-right: 10px;
    image-rendering: pixelated;

}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 10px;
}

header li a, header div a  {
    text-decoration: none;
    color: white;
}

header div a {
    background-color: #333333;
    text-align: center;
    padding-left: 10px;
    padding-right: 15px;
    position: relative;
    height: 100%;
}

header div a:hover {
    background-color: #111111;
}

.nav-border {
    display: flex;
    width: 69%;
    height: 100%;
    padding: 0;
    margin: auto;
}

.nav-left {
    width: 50%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-right {
    width: 50%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
}

header {
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 60px;
    background-color: #444444;
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
  width: fit-content;
  height: 100%;
  overflow: hidden;
  background-color: #333333;
}

header li {
  float: left;
  border-right: 5px solid rgba(5, 5, 5, 0.5)
}

.the-rouge-one {
    border-left: 5px solid rgba(5, 5, 5, 0.5);
}

header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px;
}

header li a:hover {
  background-color: #111111;
}

/* THIS IS FOR WHEN AND WHEN IT IS NOT ON PHONE! */

@media only all and (min-width: 1100px) {

    header {
        border-bottom: 5px solid rgb(15, 15, 15);
    }
    .nav-left > a {
        border-right: 5px solid rgba(5, 5, 5, 0.5);
        border-left: 5px solid rgba(5, 5, 5, 0.5);
    }

}

@media only all and (max-width: 1100px) {
    .nav-border {
        width: 100%;
        display: block;
        align-items: center;
        justify-content: center;
        
    }

    header li {
        padding-top: 10px;
        
    }

    header ul {
        display: flex;
        width: 100%;
        background-color: #444444;
        align-items: center;
        justify-content: center;
    }

    .nav-right {
        display: block;
        width: 100%;
        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
    }

    .nav-left {
        display: block;
        margin: 0 auto;
        width: 100%;
        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
    }
}