@font-face {
    font-family: "Cheese";
    src: url(../../fonts/GRILCB.TTF);
}

@font-face {
    font-family: "Candy";
    src: url(../../fonts/CANDRB.TTF);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: solid white; */
}

html{
    scroll-behavior: smooth;
}

body{

	background-color: black;
	width: 100%;

	overflow-y: scroll;
	overflow-x: hidden;
}

/* "Way Cool Coding School" header*/
#way-cool{

	background-color: #DD6E42;
	font-size: 800%;

	/* position: sticky; */
	z-index: 10;

    


    /* Necessary ? */
	width: 100%;

	text-align: center;

	top: 0px;

	left: 0px;

	height: 125px;

}

.cool-header{
	font-family: 'Luckiest Guy', cursive;
    font-size: 32px;

    display: flex;
    justify-content: center;
}


/*#region New Nav Bar */

/*#region styles hyperlinks */
a:link{
    color: black;
	text-decoration: none;
}

a:visited{
	color: black;
}

a:hover{
	color: black;
	text-decoration: underline;
}

a:active{
	color: black;
}
/*#endregion styles hyperlinks */


main{
    /* border: white dashed 10px; */
    display: flex;
    flex-direction: column;
    
    /* height: 250vh; */
    /* justify-content: space-between; */
    /* position: relative; */

}

/* Flyers */
section.flyer{
    background-color: black;
    /* width: 100%; */
    /* margin: 20px; */
    /* width: 1000px; */
    /* height: 50vh; */
}

#ap-principles-flyer{
    width: 50%;
    /* height: 100% */
}

#honors-coding-pathway-flyer{
    width: 40%;
    
}


/* #canvas-nav-container{
} */

/* Canvas */
canvas {
    width: 100%;
    /* position: absolute; */
    /* z-index: 1; */
    /* top: 0; */
    height: 81vh;
}
/*#endregion  */

#nav-bar {
    font-family: "Cheese";
	font-size: 1.7rem;
    font-weight: lighter;
	background-color: black;
	color: white;
	/* text-align: center; */
	padding-top: 7px;
	/* height: fit-content; */
    height: 2em;
	z-index: 10;    /* keeps atop rest of page*/
	/* bottom: 0px; */
	/* margin: auto; */

    position: sticky;
    top: 0;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#nav-bar-title{
    display: none;
}

#nav-bar a {
	color: white;
	text-align: center;
}



/* "Computer Science at Enochs High School" section */
#computers{
    background-color: #C5EBC3;
    display: none;
    /* background-color: #9ae19d; */
}

#ap-principles{
    background-color: #00798C;
    /* order: -1; */
}

#honors-apps{
    background-color: #EDAE49;
    background-color: #7FB069;
}

#ap-java{
    background-color: #D1495B;
    /* position: absolute; */
    /* z-index: 2; */
}

section{
    z-index: 1;
    padding: 1%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* height: 50vh; */
}

.left{
    padding: 1%;
    /* text-align: center; */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* header class is the title above each left side */
.header, ul{
	font-family: 'Bungee', cursive;
    text-align: center;
	/* font-size: 150%; */
    /* width: 100%; */
}

h1.header{
    font-family: "Cheese";
    /* Why is the font-size not working?  */
    font-size: 2.5rem;   
}

ul{
    font-size: 1.75rem;
}

.content{
    font-family: 'Pontano Sans', sans-serif;
    font-size: 1.25rem;
    /* max-width: 25%; */
}

ul{
    list-style: none;
}

/* #region Right Side */
.right{
    padding: 1%;

    /* This wasn't necessary for the red section, but is for the others!?! */
    width: 40%;     
}

.myVideo{
    
    /* padding: 3%; */
    /* height: 55vh; */
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
	/* width: 35%; */

}

.myVideo-header{
    
    font-family: 'Luckiest Guy', cursive;
    font-size: 2.5rem;
    background-color: black;
    color: whitesmoke;
    text-align: center;
    
    padding: 10px;
}

/* #endregion Right Side */
footer{
    padding-top: 5%;
}

table{

	width: 80%;

	margin-right: 10%;

	margin-left: 10%;

}


#my_act{

	border-style: solid;

	border-width: 6px;

	border-color: white;

	padding: 10px;

	font-family: 'Pontano Sans', sans-serif;

	width: 80%;

	font-size: 200%;

	text-align: center;

}



td {

	width: 30%;

}



/* styles bottom hyperlinks */

td a:link{

	color: white;

	text-decoration: none;

}



td a:visited{

	color: white;

}



td a:hover{

	color: white;

	text-decoration: underline;

}



td a:active{

	color: white;

}




/* I suppose these are for different screen widths */
@media(min-width: 450px) {

    .cool-header{

        font-size: 54px;

    }

}

@media(min-width: 1200px) {

    .cool-header{

        font-size: 96px;

    }

}








@media(max-width: 800px) {

    .left{

        width: 100%;

    }

    .right{

        width: 100%;

    }

}



@media(min-width: 450px) {

    .header{

        font-size: 28px;

    }

}



@media(min-width: 800px) {

    .header{

        font-size: 32px;

    }

}