/*
    //box-shadow: 0px 8px 8px 4px rgba(0,255,130,0.5);  Green glow


    green:  #60fc82
    purple: #a245ff
    red:    #ff6b6e
    orange: #fca258

*/
body {
    background-size: cover;
    background-position: center;
	width: 98%;
    height: 98%;
}

#scrolling{
    position: -webkit-sticky; 
    position: sticky;
}
#titleglow{
    box-shadow: 0px 8px 8px 2px rgba(0,0,0,0.5);
}




                                                    /*first(home) Page (orange)*/
#firstbodyglow{
    box-shadow: 0px 18px 18px 4px #fca258;
}
#firstpicturesglow{
    box-shadow: 0px 0px 8px 4px #fca258;
}
#firsttextglow{
    color: #fca258;
}
#firstbackground{
    background-image: url("images/bgfirst.jpg");
}
@media screen and (max-width: 800px){
	
}


                                                    /*Second(About) Page (purple)*/
#secondbodyglow{
    box-shadow: 0px 18px 18px 8px #a245ff;
}
#secondpicturesglow{
    box-shadow: 0px 0px 8px 4px #a245ff;
}
#secondtextglow{
    color: #a245ff;
}
#secondbackground{
    background-image: url("images/bgsecond.jpg");
}
@media screen and (max-width: 800px){

}

                                                    /*Third() Page (red)*/
#thirdbodyglow{
    box-shadow: 0px 18px 18px 8px #ff6b6e;
}
#thirdpicturesglow{
    box-shadow: 0px 0px 8px 4px #ff6b6e;
}
#thirdtextglow{
    color: #ff6b6e;
}
#thirdbackground{
    background-image: url("images/bgthird.jpg");
}

@media screen and (max-width: 800px){

}


                                                    /*Fourth Page (green)*/
#fourthbodyglow{
    box-shadow: 0px 18px 18px 8px rgba(0,255,130,0.5);
}
#fourthpicturesglow{
    box-shadow: 0px 0px 8px 4px rgba(0,255,130,0.5);
}
#fourthtextglow{
    color: #60fc82;
}
#fourthbackground{
    background-image: url("images/bgfourth.jpg");
}

@media screen and (max-width: 800px){

}






.pageheader{
    padding: 0px 0px;

    width: 100%;
    height: 65px;
    margin: 0px auto;

}

.pageheader p{
    color: white;

}

.fixedbackgroundimage1{
    padding: 0% 0%;
    background-attachment: local;
    background-image: url("images/cat.png");
    background-repeat: no-repeat;
    background-size: 100px 100px;
    width: 100%;
    height: 100px;
}


.titlebox{

    z-index: 1;
    width: 100%;
    background-color: #2e2e2e;
    padding: 0px 0px;
    margin: 0px auto;

    opacity: 1;
    top: 0;

    height: 80px;
    outline: grey;
    outline-style: solid;
    outline-width: 2px;
    position: -webkit-sticky;
    position: sticky;

}

.titlebox h1{
    text-align: left;
    margin: 20px 15px;
    color: white;
    font-family: "lucidia console", monospace;
    padding: 0px;
}





/*                                                      NAVBAR*/
.navbar{
    width: 100%;  
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;

}

navbarbox{
    float: left;
	width: 20%;
}

navbarbox a{ 
    background-color: #1a1a1a;
    color: white;
    display: block;
    text-align: center;
    padding: 10px 0px;
    margin: -16px 0px;
    width: 100%;
    text-decoration: none;
}


.first, .second, .third, .fourth{
    color: #a1a1a1;
    font-family: "lucidia console", monospace; 
}
.first:hover{
    text-shadow: 1px 1px #fca258;}
.second:hover{
    text-shadow: 1px 1px #a245ff;}
.third:hover{
    text-shadow: 1px 1px #ff6b6e;}
.fourth:hover{
    text-shadow: 1px 1px #60fc82;}


.firstactive{
    text-shadow: 1px 1px #a1a1a1;
    color: #fca258;
    font-family: "lucidia console", monospace; 
    }
.secondactive{
    text-shadow: 1px 1px #a1a1a1;
    color: #a245ff;
    font-family: "lucidia console", monospace; 
    }
.thirdactive{
    text-shadow: 1px 1px #a1a1a1;
    color: #ff6b6e;
    font-family: "lucidia console", monospace; 
    }
.fourthactive{
    text-shadow: 1px 1px #a1a1a1;
    color: #60fc82;
    font-family: "lucidia console", monospace; 
    }


navbaraudio{
    margin: 0px 0px;
    top: 0px;
}

#audio{
    margin: -25px 5px;
    float: right;
    width: 65%;
    zoom:75%;
}









                                                            /*Grid Elements*/
.gridbox {
    display: grid;
    grid-template-columns: auto auto auto;

    padding: 10px;
}
.outerelement {

    padding: 10px;
}


.leftelement{

    padding: 15px;

}
.leftelement img{
    width: 100%;
    float: right;
    background-color: #2e2e2e;
    outline: grey;
    outline-style: solid;
    border: 10px;
}


.rightelement{

    padding: 15px;
}
.rightelement img{
    width: 100%;
    background-color: #2e2e2e;
    outline: grey;
    outline-style: solid;
    border: 10px;
}


                                                    /*BODYBOX*/
.firstbodybox{
    background-color: #2e2e2e;
    opacity: 1;
    padding: 10px;
    margin: 50px auto;
    max-width: 960px;
    min-width:200px;
    outline: grey;
    outline-style: solid;
    border: 10px;
    color: white;
    font-family: "lucidia console", monospace;
	font-size:1vw;
    box-shadow: 0px 18px 18px 8px #fca258;
}
.secondbodybox{
    background-color: #2e2e2e;
    opacity: 1;
    padding: 10px;
    margin: 50px auto;
    max-width: 960px;
    min-width:200px;
    outline: grey;
    outline-style: solid;
    border: 10px;
    color: white;
    font-family: "lucidia console", monospace;
	font-size:1vw;
    box-shadow: 0px 18px 18px 8px #a245ff;
}
.thirdbodybox{
    background-color: #2e2e2e;
    opacity: 1;
    padding: 10px;
    margin: 50px auto;
    max-width: 960px;
    min-width:200px;
    outline: grey;
    outline-style: solid;
    border: 10px;
    color: white;
    font-family: "lucidia console", monospace;
	font-size:1vw;
    box-shadow: 0px 18px 18px 8px #ff6b6e;
}
.fourthbodybox{
    background-color: #2e2e2e;
    opacity: 1;
    padding: 10px;
    margin: 50px auto;
    max-width: 960px;
    min-width:200px;
    outline: grey;
    outline-style: solid;
    border: 10px;
    color: white;
    font-family: "lucidia console", monospace;
	font-size:1vw;
    box-shadow: 0px 18px 18px 8px rgba(0,255,130,0.5);
}
.firstbodybox, .secondbodybox, .thirdbodybox, .fourthbodybox{
    text-align: center;
}

table{
  border:1px dashed grey;
  width: 100%;
}

td,tr{
    border:1px solid grey;
    padding: 20px;
}

th{
    border:1px solid white;
}


.footerbox {
    text-align: center;
    left: 0px;
    margin: 0px 0px;
    float: left;
    width: 100%;
    height: auto;
	bottom: 0px;
    background-color: #2e2e2e;
    display: block;
    color: white;
    font-family: "lucidia console", monospace; 
    outline: grey;
    outline-style: solid;
    border: 10px;
}




                                               /*SMOL SCREEN*/
@media screen and (max-width: 800px){
	
	#firstbackground{
        background-image: url("images/bgfirstthin.jpg");
	}

	#secondbackground{
        background-image: url("images/bgsecondthin.jpg");
	}

	#thirdbackground{
        background-image: url("images/bgthirdthin.jpg");
	}
	
	#fourthbackground{
        background-image: url("images/bgfourththin.jpg");
	}




	.rightelement, .leftelement{
	    width: 50%;
	}
}