html, body { height: 100%; width: 100%;}
*, *::before, *::after { border: 0px; margin: 0px; padding: 0px; box-sizing: border-box; } 

html { font-size: 10px; }

body {
    border-top: 20px solid #bdbc51;
    font-family: 'Roboto', sans-serif;
    color: white;
}

a {
    color: white;
}

.hero {
	background-image: url(hero_desktop.png);
}

.top .logo {
	margin-bottom: 8.5rem;
}

.top h2 {
    font-weight: 400;
    font-size: 4rem;
    max-width: 76rem;
}

.links a {
    display: block;
    font-size: 4rem;
}

.download {
	font-size: 3rem;
    text-decoration: none;
} 

address {
	white-space: pre-line;
	font-style: normal;
	font-size: 1.8rem;
	font-weight: 300;
} 

@media ( min-width: 1001px ) {

	body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 4fr 1fr 1fr 1fr;
		grid-column-gap: 0;
		grid-row-gap: 30px;
		font-size: 16px;
        background-image: url(background_desktop.jpg);
        background-size: cover;
	}


	.top {
		grid-area: 1 / 1 / 2 / 2;
		padding-top: 4rem;
	}

	.hero {
		grid-area: 1 / 2 / 5 / 3;
		background-image: url(hero_desktop.png);
		background-size: cover;
	}

	.top .logo {
		margin-bottom: 8.5rem;
		/* width: 30rem; */
	}

	.links {
		grid-area: 2 / 1 / 3 / 2;
		display: grid;
		align-content: space-between;
	}

	.download {
		grid-area: 3 / 1 / 4 / 2;
		max-width: 85rem;
		align-self: center;
		margin-top: 3rem;
	} 

	.download:hover {
		text-decoration: underline;
	}

	.download:before {
		content: "";
		width: 9.5rem;
		height: 9.5rem;
		background-image: url(download.png);
		float: left;
		margin-right: 2rem;
		margin-top: -1.5rem;
		background-repeat: no-repeat;
		background-size: contain;
	}

	address {
		grid-area: 4 / 1 / 5 / 2;
		padding-bottom: 4rem;
		align-self: end;
	} 

	.top, .links, .download, address {
		padding-left: 6rem;
	}

}


@media ( max-width: 1500px ) {
	
	html {font-size: 7px;}

}

@media ( max-width: 1300px ) {
	
	html {font-size: 5.5px;}

}

@media ( max-width: 1000px ) {
	
	body {
    	display: grid;
    	grid-template-columns: 1fr;
    	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    	grid-template-areas:
	    	"top"
	    	"hero"
	    	"download"
	    	"links"
	    	"address";
    	text-align: center;
    	border-top: 10px solid #bdbc51;
    }

    body:before {
        content: "";
        background-image: url(bottom_mobile.jpg);
        grid-area: download / 1 / address / 2;
        /* grid-area: 3 / 1 / 6 / 2; */
        background-size: cover;
    }

    .top {
        padding: 30px;
        grid-area: top;
        background-image: url(top_mobile.jpg);
        background-size: cover;
        /* grid-area: 1 / 1 / 2 / 2; */
    }
    
    .top .logo {
        max-width: 150px;
        display: block;
        margin: 0 auto 50px auto;
    }

    .top h2 {
        text-align: center;
        margin: auto;
    }

    .top h2 span {
        display: block;
        height: 4rem;
    }

    .hero {
        background-image: url(hero_mobile.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        /* margin-bottom: 30px; */
        grid-area: hero;
        aspect-ratio: 1/1;
        min-height: 100vw;
        /* grid-area: 2 / 1 / 3 / 2; */
    }

    .download {
        max-width: 320px;
        margin: 30px auto;
        grid-area: download;
        position: relative;
        /* grid-area: 3 / 1 / 4 / 2; */
    }

    .download:before {
		content: "";
		width: 75px;
		height: 75px;
		background-image: url(download.png);
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: -135px;
	}

    .links {
        grid-area: links;
        align-self: center;
        /* margin-top: 30px; */
        /* grid-area: 4 / 1 / 5 / 2; */
    }

    .links a {
        margin-bottom: 20px;
    }

    address {
        padding-bottom: 30px;
        /* display: inline-block; */
        /* grid-area: 5 / 1 / 6 / 2; */
        grid-area: address;
    }

}