/* 
   Name: Natalie Liew Yeur Lee
   Class:DBIT 1A/02
 */

/* body and page container */
*{box-sizing: border-box;}

body{
    padding: 10px;
}

.container{
	width: 1200px;
	min-height: 500px;
	margin: 0 auto;
	border:1px solid black;
	display: table;
	background-color: #fff;
    background-color: rgba(255,255,255,0.1);
}

header{
	width: 100%;
	min-height: 100px;
	text-align:center;
	clear: both;
	padding-top:10px;
	background:seashell;
}

/* nav */

nav{
  height:auto;
  width:100%;
  background:tan;
  margin:0 auto;
  text-align:center; 
}

nav a{
  display:inline-block;
  color:white;
  padding:20px;
  text-decoration:none;
  font-size:20px;
  margin:5px;
  
}

nav a:hover{
  background:pink;
}

.dropdown{
	display: inline-block;
}

.dropdown .dropbtn{
	border:none;
	outline:none;
	padding:14px 16px;
	background-color:inherit;
	text-align:center;
	font-family:inherit;
}

nav.a:hover, .dropdown:hover .dropbtn{
	background-color:wheat;
	color:black;
}

.dropdown-content{
	display:none;
	position:absolute;
	background-color:#f9f9f9;
	min-width:160px;
	z-index:1;
}

.dropdown-content a{
	float:none;
	color:black;
	padding:12px 16px;
	text-decoration:none;
	display:block;
	text-align:left;
}

.dropdown-content a:hover{
	background-color: #ddd;
}

.dropdown:hover .dropdown-content{
	display:block;

}

/* Search button */

form {
    width:300px;
	margin:10px auto;
}
.search {
	padding:8px 15px;
	background:rgba(50, 50, 50, 0.2);
	border:0px solid #dbdbdb;
}
.button {
	position:relative;
	padding:6px 15px;
	left:-8px;
	border:2px solid #207cca;
	background-color:#207cca;
	color:#fafafa;
}

.search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.search-container button:hover {
  background: #ccc;
}

/* h1 and footer */

h1{
    text-align:center;
	background:plum;
	margin-left:100px;
    margin-right:100px;
	font-family: 'Playfair Display', serif:regular;
	font-weight: normal;
}

footer{
	width: 100%;
	clear:both;
	padding: 30px;
}

@media screen and (max-width: 600px) {
    nav a{
	display:block;
	}
	nav a:hover{
	 background:red;
	}
}
	nav{
	 width:100%;
	}
	img{
	width:50%;
	height:50%;
	}
	body{
	 background-image:url("bg.jpg");
	 background-size:100%;
	 background-repeat:no-repeat;
	 background-attachment:fixed;
	}

}

/* index */
section{
	width: 100%;
    clear: both;
	display: table;
}

article.one{
    width: 690px;
    height: 595px;
    background:mistyrose;
    float: left;
    padding:10px;
    margin-top:5px;
    margin-bottom:5px;
	margin-left:30px;
	font-family: 'Raleway', sans-serif;
}

article.two{
    width: 690px;
    height: 595px;
    background:mistyrose;
    float: left;
    padding:10px;
    margin-top:5px;
    margin-bottom:5px;
	margin-right:30px;
	font-family: 'Raleway', sans-serif;
}

aside{
    width:400px;
    height:1200px;
	background:paleturquoise;
	float: right;
	padding:10px;
	margin-top:5px;
	margin-bottom:5px;
	margin-right:30px;
	font-family: 'Raleway', sans-serif;
	font-size:25px;
}
	
img.d{
    width:335px;
    height:287.5px;	
}

/* who am i */

article.b1{
    width:1000px;
	height:600px;
	background:white;
	margin-left:150px;
	margin-right:150px;
	font-family: 'Raleway', sans-serif;
}

/* ask me anything */

article{
    width: 800px;
    height: 300px;
    background:mistyrose;
    float: left;
    padding:10px;
    margin-top:5px;
    margin-bottom:5px;
	margin-left:30px;
	font-family: 'Raleway', sans-serif;
}

aside.c3{
    width:300px;
    height:610px;
	background:paleturquoise;
	float: right;
	padding:10px;
	margin-top: 5px;
	margin-bottom:5px;
	margin-right:30px;
	font-family: 'Raleway', sans-serif;
}

input[type=text], select, textarea {
    width: 90%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #FFB6C1;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #FFC0CB;
}

.box {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 6px;
}
	
/* genres */

/* genres */

img.f{
	Width:250px;
	Height:250px;
	margin-left:160px;
	margin-top:30px;
}

img.g{
	Width:250px;
	Height:250px;
	margin-left:50px;
}

img.b{
	Width:250px;
	Height:250px;
	margin-left:50px;
}

img.n{
	Width:250px;
	Height:250px;
	margin-left:160px;
	margin-top:30px;
	margin-bottom:30px;
}

img.p{
	Width:250px;
	Height:250px;
	margin-left:50px;
	margin-top:30px;
	margin-bottom:30px;
}

img.k{
	Width:250px;
	Height:250px;
	margin-left:50px;
	margin-top:30px;
	margin-bottom:30px;
}
	
/*archive*/
.a1.soon p{
  font-size:200px;
  text-align:center;
}