@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;
	 text-align: center;
}

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

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;
}

@keyframes fadingIn {
  0%   { opacity:0.7; }
  100% { opacity:0; }
}

@keyframes fadingOut {
  0%   { opacity:0; }
  100% { opacity:0.7; }
}

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

@media screen and (min-width: 601px) {
	.s1 {
    	font-size: 2.5em;
  	}
	img {
		max-height: 60%;
		max-width: 60%;
	}
}
	
@media screen and (max-width: 600px) {
	.s1 {
    	font-size: 2em;
 	}
}

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

#under {
	position: relative;
	width: 100%;
	transform: translate(0%, 0%);
	z-index: 1;
	animation: fadingIn 3s infinite alternate;
}

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

.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:10px;
	outline:0;
	width:600px;
	
}

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

.closebutton {
	text-align: right;
}

.link { 
	color: #FFFFFF;
	font-family: 'IM Fell English SC', serif;
	font-style: normal; 
	font-weight: normal; 
	text-decoration: none; 
	font-size: 1.5em;
	padding: 10pt;
	border: #FFFFFF;
	border-style: solid;
}

@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}}
}