@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght,BNCE,INFM,SPAC@0,300..800,-100..100,0..100,0..100;1,300..800,-100..100,0..100,0..100&display=swap');
@font-face{
    font-family: grapeSoda;
    src: url(../fonts/GrapeSoda.woff2) format("woff2");
}
@font-face{
    font-family: dedicool;
    src: url(../fonts/Dedicool.woff2) format("woff2");
}
@font-face{
    font-family: boldPixels;
    src: url(../fonts/BoldPixels.woff2) format("woff2");
}
@font-face{
    font-family: poco;
    src: url(../fonts/Poco.woff2) format("woff2");
}

.brand-wrap{
    display: flex;
	position: relative;
	width: 1080px;
	height: 320px;
	margin: 0 auto;
	flex: 0 0 auto;
}
.brand-link{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.banner{
	position: absolute;
    margin-top: 12px;
	inset: 0;
	width: 1080px;
	height: 320px;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
}
.brand{
	position: absolute;
    transform: rotate(-8deg);
	height: 100px;
	width: auto;
	z-index: 2;
	pointer-events: none;
}
/* ensure clicks go to the link, not the images */
.banner, .brand{ pointer-events: none; }

.top-nav{
    display: flexbox;
    justify-self: center;
}

.nav-row{
    display: flex;
    justify-self: center;
    margin: 8px;
    padding: 8px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 32px;
    border: none;
    font-family: grapeSoda;
    font-size: 22px;
}
.nav-btn{
    font-family: grapeSoda;
    font-size: 22px;
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 32px;
    border: none;
	cursor: pointer;
    padding-left: 8px;
    padding-right: 8px;
    text-decoration: none;
}

.site-footer{
    display: flex;
    justify-self: center;
    padding: 8px;
}