@charset "utf-8";
/* Toy Store - CSS Document */

* {
	font-family: "Deja Vu Sans", Verdana, "sans-serif";
	font-size: 16px;
	color: #000;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-image: url("../images/background.jpg");
}

#wrapper {
	max-width: 80%;
	background-color: green;
	margin: 0 auto;
	padding: 1%;
	overflow: auto;
}

header {
	background-image: url("../images/banner.jpg");
	height: 220px;
	border-radius: 1em;
}

h1, 
h2 {
	font-style: italic;
	font-weight: bold;
	color: black;
}

h1 {
	font-size: 1.7em;
	padding-right: 29.7%;
	float: right;
}

h2 {
	font-size: 1.5em;
	text-align: center;
	text-shadow: 3px 3px 3px #CCCCCC;
}

#logo {
	min-height: 175px;
	width: 22%;
	float: left;
	margin: 1.5% 0 0 2%;
	background-color: #cc66ff;
	border-radius: 1em;
}

#banner {
	height: 220px;
	width: 97.4%;
	position: absolute;
}

nav {
	height: 58px;
	background-image: linear-gradient(190deg, #00cccc, #00b3b3, #00e6e6, #33ffff, #00e6e6, #00b3b3, #00cccc);
	text-align: center;
	color: black;	
	margin: 1% 0;
	border-radius: 1em;
}

nav ul {
	width: 100%;
	line-height: 60px;
}

nav ul li {
	display: block;
	width: 20%;
	list-style: none;
	font-weight: bold;
	padding: 0 3.4%;
	float: left;
}

nav ul li a {
	text-decoration: none;
	padding: 10% 20%;
}

nav ul li a:hover {
	color: white;
	background-color: #009999;
	text-shadow: 3px 3px 3px #000000;
}

main {
	background-image: radial-gradient(circle, red, yellow, #1fc71f);
	min-height: 710px;
	margin: 1% 0;
	border-radius: 1em;
}

#left-column,
#right-column {
	height: 657px;
	float: left;
	border-radius: 1em;	
}

#left-column {
	width: 22%;
	margin: 2% 1% 1% 2%;
	background-image: linear-gradient(190deg, #00cccc, #00b3b3, #00e6e6, #33ffff, #00e6e6, #00b3b3, #00cccc);
  overflow-y: auto;
}

h3 {
	text-align: justify;
	text-justify: inter-word;
	font: 1.05em normal;
	margin: 2%; 
}

#right-column {
	width: 72%;
	margin: 2% 2% 1% 1%;
	background-image: linear-gradient(to right, #ff0000, #cc0066, #ffa500, #ff66cc, #ffff99, #ff0000);
	overflow-y: scroll;
}

#left-column::-webkit-scrollbar,
#right-column::-webkit-scrollbar {
	position: absolute;
}

#left-column::-webkit-scrollbar-thumb,
#right-column::-webkit-scrollbar-thumb {
	background-color: green; 
	border-radius: 1em;
}

#left-column::-webkit-scrollbar-thumb:hover,
#right-column::-webkit-scrollbar-thumb:hover {
	background-color: #00e6e6;
}

#left-column::-webkit-scrollbar-button,
#right-column::-webkit-scrollbar-button {
	background-color: #00e6e6;	
	border-radius: 50%;
}

#left-column::-webkit-scrollbar-button:hover,
#right-column::-webkit-scrollbar-button:hover {
	background-color: green; 
}

.toy {
	margin: 2% 0 2% 4.75%;
	border-radius: 1em;
	float: left;
}

footer {
	min-height: 230px;
	color: black;
	background-image: radial-gradient(circle, red, yellow, #1fc71f);
	border-radius: 1em;
}

#left-footer,
#right-footer {
	height: 180px;
	float: left;	
	border-radius: 1em;
	font-weight: bold;
	background-image: linear-gradient(190deg, #00cccc, #00b3b3, #00e6e6, #33ffff, #00e6e6, #00b3b3, #00cccc);
}

#left-footer {
	width: 22%;
	margin: 1.5% 1% 0 2%;
}

#left-footer ul li {
	margin-left: 10%;
	list-style-type: circle;
	font-weight: bold;
}

#left-footer ul li a {
	text-decoration: none;
}

#left-footer ul li a:hover {
	color: white;
	text-shadow: 3px 3px 3px #000000;

}

#valid {
	position: absolute;
	width: 6%;
	height: 3%;
	float: left;
	margin: 0.75% 2% 0 2%;
}

#right-footer {
	width: 72%;
	margin: 1.5% 2% 0 1%;
}

pre {
	position: absolute;
	font-weight: normal;
	font-size: 0.85em;
	color: black;
}

#info {
	padding-top: 1.5%;
}

#course {
	padding: 1.5% 0 0 20%;
}

h4 {
	float: right;
	font-size: 0.7em; 
	font-weight: normal;
	padding: 13% 2% 0 0; 
}