:root {
		--blue:#d0dfe4;
		--light:#fff3e0;
		--tan:#ffe5bc;
		--teal:#33565a;
		--brown:#2e0a05;
	}
	
	img{
		width:100%;
	}
	
	#behind_img{
		display:block;
		height: 100%;'
		flex:1%;
		width:50%;
		object-fit:cover;
		margin:0;

	}
	
	#logo-img {
		display: block;
		width: 170px;
		height:98px;
		margin-left: 30px;
		margin-bottom:0 auto;
		justify-content:center-left;
	}
	
	#footer-logo{
		display: block;
		margin-left:50px;
		width: 170px;
		height:98px;

	}
	
	/* heading */
	header{
		padding:20px 20px 20px 20px;
		flex-direction:row;
		gap:30px;
		display:flex;
		flex-wrap: wrap;
		justify-content:space-between;
		background-color:#d0dfe4;
		margin:0 auto;
		
	}
	
	#nav-box{
		display:flex;
		flex-wrap: wrap;
		flex-direction: row;
		gap: 10px;
		align-items:flex-end;
		justify-content:flex-end;
		margin-right:0px;
	}
		
	nav li{
		list-style:none;
		margin-bottom:50px;
	} 
	
	header nav li{
		list-style:none;
		padding:0px;
		
	}
	
	header nav ul li a:link,  header nav ul li a:visited{
		color:#2e0a05;
		font-size:24px;
		font-family:"Roboto", sans-serif;
		text-decoration: none;
		padding: 10px 15px;
		border-radius: 10px;
		display:inline-block;    
		transition: all 0.3 ease;
	}
	
	/* section */
	section{
		padding:50px 320px 50px 320px;
		margin:0 auto;
	}
	
	#hero{
		background-color:#fff3e0;
		line-height:0px;
		text-align:center;
	}
	
	#hero-img{
		padding:0px 0px 0px 0px;
		margin:0 auto;
		width:100%;
		display:block;
		
	}
	
	#behind-img{
		display:block;
		flex:1;
		object-fit:cover;
		width:50%;
		height:548px;
	}
	
	
	#tan-container{
		background-color:#ffe5bc;
		justify-content:center;
		text-align:center;
		font-family:"Roboto", sans-serif;
		font-size:24px;
		padding:100px 150px 100px 150px;
		margin: 0 auto;
	}
		
	#homepage_behind{
		background-color:#33565a;
		display: flex;
		width:100%;
		min-height:548px;
		align-items:center;
		overflow:hidden;
		
	}
	
	#behind-content{
		flex:1;
		box-sizing:border-box;
		margin-left:110px;
		display:flex;
		flex-direction:column;
		margin-right: 0 auto;
	}
	
	

	
	footer{
		display:flex;
		flex-wrap:wrap;
		flex-direction: row;
		align-items:center;
		justify-content:space-between;
		font-family:"Roboto", sans-serif;
		background-color:#d0dfe4;
		font-size:16px;
		padding:30px;
		margin:0 auto;
		border:0px;
	}
	
	#footer-text{
		margin-left:5px;
		text-align:center-left;
		
	}
		
	#footer-other-text{
		margin-right:5px;
		text-align:center-right;
	}
		
	
	/* text */
	h1{
		font-family: "Playfair Display", serif;
		font-optical-sizing: auto;
		font-weight: <weight>;
		font-style: italic;
		font-size:96px;
		color:#33565a;
		justify-content:center;
		text-align:center;
		margin-bottom: 0 auto;
		padding-bottom: 0 auto;
	}
	
	h2{
	  font-family: 'Bright DEMO', sans-serif;
	  color: #33565a;
	  font-size:110px;
	  font-style:normal;
	  justify-content:center;
	  text-align:center;
	  text-align:center;
	  margin-bottom: 0 auto;
	  
    }
	
	h3{
		font-family: 'Bright DEMO', sans-serif;
	  color: #ffe5bc;
	  font-size:110px;
	  font-style:normal;
	  justify-content:center;
	  text-align:center;
	  text-align:center;
	}
	
	
	.hp-body-light{
		font-family: "Roboto", sans-serif;
		font-size:24px;
		color:#ffe5bc;
		margin:0 0 25px 0;
		line-height: 1.4;
		text-align:left;
		padding: 0;
	}
	
	.hp-body-dark{
		font-family: "Roboto", sans-serif;
		font-size:24px;
		color:#33565a;
		margin-left:120px;
		margin-top:100px;
		margin-bottom:100px;
	}
	
	/* accessories ( to change: combine find cafe & who btn to one )*/
	#find-cafe-btn{
		font-size:16px;
		color:#33565a;
		border-width:5px;
		margin:5px;
		text-decoration:none;
		background-color: #e0e4e5;
		padding: 15px 24px;
		border-radius: 8px;
		font-weight: 700;
		font-family: sans-serif;
		font-size: 16px;
		width:fit-content;
		border:1px solid #33565a;
	}
	
	#who-btn{
		display: inline-block;
		background-color: #e0e4e5;
		color: #33565a;
		padding: 15px 24px;
		text-decoration: none;
		border-radius: 8px;
		font-weight: 700;
		font-family: sans-serif;
		font-size: 16px;
		width:fit-content;
		border:1px solid #33565a;
		
	}
	
	#who-btn:hover, #find-cafe-btn:hover{
		background-color:#bbc8cd;
	}
	
	header nav ul li a:hover{
		font-size:24px;
		transform: translateY(-5px); 
	}
	
	/* stickers */

	#hp-container {
		position: relative;
		display: inline-block;
		width: 100%;
	}

	
	.sticker {
		position: absolute;
		z-index: 10; 
		pointer-events: none; 
	}

	.star {
		width:650px; 
		top: 350px;
		margin:0 auto;
		transform: rotate(15deg); 
		position: absolute;
		right: -50px;  
	}


	.taft{
		width: 600px;
		bottom: 0px;
		left: 10px;
		top:1200px;
	}	
	
	.sticker:hover {
		transform: scale(1.1) rotate(0deg);
		transition: 0.3s ease;
	}


	body {
		overflow-x: hidden;
	}
	
	/*hamburger menu for mobile */
	.hamburger {
		display: none; 
		cursor: pointer;
		flex-direction: column;
		gap: 5px;
	}

	.hamburger div {
		width: 30px;
		height: 4px;
		background-color:#d0dfe4;
		border-radius: 2px;
	}
	
	/* <== mobile version ==> */
	@media screen and (max-width: 360px) {
    /* 1. Show the hamburger icon */
    .hamburger {
		display: flex !important;
		flex-direction: column;
		gap: 5px;
		cursor: pointer;
		z-index: 1001;
	}

	.hamburger div {
		width: 30px;
		height: 4px;
		background-color: var(--brown);
		margin-left:100px;
		margin-right:0 auto;
	}
	
	h1 {
		font-size: 33.45px;
		margin-bottom: 2px;
	}

	h2 {
		font-size: 45px;
	}
	
	p{
		font-size:16px;
	}
    
    #nav-box {
        display: none; 
        position: absolute;
        top: 0;
        right: 0;
        width: 40%; 
        height: 1100px;
        background-color: var(--blue);
        padding:80px 20px 0px 20px;
        z-index: 1000;
        flex-direction: column;
		font-size:16px;
    }

    #nav-box.active { display: flex; }
	
	#nav-box ul {
		margin-top: 0;      /* Removes top margin from the list */
		padding-top: 0px;     /* Removes top padding from the list */
		list-style: none;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items:flex-start;
	}

	#nav-box li {
		margin-bottom: 20px; /* Adjust this to control the gap between links */
	}

	#nav-box li:first-child {
		margin-top: 10px;    /* This controls exactly how far the first link sits from the top */
	}
	
	#nav-box li a {
		display: block;
		text-align: left;
		font-size: 20px; /* Slightly larger for easier tapping on mobile */
	}

    /* 2. Layout Orientation Fixes */
    section {
        padding: 40px 20px !important; /* Removes the 320px side padding */
    }

    #tan-container {
        padding: 40px 20px !important; /* Removes the 150px side padding */
    }

    #homepage_behind {
        flex-direction: row; /* Stacks text on top of image */
        min-height: auto;
    }

    #behind-content {
        margin-left: 0; /* Removes the 110px desktop margin */
        padding: 40px 20px;
        text-align: left;
		align-items: center-left;

    }

    #behind-img {
        width: 50% !important; /* Image fills the width on mobile */
        height: 300px; /* Adjust height so it doesn't take the whole screen */
		margin:0 auto;
		padding:0;
    }

    .hp-body-dark {
        margin-left: 0 !important; 
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
		font-size:16px;
    }

    .hp-body-light {
		font-size:16px;
    }

    #find-cafe-btn {
        margin: 10px auto; /* Centers buttons */
		font-size:14px;
    }
	
	#who-btn{
		margin-right:3px;
		font-size: 13px;
	}

    /* 3. Sticker Fixes */
    .star {
        width: 200px !important; 
        top: 220px;
        right: 0px;
    }

    .taft {
        width: 150px !important;
        top: 420px;
        left: 10px;
    }
	
	#logo-img {
		display: block;
		width: 84px;
		height:48px;
		margin-left: 10px;
		margin-bottom:0 auto;
		justify-content:center-left;
	}
	
	#footer-logo{
		display: block;
		width: 45px;
		height:26px;
		margin:0 auto;

	}
	
	#find-cafe-btn , #who-btn{
		padding:8px 20px;
		
	}
	
	footer{
		display:flex;
		flex-wrap:wrap;
		flex-direction: row;
		align-items:center;
		justify-content:space-between;
		font-family:"Roboto", sans-serif;
		background-color:#d0dfe4;
		font-size:12px;
		padding:5px;
		margin:0 auto;
		border:0px;
	}
	
	#footer-text{
		margin-left:1px;
		text-align:center-left;
		font-size:12px;
		
	}
		
	#footer-other-text{
		margin-right:1px;
		text-align:center-right;
		font-size:12px;
}