/*Not for use, just for reference*/

 .Colorstorage {
    /* Mignola based colors */
    color: #E4D8C7;    /* snow white */
    color: #A9BA9A;    /* mint green */
    color: #808F78;    /* poopoo green */
    color: #824B43;    /* Dirty Brown */
    color: #9F1422;     /* Hellboy Red */ 
    /* Fonts */
font-family: 'Raleway', sans-serif; /* The new header, used for subtext */
font-family: 'Lato', sans-serif; /* Lato, used for subtext */
}

h1 {
    color: #ffc04cc7;
    font-family: 'Playfair Display', serif; /* The new header, used for subtext */
    text-align: center;
    font-size: 42px, auto;
}

h4 {
    text-align: center;
}

h5 {
 font-size: auto;
 margin: auto;
}

h2 {
    font-family: 'Raleway', sans-serif; /* The new header, used for subtext */
    text-align: center;
    font-size: 42px;
    color: #824B43;
}

body, html {
    height: 100%;
    font-family: 'Lato', sans-serif; /* Lato, used for subtext */
    box-sizing: border-box;
    text-align: center;
  }
  
  .bg-image {
      opacity: 0.5;
    /* The image used */
    background-image: url("codeback.png");
  
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
  
    /* Full height */
    height: 100%;
    width: 100%;
    background-color: black;
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  /* Position text in the middle of the page/image */
  .bg-text {
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    color: #E4D8C7;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    padding: 20px;
    text-align: center;
  }

  .bg-text {
    background-color: rgb(0 0 0 / 5%); /* Black w/opacity/see-through */
    color: #E4D8C7;
    font-weight: bold;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    padding: 20px;
    text-align: center;
  }
  .bg-text2 {
    background-color: rgb(56 56 56 / 17%); /* Black w/opacity/see-through */
    color: #E4D8C7;
    font-weight: bold;
    border-radius: 15px;
    position: absolute;
    top: 78%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 83%;
    height: auto;
    text-align: center;
  }

  #invisible {
      color: transparent;
      background: transparent;
  }

  #linkBtn {
    width: 13%;
    height: auto;
    float: center;
    margin: 15px;
justify-content: space-evenly;
}
 
#linkBtn:active {
    width: 10%;
    height: auto;
    float: center;
    margin: 15px;
justify-content: space-evenly;
}

#linkBtn:hover {
    width: 12%;
    height: auto;
    margin: 2%;
    transition: ease-in-out 0.2s;
}


#homeBtn {
    z-index: 4;
    font-weight: bold;
    color: #E4D8C7;
    font-family: 'Raleway', sans-serif; /* The new header, used for subtext */
font-size: medium;
}

#homeBtn:hover {
    z-index: 4;
    transition: ease-out 0.2s;
    color: #f0c589;
font-size: larger;
}

.container, p {
    color: #E4D8C7;

}


/* Contact Page */

form {
    width: 100%;
    background-color: #9F1422;
    padding: 12px;
    border-radius: 15px;
    border: solid black 12px;
    filter: drop-shadow(0 0 72px #9F1422);
}

.card-title {
    text-align: center;
    font-weight: bolder;
    margin: auto;
    background-color: transparent;
    background-size: 95%;
    background-repeat: no-repeat;
    filter: drop-shadow(5px 8px 8px #080503);
    color: #c99d5b;
    font-family: 'Raleway', sans-serif; /* The new header, used for subtext */
    font-size: 30px, auto;
}

#smlImage {
    height: 25%;
    width: 50%;
    align-content: center;
    float: center;
}

#imgHalf {
    float: left;
    height: auto;
    width: auto;
    align-content: center;
}

#webcarousel {
    background-color: #770f1a;
    width: 1000px;
    height: 750px;
    /* Border shiznit */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
}

.content {
    z-index: -2;
    position:relative;
}

.card-body {
    color: #E4D8C7;
    text-align: center;
    filter: drop-shadow(5px 8px 18px #08050360);
    background-color: #a9ba9a2e;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    height: auto;
    width: auto;
    background-size: 100%;
    background-position: left;
    background-repeat: no-repeat;
}

p {
    font-family: 'Lato', sans-serif; /* Lato, used for subtext */
    font-size: small;
    margin-top: 0;
    margin-left: 12px;
    margin-right: 13px;
    margin-bottom: 10px
}

img {
    width: auto;
    height: auto;
}

form {
    background: transparent;
}


#cardthing {
    background-color: transparent;
}

#maincard {
    background: transparent;
    width: auto;
}

#mainbody {
    border: transparent;
    color: #E4D8C7;
    background: transparent;
}


/* Navbar */

#navDeco {
    z-index: 1;
    float: center;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    border: dashed #000000 1px;
    opacity: 0.65;
    width: 100%;
    border-bottom-left-radius: 64px;
    border-bottom-right-radius: 64px;
    /* font stuff */
    font-family: 'Rye', sans-serif;
    font-size: medium;
    overflow: hidden;
    background: linear-gradient(-45deg, #282828, #161414);
    color: #E4D8C7;
}




/* Main nav selection */
#navselect {
    background-color: transparent;
    background-size: 45%;
    background-position: left;
    background-repeat: no-repeat;
    
}

#navselect:hover {
    background-size: 45%;
    font-size: 20px;
    background-position: left;
    background-repeat: no-repeat;
    transition: ease-out 0.5s;
    color: black;
    filter: drop-shadow(5px 8px 8px #080503);
}

/* Sub header selectors */

#subnav {
    color: silver;
    background-color: #5d5d5d29;
    border-radius: 5px;
    float: inherit;
    margin-bottom: 12px;
    border-bottom: dotted #55121a 2px;
}

#navselect2 {
    margin-left: 10%;
    margin-bottom: 15px;
    padding-left: 25px;
    width: 305px;
    border-top-left-radius: 25%;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    font-size: 12px;
    background-color: transparent;
    background-size: 45%;
    background-position: left;
    background-repeat: no-repeat;
    filter: drop-shadow(5px 8px 8px #080503);
    
}

#navselect2:hover {

    font-size: 19px;
    color: white;
    background-color: transparent;
    background-size: 40%;
    width: 35%;
    background-position: left;
    background-repeat: no-repeat;
    transition: ease-out 0.5s;
        filter: drop-shadow(5px 8px 8px #080503);
    
}


/* Current Page */
#navdisabled {

    border-radius: 25px;
    filter: drop-shadow(5px 2px 20px #080503);
    background-color: #7c1925;
    background-size: 100%;
    width: 50%;
    background-position: center;
    background-repeat: no-repeat;
    font-weight: bold;
    color: white;
}


/* PAGE FORMAT */

.content {
    z-index: -1;
}

#leftcard {
    float: left;
}

#lightcard {
        padding-right: 15px;
        padding-left: 9px;
        text-align: end;
}

#lowercard {
    margin-left: 50px;

    background-position: center;
    background-repeat: no-repeat;
    width: 75%;
    background-size: 365px;
    padding: 5px;
    border-radius: 5px;
    margin-right: 15%;
    border-radius: 5px;
    float: left;
}

/* The side card on the page */

#sideCard {
    background-image: linear-gradient(#c09048, #AB7A32, #5c3e12);
    border: solid #3b290e 3px;
    padding: 10px;
    color: black;
}

#buttonthing {
    float: left;
    align-content: center;
    text-align: center;
    align-self: center;
    background-image: linear-gradient(#52534C, #080503);
    color: #E4D8C7;
    text-align: center;
    padding: 10px;
    margin-left: 45%;
    transition: ease-out 0.5s;
    border: solid black 1px;

}

#buttonthing:hover {
    background-image: linear-gradient(#676861, #27221e);
    color: #E4D8C7;
    padding-left: 45px;
    padding-right: 35px;
    transition: ease-out 0.5s;
    border: solid black 1px;

}

/* Animated bg */
html {
    color: #E4D8C7;
    background: linear-gradient(-45deg, #282828, #161414);
	background-size: 400% 400%;
	animation: gradient 12s ease infinite;
    
}

.bg-image {
    perspective: 800px;
	background-size: 100% 250%;
    animation: textscroll 75s ease infinite;
}


body{
    background-color: transparent;
}

/* Animations */

/* vertical scroll */
@keyframes textscroll {
    0% {		
        background-position: 50% 0%;
    }
    50% {
		background-position: 50% 100%;
    }
    100% {
        background-position: 50% 0%;
    }
}

/* Horizontal scroll */
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Bouncy button */
@keyframes bounce {
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	80% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}