@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 20px;               
    width: 100%;            
    margin: 0 auto 3%;        
}

table, th, td {
    border: 2px solid #461412;
    border-collapse: collapse;
    padding: 8px;
    text-align: left;
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    font-size: 1em;
}

table {
    width: 80%;
    margin: -2% auto 2%;
}

#button {
    text-align: center;
    margin: 1%;
}

header img, nav {
	margin: 0 auto;
}

header img {
	width: 8%;
	height: 8%;
	margin: 1% auto;
}

header {
    background-color: #461412;
    display: flex;
}

nav ul {
    display: flex;
    justify-content: center; 
    gap: 55px;   
	margin: 8% 0 0 0;
}

.stupidlink {
    display: inline-block;
	margin: auto 4%;
}

html, body {
    height: 100%; 
}

nav a {
    padding: 5%;    
	text-decoration: none;
    color: #f2e4dc;
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    font-size: 1em;
}

nav a:hover {
    background-color: #f2e4dc;
    color: #461412;
}

#banner {
    background-image: url("../images/cabinbanner.png");
    height: 440px;
}

#title h1 {
    font-size: 2.5em;
    color: #461412;
    font-family: "Playfair Display", serif;
    font-weight: 600;
    text-align: center;
    margin: 3% 0 1%;
}

#title h2 {
    color: #461412;
    font-size: 1.5em;
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    text-align: center;
    margin: 0 0 5%;
}

#card-box {
    margin: 0 auto;
    display: flex;
}

.photo-card {
    margin: 0 auto;
    text-align: center;
    font-family: "Goudy Bookletter 1911", serif;
    opacity: 0.5;
    transition: opacity 2s;
}

.photo-card:hover {
    opacity: 1.0;
}

.photo-card img {
    border: solid 0.25em #461412;
}

.photo-card h3 {
    margin: 5%;
    color: #461412;
    font-size: 2em;
    font-family: "Playfair Display", serif;
    font-weight: 600;
}

.photo-card p {
    margin: auto 0;
    color: #461412;
    font-size: 1.2em;
    font-family: "Raleway", sans-serif;
    line-height: 1.2;
    padding: 0 0 10% 0;
}

.commentcard {
    border: solid 0.25em #461412;
    margin: 3% 20%;
    padding: 4%;
    background-color: #f2e4dc;
}

.commentcard h1 {
    font-size: 2.5em;
    color: #461412;
    font-family: "Playfair Display", serif;
    text-align: center;
    line-height: 1.2;
}

.commentcard h3 {
    margin: 5% 0;
    text-align: center;
    color: #461412;
    font-size: 1.25em;
    font-family: "Raleway", sans-serif;
}

.container {
    display: flex;
    width: 70%;
    margin: 2% auto 4%;
    padding: 0 2%;
}

#aboutbox img {
    float: left;
    margin: 2%;
    border: solid 0.25em #461412;
}

#aboutbox h1 {
    font-size: 2.5em;
    color: #461412;
    font-family: "Playfair Display", serif;
    padding: 2% 0 0;
    text-align: center;
}

#aboutbox p {
    margin: auto 0;
    color: #461412;
    font-size: 1.2em;
    font-family: "Raleway", sans-serif;
    text-align: center;
    line-height: 1.2;
}

p {
    color: #461412;
    font-size: 1em;
    font-family: "Raleway", sans-serif;
    text-align: center;
}

.box {
    margin: 0 auto;
    width: 25%;
    padding: 2%;
    background-color: #f2e4dc;
    font-family: "Raleway", sans-serif;
    text-align: center;
}

#boxcontainer {
    display: flex;
    margin: 2% 0;
    padding: 0 10% 10%;
}

#clickp {
    font-size: 0.8em;
}

footer {
    background-color: #461412;
    text-align: center;
    padding: 2% 0;
	clear: both;
}

#footer-content {
    margin: 0 auto;
}

#footer-content p {
    color: #f2e4dc;
    font-size: 0.8em;
}

@media only screen and (max-width: 1024px) {
	nav ul {
		margin-top: 5%;
}
	nav a {
		display: inline;
        font-size: .9em;
}
	
    .stupidlink {
        margin: 0 auto;
        text-align: center;
}

    header img {
        width: 8%;
        height: 8%;
}

    #card-box img {
        width: 80%;
}

    .container {
        width: 90%;
}
}

@media only all and (max-width: 480px) { 
	header {display: flex; 
        flex-direction: column; 
        align-items: center; 
}
	
	header img {
		display: flex;  
        width: 27%; 
} 
    
	nav ul { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
} 
    
    nav a { 
        display: flex; 
        font-size: 1.25em; 
        padding: 12px 0; 
        text-align: center; 
        text-decoration: none; 
} 
    
    nav ul { 
        display: flex;  
        gap: 0;          
        text-align: center; 
        list-style-type: none; 
        padding: 0; 
        margin: 0; 
} 
    
    nav li { 
        display: flex; 
        width: 100%; 
} 
    
    #banner { 
        height: 0px; 
} 
    
    #title h1 { 
        font-size: 2em; 
        padding-top: 5%; 
} 
    
    #title h2 { 
        padding: 2% 0; 
} 
    
    #card-box { 
        display: block; 
} 
    
    .photo-card img { 
        max-width: 60%; 
} 
    
    .photo-card h3 { 
        font-size: 1.75em; 
        margin: 3%; 
} 
    
    .photo-card p { 
        margin: 0 0 -3% 0; 
} 
    
    #aboutbox img { 
        margin: 1% 0 5% 14%; 
        max-width: 70%; 
} 
    
    .commentcard { 
        margin: 10% 1%; 
} 
    
    .commentcard h1 { 
        font-size: 1.5em; 
} 
	
	.accom {
	width: 90%; 
	padding: 10px; 
	display: block;
	clear: both; 
	margin-bottom: 20px; 
}
		

} 



#confirm {
	margin: 2%;
	font-size: 1.25em;
	line-height: 1.2;
	font-weight: 400;

}

.accom {
    width: 45%;
    padding: 10px;
    border: 2px solid #461412;
    box-sizing: border-box; 
}

.accom img {
	float: left;
	margin: 3%;
	width: 175px;
}

.accom h2 {
	font-weight: 600;
	margin-top: 4%;
	font-size: 24px;
	color: #461412;;
	font-family: "Playfair Display", serif;
}

.accom p {
	margin-top: 2%;
	text-align: left;
	color: #461412;
	font-family: "Raleway", sans-serif;
    font-weight: 400;
	font-size: 1em;
}