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


 @import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Just+Another+Hand&display=swap');



body {
		background-color: #F9EED9;
}

a:href{
	color: rosybrown;
}
a:link{
	color: rosybrown;
}

a:hover {
  color: sandybrown;
}

a:active {
  color: brown;
}



p{
	color: #6F4E37;
	font-weight: bolder;
	font-family: 'Amatic SC';
	font-size: 1.375em; /* 22/16*/
}

h1{
	color:#80461B;
	text-decoration: underline;
	font-family: 'Just Another Hand';
}

h2{
	color: #DAA06D;
	font-family: 'Just Another Hand';
}

h3 {
	color: #D27D2D;
	font-weight: bolder;
	font-family: 'Just Another Hand';
	font-size: 4.6875em; /* 75/16*/
}

header {
	
	width: 80%;
	padding: 12px 0;
}
nav {
	
}

label{
	color:#6F4E37;
}


.boba{ 
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-color:antiquewhite;
}

.boba img {
	
	  width: 50%;
}

.boba h1{
	color:#80461B;
	text-decoration: underline;
	font-family: 'Just Another Hand';
	background-color: #F0B3B4;
}

.carousel-small{
	  width: 550px; 
  height:550px;
	margin: 0 auto;
}

.feature-box{
	margin-top: 5.208%; /*50px/960 */
	background-color: #F9EED9;
}

.feature-box h1{
	color:#80461B;
	text-decoration: underline;
	font-family: 'Just Another Hand';
}

.feature-box h3{
	margin-top: 5.208%;/*50px / 960 */
	color: #D27D2D;
	font-weight: bolder;
	font-family: 'Just Another Hand';
	font-size: 3.125em; /* 75/16*/
}

.feature-box p{
	color: #6F4E37;
	font-family: 'Amatic SC';
	font-size: 1.375em; /* 22/16*/
}

.center{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.center h1{
	color:#80461B;
	text-decoration: underline;
	font-family: 'Just Another Hand';
	font-size: 6.25em; /* 100/16*/
}
.center h2{
	color: #DAA06D;
	font-family: 'Just Another Hand';
}
.center h3{
		color: #D27D2D;
	font-weight: bolder;
	font-family: 'Just Another Hand';
	font-size: 4.6875em; /* 75/16*/
}
.big img{
	width: 25%;
	height: 550px;
}
.big img:hover{
	transform: scale(1.25);
	transition:scale, 5s;
}

.contact-box li{
	color: #6F4E37;
	font-family: 'Amatic SC';
}

.contact-box{
	
	
	text-align: center;
	background-color: #F9EED9;
	margin-bottom: 2.60416667%; /*  25px /960  */
	margin-top: 2.60416667%; /*  25px /960  */
	
}

.contact-box h1{
	color:#80461B;
	text-decoration: underline;
	font-family: 'Just Another Hand';
}

.contact-box h3{ 
		color:#825530;
		font-family: 'Just Another Hand';
		font-weight: bold;
	font-size: 4.6875em; /* 75/16*/
}
.contact-box p{
		color: #6F4E37;
	font-weight: bolder;
	font-family: 'Amatic SC';
	font-size: 1.375em; /* 22/16*/
}

.contact-box h2{
	color: #DAA06D;
	font-family: 'Just Another Hand';
}

#banner{
	width: 100%;
	height: 525px;
	background: url("images/male-barista-holding-terminal-while-customer-paying-with-card.jpg");
	background-repeat: no-repeat;
	background-size: cover;
    position: relative;
    text-align: center;
}


footer {
	background-color: #9A7B4F;

}

#cafe-content {
	width: 80%; /* 960= 80% */
	display: flex;
	margin: 0 auto;
	justify-content: space-between;
	flex-wrap: wrap;
}

#cafe-content img {
     width: 100%; 
	margin-bottom: 14px;
}

#cafe-content h3{
	margin-top: 10.4166667%;/*100px / 960 */
	color: 	#954535;
	font-weight: bolder;
	text-decoration: underline;
	font-family: 'Just Another Hand';
	font-size: 4.6875em; /* 75/16*/
}

.category {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.category-tea {
		width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	
}


.menu-content {
	width: 28%;
	margin: 20px 1%;
	padding: 14px;
	background-color: #C2A585;
	border-radius: 10px;
}

.menu-content img {
	width: 100%;
}

.menu-content p {
	margin-bottom: 4px;
	margin-top: 10px;
	font-family: 'Amatic SC';
	font-weight: bolder;
	font-size: 1.375em; /* 22/16*/
	justify-content: center;
}

.menu-content h {
	font-size: 1.25em;
	font-family: 'Just Another Hand';
    font-weight: 700;
	color: #034001;
}

.menu-content h {
	font-size: 1.125em;
	font-family: 'Just Another Hand';
    font-weight: 300;
	color: #034001;
	margin-top: 10px;
	
}

.menu-nav {
	background-color: #C2A585;
	margin-left: auto;
	margin-right:auto;
}

.menu-nav p{
	font-family: 'Just Another Hand';
	font-size: 3.125em; /*50/16 */
       text-align:center;
	   margin-bottom: 0;
    display: inline-block;
   background-color: #C2A585;
   color: #DAA06D;
}








@media only screen and (max-width: 1024px) { 
	
		h1 {
		font-size: 1.5em; /*24/16*/
	}
	
	h2 {
		font-size: 1.25em; /*16/16*/
	}
	
	h3 {
		font-size: 1em; /*16/16*/
	}
	.carousel-small {
		width: 90%;/* 550px / 1024 */
		height: 100%;
	}
		#banner{
		height: 300px;
	}
	
	.contact-box{
		margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-color: #F9EED9;
	margin-bottom: 2.44140625%; /*  25px /1024 */
	margin-top: 2.44140625%; /*  25px /1024 */
		
}
	.big img{
		
		width: 50%;
		height:auto;
	}
	
@media only all and (max-width: 480px) { 
	
	.carousel-small {
		width: 75%;
		height: 100%;
	}
	
	#banner {
		height: 175px;
	}
		.contact-box{
		margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-color: #F9EED9;
	margin-bottom: 5.20833333; /*  25px /480 */
	margin-top: 5.20833333; /*  25px /480 */
}
	.center img{
		width: 90%;
	}
	.boba img{
		width: 90%;
		
	}
	.big img{
		
		width: 50%;
		height:auto;
	}
}