@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
html {
    height: 100%;
}

body{
	padding:0;
	height: 100%;
    margin: 0;
	font-family: 'Open Sans', sans-serif;
    min-width:380px;
    background:url('images/kestrel-background.jpg') no-repeat center;
    background-size:cover;
}

hr{
    max-width: 50px;
    border-top: solid 2px darkslategrey;
    margin:20px auto;
}

#container{
	position:absolute;
	width:100%;
	max-height:600px;
	height:auto;
	top:50%;
	margin-top:-280px;
}
#boundary{
    max-width: 750px;
    width: 94%;
    margin: 0 auto;
    padding: 50px 50px 60px;
    border-radius: 15px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.7);
    position:relative;
}
#boundary::after{
    content:'';
    position:absolute;
    top:-7px;
    left:-7px;
    bottom:-7px;
    right:-7px;
    border:solid 2px rgba(255,255,255,0.4);
    border-radius:18px;
    z-index:-1;
}
#header{
	width:100%;
	text-align:center;
	padding:0 0 40px;
}
#header p{
    font-size:19px;
    margin:7px 0 0;
} 
#header img{
	width:100%;
	height:auto;
	max-width:540px;
}
#content{
	text-align:center;
	color:darkslategrey;
}
#content h1{
	font-size:72px;
	margin: 0 0 20px;;
	line-height:100%;
	font-weight:normal;
    display:inline-block;
    padding:12px 70px;
    color:darkslategrey;
    font-family: 'Cookie', cursive;
    position:relative;
    background:url('images/kestrel.png') no-repeat top right;
}

#content h1::after{
    content:'';
    width:50px;
    height:2px;
    position:absolute;
    left:50%;
    bottom:5px;
    background:darkslategrey;
    transform:translateX(-50%);
}

#content h1::before{
    bottom:unset;
    top:0;
}

#content h1 span{
	color:gold;
	white-space:nowrap;
}

#content h3{
    margin:0 0 15px;
    font-size:24px;
}

#content p{
	font-size:18px;
	margin:0 0 10px;
	line-height:150%;
}

#content a {
    color:darkslategrey;
    font-weight:bold;
    text-decoration:none;
}

@media screen and (max-width: 700px) {
	#container{
        position:relative;
        top:0;
        margin-top:20px;
    }
    #boundary{padding: 45px 25px 30px;}
    #content h1{
        font-size:52px;
        background-size: 50px auto;
        padding:12px 55px;
    }
}

@media screen and (max-width: 400px) {
    #header p {
        font-size: 15px;
    }
    #content p{
        font-size:16px;
    }
    #content h1 {
        font-size:40px;
        background-size: 40px auto;
        padding:12px 50px;
    }
    #boundary {
        padding: 35px 30px 20px;
        width:90%;
    }
    #header {
        padding: 0 0 20px;
    }
}