/*
	- Alan Colquhoun
	- A00390667
*/	

/*
	I researched online for a CSS3 feature not described in the list. It is a mask, as defined in lines 376-381. On the hompage, it is at the bottom. I have learnt that clips the ring image that is on line 362. This feature, however, is not widely supported yet. As described at MDN Web Docs, it is mainly supported in webkit browsers, and as defined on line 379, would require a vendor prefix (-webkit).
	
	https://developer.mozilla.org/en-US/docs/Web/CSS/mask#Browser_compatibility
*/	

/* Reset the CSS Box Model */	
@import "reset.css";
/* CSS Restoration */
@import "restore.css";
/* Tolkien Border */
@import "tolkien.css";

/* Menu Font */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

body {
	background-image: linear-gradient(black, gray);
}
	
#top {
	margin-top: 35px;
}
	
/*
	Background Color, Border & Text Color
*/

.bgcolor {
	background-color: black;
}

/* Outer Container >> Box Sizing */

.container {
	box-sizing: border-box;
	font-size: 18px;
}	
.full-width-section {
	text-align: center;
	border: 4px solid #ecf0f1;
	color: #ecf0f1;
}	

/* Menu */

@media screen and (min-width: 701px) { 
	#myTopnav { 
		width: 100%;
		display: flex;
		justify-content: center;
	}	
}

.topnav {
	min-height: 81px;
	background-color: #000;
	overflow: hidden
}
.topnav a {
	float: left;
	display: inline-block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 25px;
	text-decoration: none;
	font-size: 17px;
}
.topnav a:not(:active) {
	margin-top: 15px
}	
.active {
	margin: 15px;
	background-color: blue;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px
}
.topnav .icon {
	display: none
}

/* Dropdown container - needed to position the dropdown content */

.dropdown {
	float: left;
	margin-top: 15px;
	overflow: hidden
}
.dropdown .dropbtn {
	font-size: 17px; 
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}
.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
	background-color: #555;
	height: 50px;
	color: white;
}
.topnav a:active {
	margin-top: 15px;
}	
.dropdown-content a:hover {
	background-color: #ddd;
	color: black;
}
.dropdown:hover .dropdown-content {
	display: block;
}

/* When the screen is less than 700 pixels wide, hide all links, 
except for the first one ("Home"). Show the link that contains 
should open and close the topnav (.icon) */

@media screen and (max-width: 700px) {
	.topnav a/*:not(:first-child)*/, .dropdown .dropbtn  {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
	}
}

/* 
	The "responsive" class is added to the topnav with JavaScript when the 
	user clicks on the icon. This class makes the topnav look good on small screens
	(display the links vertically instead of horizontally) 
*/

@media screen and (max-width: 600px) {
	.topnav.responsive { position: relative; }
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.topnav.responsive .dropdown { float: none; }
	.topnav.responsive .dropdown-content { position: relative; }
	.topnav.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
	}
}
	
header { margin-bottom: 10px; }	
h1 { text-shadow: 2px 2px #ff0000; }
#menu { margin-bottom: 10px; }

/* Flex Definitions */

.dw-pnl {
  margin: 0;
  padding: 5px;
}
	
@media (min-width: 768px) {
  .dw-pnl {
    -webkit-column-break-inside: avoid;
            break-inside: avoid;
  }
}
.dw-clstr {
  display: flex;
  padding: 0;
}
.dw-clstr--hrz {
  flex-direction: column;
}
.dw-clstr__sgmnt {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
.dw-clstr__sgmnt {
  display: flex;
  flex: 1 1 auto;
}
.dw-clstr__sgmnt--rw {
  display: flex;
}
@media (max-width: 650px) {
  .dw-clstr__sgmnt--rw {
    flex-direction: column;
  }
}

main{
	flex: 1;
	text-align: center;
	border: 4px solid #ecf0f1;
	color: #ecf0f1;
	background-color: black;
	margin-top: 10px;
	padding: 10px 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	width: 99.5%;
	min-height: 40vh;
}
#rb {
	min-height: 1500px;
}
	
.content_area {
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  width: 100%;
}

/* Main Content */

.box {
	text-align: left;
}
.box img {
	width: 100%;
	height: auto
}
.row {
	clear: both;
}	

#onering {
	padding: 5px 10px 0 10px;
	text-align: left;
}
	
#gollum, #bilbo, #frodo, #samwise {
	margin-top: 2%;
	margin-right: 2%;
	margin-left: 2%;
	float: left	
}
#gollum-txt, #bilbo-txt, #frodo-txt, #samwise-txt {
	border: 3px solid gray;
	padding: 15px;
	box-shadow: 4px 5px silver;
 	float: right;
	margin: 3%;
}	
	
@media screen and (min-width: 620px) {
	#gollum, #bilbo, #frodo, #samwise {
		width: 96%;
	}	
	#gollum-txt, #bilbo-txt, #frodo-txt, #samwise-txt {
		float: left;
		width: 96%;
		padding-right: 10px
	}	
}
@media screen and (min-width: 840px) {
	#gollum, #bilbo, #frodo, #samwise {
		width: 41%;
	}	
	#gollum-txt, #bilbo-txt, #frodo-txt, #samwise-txt {
		width: 41%;
	}	
}
@media screen and (min-width: 1060px) {
	#gollum, #bilbo, #frodo, #samwise {
		width: 42%;
	}	
	#gollum-txt, #bilbo-txt, #frodo-txt, #samwise-txt {
		width: 42%;
	}	
}
@media screen and (min-width: 1280px) {
	#gollum, #bilbo, #frodo, #samwise {
		width: 45%;
	}	
	#gollum-txt, #bilbo-txt, #frodo-txt, #samwise-txt {
		width: 45%;
	}	
}

.bodytext {
	padding: 25px;
	text-align: left
}
	
footer {
	text-align: center;
	border: 4px solid #ecf0f1;
	color: #ecf0f1;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 5px 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	width: 99.5%
}	

/* Ring Animation */

#ringarea {
	border: 4px solid #ecf0f1;
	color: #ecf0f1;
	background-color: black;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 15px 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	width: 99.5%;
	height: 170px
}	
div #ringanim {
	margin-top: 10px;
	width: 100px;
	height: 100px;
	position: relative;
	-webkit-animation: ringmove 15s infinite; /* Safari 4.0 - 8.0 */
	animation: ringmove 15s infinite;
	background-color: red;
	background-image: url("../images/ring.jpg");
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes ringmove {
	from {left: 0px;}
	to {left: 92%;}
}

@keyframes ringmove {
	from {left: 0px;}
	to {left: 92%;}
}

.masked {
	width: 100px;
	height: 100px;
	-webkit-mask-image: url(../images/star.svg);
	mask-image: url(../images/star.svg);
}