/* set margin & padding on all elements to nothing */
* {
	padding: 0;
	margin: 0;
}

html {
    scrollbar-color: #3ac9cb #0d243a;
}

::selection {
    color: white;
    background: #50c6e1;
}




/* navigation */

nav {
	display: block;
	width: 100vw;
	height: 8.5vh;
}

#navbar, #navbar-deco {
	width: 100%;
}

#navbar {
	background-color: #16283C;
	height: 85%;

	position: relative;
	z-index: 11;
}

/* saturn icon */
#navbar a {text-decoration: none;}
#navbar a img {
	width: 60px;
	display: inline;
	position: relative;
	left: 18%;
	top: 5px;
}

/* for hover gif animation */
#navbar img:nth-child(2) {
	opacity: 0;	/*hide animated ver by default*/
	position: absolute; /* put gif ontop of icon*/
}
#navbar a:first-of-type:hover img:first-of-type { 
	opacity: 0; /*hide static icon*/
}
#navbar a:first-of-type:hover img:nth-child(2) {
	opacity: 100%; /*show animated icon*/
}

#navbar div {
	display: inline;
	position: inherit;
	bottom: 15%;

	position: relative;
	left: 22%;
}

#navbar p {
	display: inline;
	margin-left: 12px;
	margin-right: 12px;
}

#navbar p a {
	font-family: var(--saira);	
	font-size: 38px;
	text-transform: uppercase;
	text-decoration: none;
	color: #D5E1EA;
	transition: all 0.3s;
}

#navbar p:nth-child(even) a {
	color: #90CBC4;

}

#navbar p a:hover {color: #FFFFFF;}
#navbar p:nth-child(even) a:hover {color: #90FBC4;}

/* stream ad on top navbar */

#stream-ad {
	background-color: var(--cta-orange);
	width: 285px;
	height: 10%;
	position: absolute;
	z-index: 12;
	display: block;
	right: 20%;
	top: 4%;

	transition: all 0.3s;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#stream-ad:hover {
	background-color: var(--cta-orange-hover);
}

#stream-ad #live-text {
	font-family: var(--atkinson);
	font-weight: bold;
	color: white;
	margin-left: 10px;
	overflow-x: hidden;
}
#live-text p:first-of-type {
	margin-top: 10px;
	font-size: 15px;
}
#live-text p:last-child {
	font-size: 38px;
}



/* navigation footer*/


footer {
	display: block;
	width: 100vw;
	height: 8.5vh;

	z-index: 11;
	position: sticky;
	bottom: 0%;
}

#footer, #footer-deco {
	width: 100%;
}

#footer {
	height: 85%;
	background-color: #F0F4F5;
	position: relative;
	z-index: 11;

	display: flex;
	justify-content: space-evenly;
}

#footer p {
	font-family: var(--atkinson);
	color: #646464;
}

#footer a {
	color: var(--cta-orange);
	font-weight: bold;
	text-decoration: none;
	transition: all 1s;
}
#footer a:hover {color: var(--cta-orange-hover);}

#footer p:first-of-type { margin-top: 10px; }

#socials svg-img svg, #guestbook-btn svg-img svg {
	width: 45px;
	margin-left: 5px;
	margin-right: 5px;
}

#socials .icon, #guestbook-btn .icon {
	 position: absolute;
	 z-index: 11;
	 margin-left: 10px;
	 margin-top: 15px;
}
#socials .icon svg, #guestbook-btn .icon svg {
	width: 25px;
	fill: white;
}

/* Twitch icon is not a square (why.) */
#twitch svg {
	margin-top: 3px;
}

/* color of gears in footer */
#footer #socials svg-img svg * *, #guestbook-btn svg-img svg * * {
	fill: var(--cta-cyan);
} 

#footer #socials .foot-gear:hover svg-img svg * *,
#guestbook-btn:hover svg-img svg * * {
	fill: var(--cta-cyan-hover);
} 
#footer #socials .foot-gear .gear svg,
#guestbook-btn .gear svg {
	animation-name: rotate;
	animation-duration: 3s; 
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: paused;
}	
#footer #socials .foot-gear:hover .gear svg,
#guestbook-btn:hover .gear svg {

	animation-play-state: running;
}

/* side gear styling */

.gears {
    position: relative;
    z-index: 11;
}


.side-gear svg-img svg  {
	width: 150px;
	margin: 0;
	height: unset;
	position: fixed;
	overflow: hidden;
}

.side-gear:first-of-type .gear svg {
	bottom: -50px;
	left: -50px;

	animation-name: rotate;
	animation-duration: 5s; 
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: reverse;
}
.side-gear:last-of-type .gear svg {
	bottom: -50px;
	right: -50px;

	animation-name: rotate;
	animation-duration: 5s; 
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.side-gear .icon svg {
	z-index: 2;
	width: 50px;
}
.side-gear:first-of-type .icon svg {
	bottom: 10px;
	left: 5px;
}
.side-gear:last-of-type .icon svg {
	bottom: 10px;
	right: 5px;
}

.side-gear .gear svg path{
	fill: #16283C;
	transition: 0.25s ease-in-out;
}
.side-gear .icon svg path{
	fill: #3BC9CC;
	transition: 0.25s ease-in-out;
}
.side-gear:hover { cursor: pointer; }
.side-gear:hover .gear svg path { fill: #3BC9CC; }
.side-gear:hover .icon svg path { fill: #16283C; }
.side-gear:hover .gear svg { animation-duration: 3s; } 

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* sawtooth repeating code */
/*  */

.sawtooth {
	width: 100%;
	height: calc(var(--sawtooth-size) / 5.5);
    background-size: var(--sawtooth-size) 
	calc(var(--sawtooth-size) / 5.5);
	position: relative; /* used to place sawtooth above other elements*/ 
}

.sawtooth::after {
	width: 100%;
	content: " ";
	display: block;
    transform: translate(0px, -1px);
	height: calc(var(--sawtooth-size) / 5.5);
    background-size: var(--sawtooth-size)
   	calc(var(--sawtooth-size) / 5.5);
	position: relative; /* used to place sawtooth above other elements*/ 
}

.sawtooth-top  {
	background-image: url(../images/assets/topbanner_inner.svg);	
	/* change color of top nav*/
	/* filter: hue-rotate(30deg); */
}

.sawtooth-top::after  {
	background-image: url(../images/assets/topbanner_outer.svg);	
	z-index: 4;
}

.sawtooth-bot {
	background-image: url(../images/assets/botbanner_inner.svg);	
}

.sawtooth-bot::after {
	background-image: url(../images/assets/botbanner_outer.svg);	
	z-index: 4;
}




/* "program" styling */


	/* fake program window */
.program {
    opacity: 0;
    pointer-events: none;
    transition: opacity ease-in-out 0.3s; 

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    display: flex;
    justify-content: center;
    align-items: center;

	z-index: 10;
	color: var(--btn-main-text);
	background: rgba(9, 6, 40, 0.9);
    backdrop-filter: blur(5px);
}

.visible {
    opacity: 1;
    pointer-events: all;
}

.program .content {
	font-family: var(--atkinson);
	color: var(--btn-main-text);
	font-size: 18px;

    width: 500px;

	border-bottom: 3px solid var(--gradient-4);
    padding-bottom: 5px;

}

.program .content a {
    text-decoration: none;
    color: var(--gradient-3);
}

/* mobile version */
@media (max-width: 600px) {
    #cbox {
        width: 100%; 
        height: 76vh;
    }
    .program .content {
        width: 300px;
        margin-bottom: 75px;
    }
        

}

/* reduced motion version */
@media (prefers-reduced-motion: reduce) {
    #footer #socials .foot-gear .gear svg,
    #guestbook-btn .gear svg { animation-play-state: paused; }
}