styles.css

  /*══════════════════*/
 /* Fonts and colors */
/*══════════════════*/
h1, h2, h3, h4, h5, h6, header {
	font-family: 'Yeseva One', sans-serif;
}
h1 {
	color: orangered;
	font-size: 48px;
	font-weight: bold;
	text-shadow: 0 0 0.2em coral;
	margin: 36px 0 18px;
}
h2 {
	color: orangered;
	font-size: 36px;
	font-weight: bold;
	margin: 30px 0 15px;
}
h3 {
	font-size: 24px;
	font-weight: bold;
	margin: 24px 0 12px;
}
h4 {
	font-size: 20px;
	font-weight: normal;
	margin: 18px 0 9px;
}
p {
	font-size: 20px;
	line-height: 1.25;
}
em {
}
strong {
}
ul {
	margin: 0;
}
li {
}
a {
	color: orangered;
	text-shadow: 0 0 0.15em coral;
	text-decoration-style: double;
	line-height: 1.25;
}
a:visited {
	color: palevioletred;
}
a:hover {
	color: orange;
	text-shadow: 0 0 0.25em gold;
	text-decoration-style: wavy;
}
pre {
	font-family: monospace;
}



  /*════════════════════*/
 /* Primary containers */
/*════════════════════*/
main {
	background-color: ivory;
	background-image: url("images/sandpaper.png");
	background-size: 10em 10em;
	height: 100%;
	display: flex;
	flex-direction: row;
}
header {
	background-color: ivory;
	background-image: url("images/sandpaper.png");
	background-size: 10em 10em;
	font-family: 'Josefin Sans', serif;
	height: auto;
	padding: 0 20px 0 20px;
	border-bottom: 2px solid lightgray;
	transition: border-bottom-color 1s ease;
}
body {
	font-family: 'Josefin Sans', serif;
	background-color: #262626;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cpath fill='%23000000' fill-opacity='1' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E");
	display: flex;
	flex-direction: column;
	box-shadow: 0px 0px 100px 20px;
}
article {
	background-color: ivory;
	background-image: url("images/sandpaper.png");
	background-size: 10em 10em;
	flex: 2;
	overflow-y: auto;
	padding: 30px 20px 0 20px;
}
aside {
	flex: 1;
	background-color: ivory;
	background-image: url("images/sandpaper.png");
	background-size: 10em 10em;
	overflow-y: auto;
	padding: 30px 20px 0 20px;
}
footer {
	border-top: 2px solid #E5E5D8;
	background-color: ivory;
	background-image: url("images/sandpaper.png");
	background-size: 10em 10em;
	height: auto;
	padding: 10px 20px 0 20px;
	border-top: 2px solid lightgray;
	transition: border-top-color 1s ease;
	vertical-align: center;
}

.footer-item {
	display:inline-block;
}


  /*═════════════════════════════════*/
 /* Extra header from holberton.css */
/*═════════════════════════════════*/
header ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
header li {
	display: inline;
	vertical-align: center;
}
header li:first-child {
	margin: 0;
}
header li a {
	margin: 0;
}
.heading-splitter {
	display: flex;
	flex-direction: row;
}
header .right {
	float: right;
	margin: 0 10px 15px;
	padding-top:20px;
	display: block;
}

    /*══════════════════════════════════════════════*/
   /* OBJECTIVE: Overwrite existing holberton.css. */
  /* Here I assume that I cannot disable that css */
 /* You will find that these echo above classes. */
/*══════════════════════════════════════════════*/
aside p {
	border: 1px solid #bbb;
	background: #ddd;
	color: black;
}
header a {
	color: orangered;
	text-shadow: 0 0 0.15em coral;
	text-decoration-style: double;
}
footer a {
	color: orangered;
	text-shadow: 0 0 0.15em coral;
	text-decoration-style: double;
}
header li {
	display: block;
}



/* I've created a nice list of self-declared classes, used for the dropdown lists. */
/* Please note that 
	https://www.w3schools.com/howto/howto_css_dropdown.asp
   was a brilliant source for this. */

/* The container <div> - needed to position the dropdown content */
/* NOTE: the requirements made me use a <ul> instead of a <div>. */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Button ~ NOTE: this is a <li> now due to requiremnts */
.drop-button {
	padding: 20px 10px 0px 10px;
	text-align: center;
	width: auto;
	cursor: default;
}

.head-button {
	padding: 20px 10px 0px 10px;
	text-align: center;
	width: auto;
	cursor: pointer;
}

/* Dropdown Content (Hidden/"none" by Default) ~ NOTE: is a <ul> */
.drop-entity {
	display: none;
	position: absolute;
	text-align: left;
	background-color: ivory;
	background-image: url(images/sandpaper.png);
	width: auto;
	padding: 10px 10px 5px 10px;
	box-shadow: 0px 8px 16px 0px rgba(1, 1, 1, .5);
	z-index: 1;
}

/* Links inside the dropdown */
.drop-entity a {
	display: block;
}

/* Change color of dropdown links on hover */
.drop-entity a:hover {
}

/* Show the dropdown menu on hover */
.dropdown:hover .drop-entity {
	display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .drop-button {
}

  /*═══════════*/
 /*some extras*/
/*═══════════*/
.logo {
	position: relative;
	display: inline-block;
	margin: 15px 15px 0 5px;
}

img.small {
	width: 30px;
}

img.small:hover {
	cursor: pointer;
}
img.big:hover {
	cursor: pointer;
}