@import url('https://fonts.googleapis.com/css2?family=Mitr&family=Reggae+One&family=Slackey&family=Timmana&display=swap');

* {
    box-sizing: border-box;
}
.container{
    max-width: 80%;
    background-color: #add3c8;
    margin: 0 auto;
    background-size: 50%;
    border-radius: 30px;
}
#back{
    background: url(back11.jpg) no-repeat center center fixed;
}
#head{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4f7369;
    background-image: url(shead.png);
    background-size: 13%, cover;
    background-position: center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 30px 30px 0px 0px;
}
#top{
    overflow: hidden;
    max-width: 8%;
    animation: rotation 6s infinite linear;
    margin-right: 3%;
    padding: 1%;
}
#top2{
    max-width: 8%;
    margin-left: 3%;
    animation: rotation 6s infinite linear;
    padding: 1%;
}
@keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }
h1{
    font-size: 3em;
    font-family: 'Reggae One', cursive;
    color: #ebf2f1;
    text-shadow: #a7f2e4 6px 0 15px;
}
nav{
    background-color: #7EBFB3;
    padding: 18px;
}
ul{
    margin:0;
    padding:0;
    display:flex;
    justify-items: center;
}
  
ul li{
    list-style: none;
    margin:0 20px;
    transition:0.5s;
}
  
ul li a{
    display: block;
    position:relative;
    text-decoration:none;
    padding:4px;
    font-size:22px;
    font-family: 'Timmana', sans-serif;
    color:#fff;
    text-transform:uppercase;
    transition:0.5s;
}
  
ul:hover li a{
    transform:scale(1.25);
    opacity:0.2;
    filter:blur(.75px);
}
  
ul li a:hover{
    transform:scale(1.5);
    opacity:1;
    filter:blur(0);
    text-decoration:none;
    color:#EBF2F1;
}
  
ul li a:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:75%;
    background:#194759;
    transition:0.5s;
    transform-origin:right;
    transform:scaleX(0);
    z-index:-1;
    border-radius: 18px;
}
  
ul li a:hover:before{
    transition:transform 0.5s;
    transform-origin:left;
    transform:scaleX(1);
}
.wel{
    margin-left: 2%;
    font-family: 'Slackey', cursive;
    font-size: 200%;
    color: #194759;
    text-decoration: underline;
}
#front{
    max-width: 50%;
    margin-right: 20%;
    margin-left: 10%;
    border-radius: 30px;
    border: 3px solid #194759;
    display: inline-flex;
}
#pp{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    color: #EBF2F1;
    margin-right: 20%;
    margin-left: 2%;
    padding: 1%;
    display: block;
    border-radius: 18px;
    border: 3px solid #EBF2F1;
}
#front2{
    max-width: 50%;
    border-radius: 30px;
    border: 3px solid #194759;
    float: right;
    margin-right: 2%;
    clear: left;
    display: block;
    margin-bottom: 1%;
}
#pp2{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    border-radius: 18px;
    padding: 1%;
    color: #EBF2F1;
    margin-right: 60%;
    margin-left: 2%;
    display: block;
    border: 3px solid #EBF2F1;
}
#pp3{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    border-radius: 18px;
    padding: 2%;
    color: #EBF2F1;
    display: block;
    border: 3px solid #EBF2F1;
    margin-right: 49%;
    margin-left: 1%;
    
}
#pp4{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    border-radius: 18px;
    padding: 2%;
    color: #EBF2F1;
    display: block;
    border: 3px solid #EBF2F1;
    margin-right: 1%;
    margin-left: 49%;
    
}

#pp5{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    border-radius: 18px;
    padding: 2%;
    color: #EBF2F1;
    display: block;
    border: 3px solid #EBF2F1;
    margin-right: 49%;
    margin-left: 1%;
    
}
#pp6{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    border-radius: 18px;
    padding: 2%;
    color: #EBF2F1;
    display: block;
    border: 3px solid #EBF2F1;
    margin-right: 1%;
    margin-left: 49%;
    
}
#pp7{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    border-radius: 18px;
    padding: 3%;
    color: #EBF2F1;
    display: block;
    border: 3px solid #EBF2F1;
    margin-right: 20%;
    margin-left: 20%;
    
}
.welcome{
    margin-left: 2%;
    font-family: 'Slackey', cursive;
    text-align: center;
    font-size: 250%;
    color: #194759;
    text-decoration: underline;
}
#gw:hover{
    transform: scale(1.5);
}
#gw{
    max-width: 45%;
    float: left;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
    margin-right: 2%;
    margin-bottom: 1%;
    transition: 2s;
}
#hammer:hover{
    transform: scale(1.5);
}
#hammer{
    max-width: 30%;
    float:left;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
    margin-right: 2%;
    margin-bottom: 1%;
    transition: 2s;
}
#mako:hover{
    transform: scale(1.5);
}
#mako{
    max-width: 30%;
    float: right;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
    margin-left: 2%;
    margin-bottom: 5%;
    transition: 2s;
}
#bull:hover{
    transform: scale(1.5);
}
#bull{
    max-width: 40%;
    float: left;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
    margin-right: 2%;
    margin-bottom: 1%;
    transition: 2s;
}
#bask:hover{
    transform: scale(1.5);
}
#bask{
    max-width: 30%;
    float: left;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
    margin-right: 2%;
    transition: 2s;
}
#info1{
    margin-left: 27%;
    max-width: 50%;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
}
#tower{
    max-width: 50%;
    float: right;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
    margin-right: 3%;
    margin-bottom: 1%;
}
#pp8{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    color: #EBF2F1;
    margin-right: 20%;
    margin-left: 20%;
    padding: 1%;
    display: block;
    border-radius: 18px;
    border: 3px solid #EBF2F1;
}
#pp9{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    color: #EBF2F1;
    margin-right: 55%;
    margin-left: 2%;
    padding: 1%;
    display: block;
    border-radius: 18px;
    border: 3px solid #EBF2F1;
}
#pp10{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    color: #EBF2F1;
    margin-right: 15%;
    margin-left: 50%;
    padding: 1%;
    display: block;
    clear: right;
    border-radius: 18px;
    border: 3px solid #EBF2F1;
}
.pp11{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    color: #EBF2F1;
    margin-right: 20%;
    margin-left: 20%;
    padding: 1%;
    display: block;
    border-radius: 18px;
    border: 3px solid #EBF2F1;
}
.pp12{
    font-family: 'Mitr', sans-serif;
    background-color: #194759;
    color: #EBF2F1;
    margin-right: 17%;
    margin-left: 17%;
    padding: 1%;
    display: block;
    border-radius: 18px;
    border: 3px solid #EBF2F1;
}
#ever{
    max-width: 40%;
    float: left;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
    margin-left:2%;
    margin-top: 13%;
}
#goal{
    max-width: 25%;
    display: inline-block;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
    margin-left:10%;
}
#goal2{
    max-width: 25%;
    display: inline-block;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
    margin-left:2%;
}
#goal3{
    max-width: 25%;
    display: inline-block;
    border-radius: 30px;
    border: 3px solid #EBF2F1;
    margin-left:2%;
}
.donate1 {
	max-width:400px;
	width:100%;
	margin:0 auto;
	position:relative;
    border-radius: 30%;
}
#donate2 input[type="text"], #donate2 input[type="email"], #donate2 input[type="tel"], #donate2 input[type="url"], #donate2 textarea {
	width:100%;
	border:1px solid #CCC;
	background: #EBF2F1;
	margin:0 0 5px;
	padding:10px;
}

#donate2 input[type="text"]:hover, #donate2 input[type="email"]:hover, #donate2 input[type="tel"]:hover, #donate2 input[type="url"]:hover, #donate2 textarea:hover {
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}
#donate2 input[type="text"], #donate2 input[type="email"], #donate2 input[type="tel"], #donate2 input[type="url"], #donate2 textarea, #donate2 button[type="submit"] { 
    font:400 15px/18px 'Mitr', sans-serif;
}
#donate2 {
	background: #a7f2e4;
	padding:25px;
	margin:50px 0;
    border-radius: 30px;
}

#donate2 h3 {
	color: #264143;
	display: block;
	font-size: 32px;
	font-weight: 400;
    font-family: 'Mitr', sans-serif;
    font-weight: bolder;
}

fieldset {
	border: medium none !important;
	margin: 0 0 10px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}
#donate2 button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background: #264143;
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size: 25px;
    font-family: 'Mitr', sans-serif;
}

#donate2 button[type="submit"]:hover {
	background: #4f7369;
	transition:background-color 0.3s ease-in-out;
}

#donate2 button[type="submit"]:active { 
box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); 
}

#donate2 input:focus, #donate2 textarea:focus {
	outline:0;
	border:1px solid #999;
}
footer{
    margin-top: 1%;
    text-align: center;
    clear: both;
    padding-top: 1%;
    padding-bottom: .5%;
    font-family: 'Mitr', sans-serif;
    font-size: 80%;
    line-height: .92;
    background-color: #4f7369;
    color: #EBF2F1;
    border-radius: 0 0 30px 30px;
}
.title{
    font-family: 'Mitr', sans-serif;
    font-size: 135%;
    text-decoration: underline;
}
.email{
    color: #194759;
}
@media screen and (min-width: 200px) and (max-width: 688px){ /*Phone*/
#back{
    background-color: rgb(172, 243, 203);
    background-image: none;
}
h1{
    font-size: 175%;
    text-align: center;
    padding: 6%;
}
#head{
    background-size: 35%;
}
ul{
    display:inline-block;
    justify-items: center;
}
ul li{
    transition: none;
}
ul li a{
    display: block;
    position: none;
    transition: none;
    transform: none;
}
ul:hover li a{
    display: none;
    transform: none;
}
  
ul li a:hover{
    display: none;
    transition: none;
}
  
ul li a:before{
    display: none;
    transition: none;
    transform: none;
}
  
ul li a:hover:before{
    display: none;
    transition: none;
    transform: none;
}
#hammer:hover{
    transform: none;
}
#gw:hover{
    transform: none;
}
#bask:hover{
    transform: none;
}
#bull:hover{
    transform: none;
}
#mako:hover{
    transform: none;
}
#top{
    display: none;
}
#top2{
    display: none;
}
.wel{
    margin: auto;
    display: block;
}
#front{
    display: block;
    margin: auto;
    max-width: 75%;
}
#pp{
    margin: auto;
    display: block;

}
#front2{
    margin: auto;
    float: none;
    max-width: 75%;
}
#pp2{
    margin: auto;
    float: none;
}
#pp3{
    margin: auto;
    display: block;
    
}
#pp4{
    margin: auto;
    display: block;
}

#pp5{
    margin: auto;
    display: block;
    
}
#pp6{
    margin: auto;
    display: block;
    
}
#pp7{
    margin: auto;
    display: block;
    
}
.welcome{
    margin: auto;
    font-size: 200%;
}
#info1{
    max-width: 80%;
    margin: auto;
    display: block;
}
#tower{
    margin: auto;
    display: block;
    float: none;
    max-width: 80%;
}
#pp8{
    margin: auto;
    display: block;
}
#pp9{
    margin: auto;
    display: block;
}
#pp10{
    margin: auto;
    display: block;
}
.pp11{
    margin: auto;
    display: block;
}
.pp12{
    margin: auto;
    display: block;
}
#ever{
    margin: auto;
    display: block;
    float: none;
    max-width: 80%;
}
#goal{
    margin: auto;
    display: block;
    max-width: 80%;
}
#goal2{
    margin: auto;
    display: block;
    max-width: 80%;
}
#goal3{
    margin: auto;
    display: block;
    max-width: 80%;
}
#donate2 input[type="text"], #donate2 input[type="email"], #donate2 input[type="tel"], #donate2 input[type="url"], #donate2 textarea, #donate2 button[type="submit"] { 
    font:400 12px/15px 'Mitr', sans-serif;
}
footer{
    font-size: 70%;
    line-height: 1.25;
}
}

@media screen and (min-width: 688px) and (max-width: 992px){ /*Tablet*/
    #back{
        background-color: #eee9a8;
        background-image: none;
    }
    h1{
        font-size: 250%;
        text-align: center;
        padding: 2%;
    }
    #head{
        background-size: 35%;
    }
    ul{
        display:inline-block;
        justify-items: center;
    }
      
    ul li{
        transition:none;
    }
      
    ul li a{
        display: block;
        transition: none;
    }
      
    ul:hover li a{
        transform:none;
        opacity:none;
        filter:none;
    }
      
    ul li a:hover{
        transform:none;
        opacity:none;
        filter:none;
        text-decoration:none;
    }
      
    ul li a:before{
        transition:none;
        transform-origin:none;
        transform: none;
    }
      
    ul li a:hover:before{
        transition:none;
        transform:none;
    }
    #top{
        display: none;
    }
    #top2{
        display: none;
    }
    #hammer:hover{
        transform: none;
    }
    #gw:hover{
        transform: none;
    }
    #bask:hover{
        transform: none;
    }
    #bull:hover{
        transform: none;
    }
    #mako:hover{
        transform: none;
    }
}