body{
    background-color: rgb(3, 219, 219);
    font-family:Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
/* Header formatting */
header{
    background-image: url("images/sunrise.jpg");
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Set a specific height */
    height: 300px;
    margin:0;
    padding:10px;
    position: relative;    
    text-align:center;
}
header ul li a{
    text-decoration: none;
    font-size:20px;
    color:black;
}
header ul{
    list-style-type: none;
    text-align: center;
}
header li{
    display:inline-block;
    margin-right: 50px;
    text-align: center;
}
header a:hover{
    background-color: ivory;
    padding:5px;
    border-radius: 5px;
    filter: brightness(80%);
}
header h1{
    font-size: 50px;
    padding-left: 190px;
}
header h2{
    font-size: 50px;
}

/* news page headers*/
.grass{
    background-image: url("images/grass.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Set a specific height */
    height: 300px;
    margin:0;
    padding:10px;
    position: relative;    
    filter: blur(40%);
}
.grass a{
    text-decoration: none;
    color:white;
}

.grass h1{
    color:black;
    font-size: 50px;
    text-align:center;
}
.grass h4{
    color:black;
    font-size: 30px;
    text-align:left;
}

.homeless{
    background-image: url("images/boyHelpingHomeless.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Set a specific height */
    height: 300px;
    margin:0;
    padding:10px;
    position: relative;    
}
.homeless a{
    text-decoration: none;
    color:white;
}

.homeless h1{
    color:black;
    position:relative;
    text-align: center;
    font-size: 50px;
    padding-left: 170px;
    padding-right: 10px;
    margin-top: 10px;
}
.homeless h4{
    color:white;
    font-size: 30px;
    text-align:left;
}

.couples{
    background-image: url("images/longCouple.jpg");
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Set a specific height */
    height: 300px;
    margin:0;
    padding:10px;
    position: relative;    
}
.couples a{
    text-decoration: none;
    color:white;
}

.couples h1{
    color:black;
    font-size: 50px;
    text-align:center;
}
.couples h4{
    color:white;
    font-size: 30px;
    text-align:left;
}
.solar{
    background-image: url("images/solar.jpg");
    /* Position and center the image to scale nicely on all screens */
    background-position-y:-500px ;
    background-repeat: no-repeat;
    background-size: cover;
    /* Set a specific height */
    height: 300px;
    margin:0;
    padding:10px;
    position: relative;  
}
.solar a{
    text-decoration: none;
    color:black;
}

.solar h1{
    color:black;
    position:relative;
    text-align: center;
    font-size: 50px;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 5px;
}
.solar h4{
    color:black;
    font-size: 30px;
    text-align:left;
    margin-top: 100px;
}
.quote{
    text-align: center;
    margin:50px;
    font-size: 20px;
}

/* background images*/
.poll{
    background-image: url("images/yellow.jpg");
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding:10px;
}
.friends{
    background-image: url("images/whiteSplash.jpg");
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding:10px;
    font-size: 20px;
}
.friends ul{
    list-style-type: none;
    text-align: center;
}
.friends li{
    display:inline-block;
    margin-right: 50px;
    text-align: center;
}
.news{
    background-image: url("images/white.jpg");
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding:10px;
}
.pals{
    background-image: url("images/pink.jpg");
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding:10px;
}
.about_backgroud {
    background-image: url("images/computer.jpg");
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding:10px;
    color: white;
    padding-left:30px;
    padding-right: 30px;
    margin:0;
}

.news{
    background-image: url("images/white.jpg");
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.home {
    background-image: url("images/blue.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position-y: 0;
    background-position-x: 0;
}


/* image descritpion formating */
.i_descriptions{
    color: black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px;
}

.i_descriptions a{
    color: black;
    text-decoration: none;
}
.i_descriptions h3{
    font-size: 17px;
}

.i_descriptions figure{
    margin: auto;
    padding-bottom: 100px;
    padding-top: 30px;
    text-align: center;
    text-transform: initial;
    width: 500px;
}
.i_descriptions figure img{
    border: 1px solid white;
    border-radius: 20%;
    box-shadow: gray 0 0 10px;
    width: 400px;
}
.i_descriptions figure img:hover{
    opacity: 80%;
}
.i_descriptions figure img:active{
    opacity: 100%;
    filter: brightness(80%)
}


/* textual descriptions formatting */
.details{
    padding:10px;
    padding-left:30px;
    padding-right: 30px;
    margin:0;
}

.details h2{
    text-transform: capitalize;
    font-size: 25px;
    padding-top: 20px;
    padding-bottom: 0px;
}
.details h3{
    text-transform: capitalize;
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 0px;
}
.details p{
    padding-bottom: 5px;
}
.details input{
    margin-left:20px
}
.special input{
    margin-left:67px
}

/*For the news pages*/
.closer{
    background-color: gray;
    color:black;
    padding:10px;
    margin:0;
    font-size: 10px;
    text-align: center;
}
.closer a{
    text-decoration: none;
    color:black;
}

/* Footer */
footer{
    background: navy;
    font-size: 12px;
    color: white;
    padding: 10px 10px;
    text-transform: uppercase;
    text-align: center;
}

/* make the about us page a bit darker */
.about header{
    filter:brightness(80%)
}

.about footer{
    filter: brightness(80%);
}

/* not sure what this does*/
body, html {
    height: 100%;
}

/* #####################
	GRADIENT BUTTONS
######################## */

.gradient-button-1{
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 20px 40px;
	font-size: 1.4rem;
	box-sizing: border-box;
	background-color: #e7eef1;
	border: solid 4px transparent;
	border-image: linear-gradient(to right, aqua, purple);
	border-image-slice: 1;
	color: black;
	transition: all 0.4s ease-in-out;
}

	.gradient-button-1:hover{
		background-image:linear-gradient(to right, aqua,purple);
		border-right-style: none;
		color: white;
	}
	
	.gradient-button-1:active{
		background-image: linear-gradient(to right,aqua,purple);
		color: #1d4698;
	}


    .gradient-button-2{
        position: relative;
        z-index: 1;
        display: inline-block;
        padding: 20px 40px;
        font-size: 1.4rem;
        box-sizing: border-box;
        background-color: #e7eef1;
        border: solid 10px transparent;
        border-image: linear-gradient(to top right, aqua, purple);
        border-image-slice: 1;
        color: black;
        transition: all 0.4s ease-in-out;
        opacity:0;
    }
    
        .gradient-button-2:hover{
            background-image:linear-gradient(to top right, aqua,purple);
            color: white;
        }
        
        .gradient-button-2:active{
            background-image: linear-gradient(to top right,aqua,purple);
            color: #1d4698;
        }
        
    
/* #######################
	3d button
########################## */
.btn-3d-1{
	position: relative;
	background: orangered;
	border: none;
	color: white;
	padding: 15px 24px;
	font-size: .8rem;
	box-shadow: -6px 6px 0 hsl(16,100%,30%);
    outline: none;
    opacity: 0;
}
	
	.btn-3d-1:hover{
		background: hsl(16, 100%, 40%);
	}


	.btn-3d-1:active{
		background: hsl(16,100%,40%);
		top: 3px;
		left: -3px;
		box-shadow: -3px 3px 0 hsl(16,100%,30%);
	}
	
	.btn-3d-1::before{
		position : absolute;
		display:block;
		content:"";
		height: 0;
		width: 0;
		
		border: solid 6px transparent;
		border-right: solid 6px hsl(16, 100%, 30%);
		border-left-width: 0;
		background: none;
		top: 0;
		left: -6px;
	}
	
	.btn-3d-1::after{
		position : absolute;
		display:block;
		content:"";
		height: 0;
		width: 0;
		
		border: solid 6px transparent;
		border-top: solid 6px hsl(16,100%,30%);
		border-bottom-width: 0;
		background: none;
		right: 0;
		bottom: -6px;
	}
	
	.btn-3d-1:active::before{
		border: solid 3px transparent;
		border-right: solid 3px hsl(16,100%,30%);
		border-left-width: 0px;
		left: -3px;
	}
	
	.btn-3d-1:active::after{
		border: solid 3px transparent;
		border-top: solid 3px hsl(16,100%,30%);
		border-bottom-width: 0px;
		bottom: -3px;
	}
	
    
    
/* #######################
dark minimal
########################## */
.dark-minimal-btn{
	border-radius: 2px;
	font-size: 0.9rem;
    padding: 6px 12px;
    color:black;
	-moz-box-shadow: 	inset 0 	1px 0 0 rgb(5, 197, 197);
	-webkit-box-shadow: inset 0 	1px 0 0 rgb(5, 197, 197);
	box-shadow: 		inset 0 	1px 0 0 rgb(5, 197, 197);
	background: aqua;
	border: solid 1px aqua;
    text-shadow:  0 1px 0 rgb(5, 197, 197);
    opacity:0;
}

	.dark-minimal-btn:hover{
		background: rgb(3, 241, 241);
		
	}
	
	.dark-minimal-btn:active{
		background: 	rgb(2, 206, 206);
		border-color: 	rgb(2, 206, 206);
	}