:root {
    --primary-color: #d8c8b8;
    --secondary-color: #bfac99;
    --text-color: #313131;
    --accent-color: #B59779;
	--primary-fontsize: 1.03em;
	--secondary-fontsize: 1.3em;
	--tiny-fontsize: .4em;
	--med-fontsize: .55em;
	--big-fontsize: .675em;
	--bigger-fontsize: .785em;
    --font-family: "EB Garamond", "Trebuchet MS", "Times", serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html body {
	background-color: var(--primary-color);
	font-size: var(--primary-fontsize);
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
}

@media only screen and (max-width: 480px) {
    .logo{
		width:5.0rem;
		height:6.0rem;
	} 
}
       
header {
    background-color: var(--primary-color);
	width: 100%;
	padding: 0.5em;
}

nav {
    display: flex;
    justify-content: space-between;	
    align-items: center;
}

.logo {
	width:17.0rem;
	height:6.0rem;
}

#nav-links {
	display: flex;
	align-items: center;
	max-height: 2.37em;
	min-height: 2.37em;
	margin-left: 2em;
}

.normalnav{
	position: relative;
	bottom: .063em;
}

.navigation{
	margin: .063em 2.188em;
    padding: .23em 2.55em;
	
	margin-right: 6em;
	
	width: 7.625em;
	height: 2.37em;
	
	max-width: 7.625em;
	min-width: 7.625em;
	
	max-height: 2.37em;
	min-height: 2.37em;
}

.lownavigation{
	width: 17em !important; 
	height: 3.8em !important;
	position:relative;
	left: 21.5em;
	margin-left: .5em;
}

.lowlownavigation{
	width: 17em !important; 
	height: 3.8em !important;
	position:relative;
	top: .5em;
	left: 30.45em !important;
}

.button {
    background-color: var(--primary-color) !important;
    border: .125em groove antiquewhite !important;

	white-space: nowrap;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
    text-decoration: none;
    color: black;	
    cursor: pointer;
    transition: background-color .45s ease-in-out;
	z-index: 6;
}

.list-button{
	width: 100%;
	height: 2.365em;
	margin-bottom: -1em;
}

#info{
	background-color: var(--secondary-color);
	border: .125em groove antiquewhite;
	
	position: relative;
	white-space: nowrap;
	
	margin-left: -6.015em;
	margin-top: -.18em;
	height: 5.016em;
	width: 15.959em;
	
	z-index: 3;
}

#dropdown-click{
	position: relative;
	bottom: .063em;
}

.info-show{
	display:block!important
}

.info-dropdown{
	width: 7.8em;
	height: 2.35em;
	position: relative !important;
	right: -.15em;
}

.info-enabled{
	position: relative!important;
	top: 2.45em;
}

.info-content{
	cursor:auto;
	color:#000;
	background-color:#fff;
	display:none;
	position:relative;
	min-width:10em;
	margin:0;
	padding:0;
	z-index:1; /* yay */
	top: 2.5em;
}

.scbg{
	background-color: var(--secondary-color);
}

.button:hover, .button.active {
    background-color: var(--secondary-color) !important;
} 

#footerlogo{
	margin-right:3em;
}

#aboutlogo{
	margin-left:30.9em;
}

footer {
    background-color: var(--primary-color);
    padding: 2em;
	width: 100%;
}

.footer-section {
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
}

.times-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: .5em;
}

#hours{
	position:relative;
	left: 1.875em;
}

p { 
	line-height: 0.625em;
}

.opening-times h3, .contact-info h3 {
    font-weight: 600;
    margin-bottom: 1em;
}

.finfo{
	margin-left: 3.5em;
}

.contact-info{
	position: relative;
	top: 1.5em;
	left: 1.063em;
}

@media only screen and (max-width: 480px) {
    html, body {
        font-size: var(--tiny-fontsize);
    }
    
	#aboutlogo{
		margin-left:26.9em;
	}
	
    .logo {
        width: 5rem;
        height: 2rem;
    }
    
    nav {
        flex-direction: column;
    }
    
    #nav-links {
        flex-direction: column;
        margin-left: 0;
        width: 100%;
        align-items: center;
    }
    
    .navigation {
        margin: 0.5em 0;
        width: 90%;
        max-width: none;
        min-width: auto;
        padding: 0.5em;
        margin-right: 0;
    }
    
    #info {
        margin-left: 0;
        width: 90%;
        margin-top: 0.5em;
    }
    
    .footer-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .times-grid {
        grid-template-columns: 1em;
        text-align: center;
    }
    
    #hours, .contact-info, .finfo {
        position: static;
        margin: 1em 0;
        left: 0;
    }
    
    #footerlogo, #aboutlogo {
        margin: 1em 0;
    }
	.lownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		left: 18em;
		margin-left: .5em;
	}

	.lowlownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		top: .5em;
		left: 26.95em !important;
	}
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
	html, body {
        font-size: var(--med-fontsize);
    }
	.opening-times h3, .contact-info h3 {
		margin-bottom: .3em;
	}
	
	#aboutlogo{
		margin-left:26.9em;
	}
	
    .logo {
        width: 5rem;
        height: 2rem;
    }
    
    #nav-links {
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0.5em;
    }
    
    .navigation {
        margin: 0.5em 1em;
        width: 7em;
        max-width: 7em;
        min-width: 7em;
    }
    
    #info {
        margin-left: -5em;
        width: 14em;
    }
    
    .footer-section {
        flex-wrap: wrap;
        justify-content: center;
    }
	
	.lownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		left: 11em;
		margin-left: .5em;
	}

	.lowlownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		top: .5em;
		left: 19.95em !important;
	}
}

@media only screen and (min-width: 768px) and (max-width: 986px) {
	html, body {
        font-size: var(--big-fontsize);	
    }
	
	#aboutlogo{
		margin-left:27.4em;
	}
	
	.opening-times h3, .contact-info h3 {
		margin-bottom: .5em;
	}
	
    .logo {
        width: 10rem;
        height: 4rem;
    }
    
    .navigation {
        margin-right: 3em;
    }
	
	.lownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		left: 14em;
		margin-left: .5em;
	}

	.lowlownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		top: .5em;
		left: 22.95em !important;
	}
}

@media only screen and (min-width: 987px) and (max-width: 1024px) {
	html, body {
        font-size: var(--big-fontsize);	
    }
	
	#aboutlogo{
		margin-left:37.4em;
	}
	
	.opening-times h3, .contact-info h3 {
		margin-bottom: .5em;
	}
	
    .logo {
        width: 10rem;
        height: 4rem;
    }
    
    .navigation {
        margin-right: 3em;
    }
	
	.lownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		left: 24.6em;
		margin-left: .5em;
	}

	.lowlownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		top: .5em;
		left: 33.45em !important;
	}
}

@media only screen and (min-width: 1025px) and (max-width: 1180px) {
	html, body {
        font-size: var(--bigger-fontsize);
    }
	
	.opening-times h3, .contact-info h3 {
		margin-bottom: .75em;
	}
	
	#aboutlogo{
		margin-left:30.9em;
	}
	
    .logo {
        width: 12rem;
        height: 4.5rem;
    }
	
	.lownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		left: 18em;
		margin-left: .5em;
	}

	.lowlownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		top: .5em;
		left: 26.95em !important;
	}
}

@media only screen and (min-width: 1181px) and (max-width: 1200px) {
	#aboutlogo{
		margin-left:22.9em;
	}
	
	.logo {
        width: 12rem;
        height: 4.5rem;
    }
	
		
	.lownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		left: 10em;
		margin-left: .5em;
	}

	.lowlownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		top: .5em;
		left: 18.95em !important;
	}
}

@media only screen and (min-width: 1201px) and (max-width: 1280px) {
	#aboutlogo{
		margin-left:27.9em;
	}
	
	.logo {
        width: 12rem;
        height: 4.5rem;
    }
	
	.lownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		left: 16em;
		margin-left: .5em;
	}

	.lowlownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		top: .5em;
		left: 24.95em !important;
	}
}

@media only screen and (min-width: 1281px) and (max-width: 1400px) {
	
	#aboutlogo{
		margin-left:25.9em;
	}
	
    .logo {
        width: 17rem;
        height: 6rem;
    }
	
	.lownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		left: 16em;
		margin-left: .5em;
	}

	.lowlownavigation{
		width: 17em !important; 
		height: 3.8em !important;
		position:relative;
		top: .5em;
		left: 24.95em !important;
	}
}