@charset "UTF-8";
/* CSS Document */

body {
	background-image:url('assets/whirlpool.png');
    padding: 0;
}

#container {
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 200px;
}

 p { 
	 font-family:"Adobe Garamond Pro", serif; 
	 font-style: normal; 
	 font-weight: normal; 
	 text-decoration: none; 
	 font-size: 1.2em; 
	 margin:0pt;
	 padding-top: 1.2em;
}

a {
	color: inherit;
	text-decoration: none;
}

a:visited {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
    height: auto;
	user-drag: none; 
	webkit-user-select: none;
    moz-user-select: none;
    ms-user-select: none;
    user-select: none;
}


 .s1 { 
	 color: black; 
	 font-family: 'IM Fell English SC', serif;
	 font-style: normal; 
	 font-weight: normal; 
	 text-decoration: none; 
}

@media screen and (min-width: 601px) {
	.s1 {
    	font-size: 3em;
  	}
	.s2 {
		font-size: .5em;
	}
	.s3 {
		font-size: .4em;
	}
}
	
@media screen and (max-width: 600px) {
	.s1 {
    	font-size: 25px;
 	}
	.s2 {
		font-size: 10pt;
	}
	.s3 {
		font-size: 10pt;
	}
}

 .s2 { 
	 color: black; 
	 font-family:"Adobe Garamond Pro", serif; 
	 font-style: normal; 
	 font-weight: normal; 
	 text-decoration: none; 
}

 .s3 { 
	 color: black; 
	 font-family:"Adobe Garamond Pro", serif; 
	 font-style: normal; 
	 font-weight: normal; 
	 text-decoration: none; 
}

 .s4 { 
	 color: black; 
	font-family: 'IM Fell English SC', serif;
	 font-style: normal; 
	 font-weight: normal; 
	 text-decoration: none; 
	 font-size: 2.4em;
	 padding-top: 20pt;
}

 .s5 { 
	 color: black; 
	 font-family:"Adobe Garamond Pro", serif; 
	 font-style: italic; 
	 font-weight: normal; 
	 text-decoration: none; 
	 font-size: 1.2em; 
}

 .s7 { 
	 color: black; 
	 font-family: 'IM Fell English SC', serif;
	 font-style: normal; 
	 font-weight: normal; 
	 text-decoration: none; 
	 font-size: 1.6em; 
}

.verse {
	padding-top: 0.7em;
}

#top {
	position: relative;
	text-align: center;
}

#over {
	position: fixed;
	width: 80%;
	z-index: 2;
	opacity: 0.1;
    left: 50%;
    transform: translate(-50%, 0%);
	text-align: center;
}

#under {
	position: relative;
	width: 100%;
	transform: translate(0%, 0%);
	z-index: 1;
}

#toptext {
	color: #000000;
	position: absolute;
	z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#maincontent {
	position: relative;
	z-index: 4;
}

#smalllogo {
	text-align: center;
	position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	max-width: 100px;
	user-drag: none; 
	webkit-user-select: none;
    moz-user-select: none;
    ms-user-select: none;
    user-select: none;
}

.modal{
	z-index:10;
	display:none;
	position:fixed;
	left:0;
	top:10%;
	width:100%;
	height:100%;
	max-height: 80%;
	overflow:scroll;
	color: #FFFFFF;
}

.modal-content{
	margin:auto;
	background-color:#000000;
	position:relative;
	padding:0;
	outline:0;
	width:600px;
	
}

.container2{
	padding-left:30px;
	padding-right: 30px;
	padding-bottom: 30px;
}

.closebutton {
	text-align: right;
	cursor: pointer;
	z-index: 20;
}

@media (max-width:600px){.modal-content{margin:0 10px;width:auto!important}.modal{padding-top:0px}
@media (max-width:768px){.modal-content{width:500px}.modal{padding-top:0px}}
@media (min-width:993px){.modal-content{width:900px}}
}