@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Limelight&display=swap');
/* =============================================
Author: Kale Perry
Date Started: 02 September, 2021
Last Updated: 06 January, 2022
Filename: KLP_Styles.css
   =============================================
*/

/* HTML */
html {
   background-image: url("background.jpg");
   background-color:white;
   background-attachment:fixed;
}
img,object,embed,video{
	max-width:100%;
}

/* SPECIAL FORMATTING FOR A BLINKING IMAGE TO DRAW ATTENTION */
a#report img{
	float:left;
}
/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
.blink-image {
    -moz-animation: blink normal 1.5s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 1.5s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 1.5s infinite ease-in-out; /* IE */
    animation: blink normal 1.5s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
/*END BLINKING IMG*/

a {
	color:hsl(240,80%,35%);
	text-decoration:none;
}
a:hover{
	color:hsl(240,100%,50%);
	text-decoration:underline;
}
a:visited{
	color: hsl(275, 100%, 26%);
	text-decoration:none;
}
body {
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	max-width:75%;
	clear:none;
	float:none;
	min-height:100%;
	margin:0px;
	background-color:rgb(230,230,230);
	-moz-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
	-webkit-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
	box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
}
body header img {
	float: none;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border:0px;
}
body header nav{
	width:100%;
	float:none;
	margin:0px;
	display: table;
	border:0px;
	padding: 0px;
}
body h1 {
	margin: 1%;
	font-family:Comfortaa, 'Trebuchet MS',sans-serif;
	font-size: 1.5em;
	
}
article {
	width: 100%;
	float: left;
	font-size: 1.5em;
	text-align: justify;
	background-color:rgb(230,230,230);
}
body article h1 {
	margin: 1%;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-size: 1.5em;
	padding:0;
	text-shadow: rgb(91,91,91) 2px 4px 5px;
}
body p, body address {
	margin: 3.5% 1%;
	font-size: 1em;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-style: normal;
	height: 100%;
}
body p, body address {
	margin: 3.5% 1%;
	font-size: 1em;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-style: normal;
	height: 100%;
}
footer {
	text-align: center;
	font-size: 1.5em;
	margin-top: 0%;
	border-top: 4px solid black;
	font-family:  Comfortaa, 'Trebuchet MS',sans-serif;
	clear: both;
	padding-bottom: 30px;
}
footer span{
	float:right;
	margin-right: 3%;
}
article p, article address {
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
}


/* Rainbow Horizontal Nav Bar */
body header nav ul{
	width:100%;
	margin:0px;
	padding:0px;
	display: table-row;
	border:0px;
}
body header nav ul li {
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-size: 1em;
	display: table-cell;
	border:0px;
	padding: 0px;
	margin:0px;
}
body header nav ul li a {
	text-decoration: none;
	text-align:center;
	display: block;
	margin:0px;
	padding:0px;
	border: 0 px;
	width:100%;
}
nav ul li a[href="index.html"]:link{
	background-color:hsl(0, 100%, 40%);
	color: hsl(0, 100%, 0%);	
}
nav ul li a[href="index.html"]:hover {
	background-color:rgb(230,230,230);
	color: hsl(0, 100%, 40%);
}
nav ul li a[href="index.html"]:visited {
	color: rgb(150,150,150);
}
nav ul li a[href="Edu.html"]:link{
	background-color:hsl(27, 100%, 50%);
	color: hsl(0, 100%, 0%);
}
nav ul li a[href="Edu.html"]:hover {
	background-color:rgb(230,230,230);
	color: hsl(27, 100%, 50%);
}
nav ul li a[href="Edu.html"]:visited {
	color: rgb(150,150,150);
}
nav ul li a[href="Learning.html"]:link{
	background-color:hsl(60, 100%, 45%);
	color: hsl(0, 100%, 0%);
}
nav ul li a[href="Learning.html"]:hover {
	background-color:rgb(230,230,230);
	color: hsl(60, 100%, 45%);
}
nav ul li a[href="Learning.html"]:visited {
	color: rgb(150,150,150);
}
nav ul li a[href="Awards.html"]:link{
	background-color:hsl(120, 100%, 30%);
	color: hsl(0, 100%, 0%);
}
nav ul li a[href="Awards.html"]:hover {
	background-color:rgb(230,230,230);
	color: hsl(120, 100%, 30%);
}
nav ul li a[href="Awards.html"]:visited {
	color: rgb(150,150,150);
}
nav ul li a[href="Work.html"]:link {
	background-color: hsl(180, 90%, 35%);
	color: hsl(0, 100%, 0%);
}
nav ul li a[href="Work.html"]:hover {
	background-color:rgb(230,230,230);
	color: hsl(180, 90%, 35%);
}
nav ul li a[href="Work.html"]:visited {
	color: rgb(150,150,150);
}
nav ul li a[href="Vol.html"]:link{
	background-color:hsl(240, 40%, 50%);
	color: hsl(0, 100%, 0%);
}
nav ul li a[href="Vol.html"]:hover {
	background-color:rgb(230,230,230);
	color: hsl(240, 40%, 50%);
}
nav ul li a[href="Vol.html"]:visited {
	color: rgb(150,150,150);
}
nav ul li a[href="Social.html"]:link{
	background-color:hsl(270, 60%, 45%);
	color: hsl(0, 100%, 0%);
}

nav ul li a[href="Social.html"]:hover {
	background-color:rgb(230,230,230);
	color: hsl(270, 60%, 45%);
}
nav ul li a[href="Social.html"]:visited {
	color: rgb(150,150,150);
}

/* Special for the calculator*/
h1#calc{
	font-size:1.9em;
	text-decoration:underline;
	margin:2px 0px 5px 10px;
}
p#calc{
	font-style: italic;
	margin:0px 0px 0px 10px;
}
form p{
	margin:0px 0px 10px 3px;
}


/*Special for the Search Function */
body header table{
	float:right;
	margin-right: 4%;
}
/* Project List */
ol li{
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-size:1.3em;
}

/* Description Lists*/
dl {
	margin-left: 2%;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	
}
dt {
	display: block;
	margin: 0;
	text-indent: 0;
	font-weight: bold;
	border-bottom: 1px solid rgba(168, 168, 168,1.00);
}
dt h6 {
	font-size:1.1em;
	font-weight:normal;
	margin-bottom:-1em;
	margin-top:-.3em;
}
dt h7 {
	font-size:1.1em;
	font-style:oblique;
	font-weight:bold;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	margin-top:0;
}

dd {
	display: block;
	margin: 0 0 0 3%;
	text-indent: 0;
}
dd img{
	width: 100%;
	height: auto;
}
article dl dd img{
	float: none;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border:0px;
}

li#projects{
    text-decoration:none;
}

/*Special for the Courses page*/
section#subject{
	display: grid;
	grid-template-columns: 1fr 4fr 1fr 1fr;
	grid-template-rows: auto;
	margin-left: 6%;
	margin-right: 4%;
	margin-bottom:5px;
	grid-gap:4px;	
	overflow: auto;
}
section#subject h2{
	grid-area: 1/1/2/-1;
	text-indent: 0;
	font-weight: bold;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-size: 1.5em;
	font-style: italic;
	text-decoration:underline;
	margin-top: 0;
	margin-bottom:0;
	padding-bottom:2px;
}
section#subject h3{
	text-indent: 0;
	font-weight: bold;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-size: 1.1em;
	padding:0;
	margin:2px;	
}
div#courseNum{
	grid-column:1;
	grid-row:2/-1;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-size: 1em;
	margin-top: 5px;
	margin-bottom:5px;
	align-items: start;
}
div#descript{
	grid-column:2;
	grid-row:2/-1;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-size: 1em;
	margin-top: 5px;
	margin-bottom:5px;
	align-items: start;
}
div#school{
	grid-column:3;
	grid-row:2/-1;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-size: 1em;
	margin-top: 5px;
	margin-bottom:5px;
	align-items: start;
}
div#grade{
	grid-column:4;
	grid-row:2/-1;
	font-family: Comfortaa, 'Trebuchet MS',sans-serif;
	font-size: 1em;
	margin-top: 5px;
	margin-bottom:5px;
	align-items: start;
}


/* =============================================
	Tablet layout styles used by devices
	481px to 768px and cascaded to larger 
	devices.
   =============================================
*/


@media only screen and (min-width: 481px) {
html, body {
	font-size: 16px;
}

body {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	clear: none;
	float: none;
	-moz-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
	-webkit-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
	box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
}

header h1 {
   font-size: 2.2em;
}

body article h1 {
   font-size: 1.75em;
}

article {
	width: 94%;
	float: none;
	margin: 0px auto;
}

dl {
	width: 90%;
    margin: 0 auto;
	text-align: left;
}
article img {
	float: right;
	width: 40%;
	margin: 0% 2% 2% 2%;
}
nav ul li {
	display: table-cell;
	width: 15%;
	text-align: center;
	margin-right: 2%;
	border: thin solid rgba(127,96,17,1.00);
	border-collapse: collapse;
}
nav ul li a {
	margin-bottom: 0;
}
nav {
	display: table;
	width: 96%;
	margin: 0 auto;
	float: none;
}
nav ul {
	display: table-row;
	margin: 0;
}
nav ul li:last-of-type {
	margin-right: 0%;
}
footer {
	font-size: 1.5em;
}

/* =============================================
	Desktop layout styles used by  devices
	769px and larger.
   =============================================
*/

@media only screen and (min-width: 769px) {
html, body {
	font-size: 18px;
}

html {
   background-image: url("background.jpg");
   background-color: white;
}
   
   
body {
	font-family: "Garamond", serif;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	clear: none;
	float: none;

	background-color:rgb(230,230,230);
	-moz-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
	-webkit-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
	box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
}