/*code for the webpage itself*/
body, html {
    height: 100%;
    margin: 0;
	background-color: #8983f2;/*purple*/
}

.header {
    /*the image used*/
    background-image: url("home/header.jpg");/*the home in the url is part of the pathway to the image*/
	height: 15vmax;
	
    /*centre and scale the image*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.div1{
	text-align: center;
	width: 100%;
	height: 5vmax;
	background-color: white;
	position: absolute;
	font-size: 1.5vmax;
	font-family: 'Montserrat', sans-serif;/*font for the links that is made availabe in the html*/
}

.div1 a { 
	color:#fdc563;/*yellow*/
	text-decoration: none;/*removes link underline*/

}

.section{
	text-align: center;
	width: 100%;
	height: 48.5vmax;
	margin-top: 1%;
	background-color: #8983f2;/*purple*/
	color: #2b2b2b;/*black*/
	position: absolute;
	font-size: 3vmax;
	font-family: 'Montserrat', sans-serif;
}

.slideshow{
	height: auto;
	margin-top: 2%;
	margin-bottom: -2%;
	margin-left: 25%
}

/*If the screen size is 601px or more, set the width and margin-left according to code. Same applies to the other media screens*/
@media screen and (min-width: 600px) {
.slideshow{
    width: 50%;
	margin-left: 25%
	}
}

/*If the screen size is 600px or less, set the width and margin-left according to code. Same applies to the other media screens*/
@media screen and (max-width: 600px) {
.slideshow {
    width: 70%;
	margin-left: 15%
	}
}

.slides{
	width:100%;/*means that the full image will be displayed*/
}

.play_title{
	color: #2b2b2b;/*black*/
}

.summary{
	text-align: center;
	font-family: 'Esteban', serif;
	padding-left:10%;
	padding-right:10%;
	margin-bottom:-3%;
}

@media screen and (min-width: 600px) {
.summary{
    font-size: 1.5vmax;
	}
}

@media screen and (max-width: 600px) {
.summary {
    font-size: 2vmax;
	}
}