@font-face {
	src: url("media/fonts/LuckiestGuy-Regular.ttf");
	font-family: "LuckiestGuy";
}

body {
	background-image: url("media/images/background.png");
	background-repeat: no-repeat;
	background-size: cover;
	font-family: Helvetica;
}

a:active, a:link, a:hover, a:visited {
	color: #3440eb;
	font-weight: bold;
	text-decoration: none;
}

#banner {
	background-color: rgba(109, 75, 64, 0.3);
	border-radius: 8px;
	color: #FFFFFF;
	font-family: "LuckiestGuy";
	font-size: 3vw;
	margin-left: 37%;
	margin-top: 0.8%;
	padding: 0.5%;
	padding-left: 1%;
	position: absolute;
	width: 25.4%;
}

#banner img {
	width: 10%;
}

#content {
	background-color: #FFFFFF;
	border-radius: 10px;
	filter: blur(0)
	font-size: 1vw;
	height: 71%;
	margin-left: 31.7%;
	margin-top: 11%;
	padding: 2%;
	padding-top: 0%;
	position: absolute;
	width: 33%;
	z-index: 100;
        overflow-wrap: break-word;
        word-wrap: break-word;
        overflow: auto;

}

#content h1 {
	font-family: "LuckiestGuy";
	font-size: 2vw;
	padding-bottom: 2%;
	text-align: center;
}

#content-style {
	font-size: 1vw;
}

#link-buttons {
	text-align: center;
}

#link-buttons a {
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 8px;
        color: #FFFFFF;
        font-family: "LuckiestGuy";
        font-size: 1.5vw;
        padding: 2%;
        margin: 1%;
	text-align:center;

}

#link-buttons a:hover {
        background-color: rgba(0, 0, 0, 1);
}

#navigation {
	margin-left: 29%;
	margin-top: 7%;
	position: absolute;
	white-space:nowrap;

}

#navigation a {
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	color: #FFFFFF;
	font-family: "LuckiestGuy";
	font-size: 2vw;
	padding: 2%;
	margin: 1%;
}

#navigation a:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

#news {
        border-color: rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 2%;
        margin-top: 2%;
        padding: 2%;
}

/* PHONE SCREEN */

@media only screen and (max-width:700px){

body {
        background-image: url("media/images/background.png");
}
#banner {
        font-size: 8vw;
        height: 3.5%;
        margin-left: 11%;
        margin-top: 0.1%;
        padding: 2%;
        width: 73%;
}

#content {
	border: 1px solid #000;
        font-size: 5vw;
        height: 82.5%;
        margin-left: 1%;
        margin-top: 20%;
        width: 90%;
}

#content h1 {
        font-size: 5vw;
}

#content-style {
        font-size: 4vw;
}

#link-buttons a {
        font-size: 5vw;
}

#navigation {
        margin-left: 0%;
        margin-top: 12%;
}
#navigation a {
        font-size: 5vw;
        margin: 0.5%;
        padding-bottom: 0.5%;
}

#news {
        border-color: rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 2%;
        margin-top: 2%;
        padding: 2%;
}

}