/**GENERAL**/
html{scroll-behavior: smooth;}
/**HEADER**/
.header{background-color:rgba(20,27,73,1);margin:0;}
iframe.mobile {display:none;}
body {font-family: "aquavit", sans-serif;}

/**HERO/HOME**/
.home{background:url("images/ramennoodles.png") bottom left no-repeat, url("images/ramenchef.png") top center no-repeat,url("images/wavypattern.png");background-size:30%, 100%, 100%;padding-bottom:90px;} 
.container a{font-family: "caraque-melted", sans-serif;
font-weight: 400;font-style: normal;font-size: 18px;color:rgba(247,228,147,1);text-decoration: none;text-align: center;padding: 20px;}
.container a:hover {color: rgba(244,200,93,1);}

.headline h1{font-family: "ekamai", sans-serif;
font-weight: 400;font-style: normal;font-size: 105px;
color: rgba(244,200,93,1); text-shadow:10px 0 0 rgba(20,27,73,1);margin-bottom: 70px}
.headline container{position: relative;display: inline-block;}
.headline container img{display: block;width: 100%;height:auto;}
.overlay-text{position: relative;bottom:65%;z-index: 1;margin-top:-65px;margin-left:20px}
.headline img{position: absolute; width:60px;z-index: 2;margin-top:10px}

.cta container{position: relative;display:inline-block;}
.cta container img{display:block;width: 100%;height:auto;}
.line2{position: relative;bottom:20%;z-index: 1;}
.cta img{position: absolute;width:2%;z-index: 2;margin-left: 296px;margin-top:-40px}
.cta h1{font-family: "ekamai", sans-serif;
font-weight: 400;font-style: normal;font-size: 60px;
color: rgba(247,228,147,1);text-shadow:6px 3px 0 rgba(20,27,73,1);}
h1.line1{padding-top: 150px;padding-left:110px;}
h1.line2{padding-top: 0px; padding-left:130px;margin-top:-50px}
h1.line2 span{color: rgba(244,200,93,1); font-family: "ekamai", sans-serif;}

h2.menubutton a{font-family: "caraque-melted", sans-serif;
font-weight: 400;font-style: normal;font-size: 40px;padding-left: 100px;}
h2.menubutton a{background:rgba(20,27,73,1);color:rgba(247,228,147,1);padding: 10px 24px;border:solid 5px rgba(186,54,48,1);text-decoration: none; margin-left: 222px; text-align:center; border-radius:12px;transition: all 0.3s ease;}
h2.menubutton a:hover {background-color: rgba(20,27,73,1); color: rgba(244,200,93,1);}

/**DIVIDER**/
.divider1 img{width:100%;max-height:100%;margin: 0px;padding:0px;}
.divider2 img{width:100%;max-height:100%;margin: 0px;padding:0px;}

/**MENU**/
.section1{background-color: rgba(20,27,73,1);}
.section1{background-image: url("images/semipattern.png");}
.section1 h1 {margin-top: 50px;font-family: "ekamai", sans-serif;font-size: 70px;
font-weight: 400;font-style: normal;color:  rgba(244,200,93,1);margin-bottom: 0px;}
.section1 h2 {margin:0;}
.section1 h2{font-family: "caraque-melted", sans-serif;font-weight: 400;font-style: normal;font-size: 30px;color:rgba(247,228,147,1);padding-bottom: 0px;}
.section1 p{font-family: aquavit, sans-serif;font-weight: 400;
font-style: normal;font-size: 13px;color:rgba(247,228,147,1);margin-top: 0px;}
h2.subhead{font-family: "caraque-melted", sans-serif;font-weight: 400;font-style: normal;font-size: 50px;color:rgba(244,200,93,1);}
h1.diningcta{font-family: "ekamai", sans-serif;font-size: 60px;font-weight: 400;font-style: normal;color:  rgba(244,200,93,1);margin-bottom: 5px;margin-top: 5px;}
h2.diningbutton{margin-bottom:150px;}
h2.diningbutton a{font-family: "caraque-melted", sans-serif;font-weight: 400;font-style: normal;font-size: 50px;margin-top:1px;background:rgba(20,27,73,1);color:rgba(247,228,147,1);padding: 5px 20px;border:solid 5px rgba(186,54,48,1);text-decoration: none; margin-left: px; text-align:center; border-radius:12px;transition: all 0.3s ease;}
h2.diningbutton a:hover {background-color: rgba(20,27,73,1); color: rgba(244,200,93,1);}

/**ABOUT**/
.section2{margin-top:-15px;}
.section2 h1{font-family: "ekamai", sans-serif;font-size: 70px;font-weight: 400;font-style: normal;color:  rgba(20,27,73,1);margin-bottom: -30px;margin-top: 50px;}
.section2 h2{font-family: "caraque-melted", sans-serif;font-weight: 400;font-style: normal;font-size: 50px;color:rgba(20,27,73,1);padding-bottom: 0px;margin-bottom: 2px;}
.section2 p{font-family: aquavit, sans-serif;font-weight: 400;
font-style: normal;font-size: 17px;color:rgba(20,27,73,1);margin-top: 0px;padding-bottom: 50px}

.section2{background: url("images/easyramen.png") top left no-repeat, url("images/semipatternr.png") rgba(186,54,48,1);}
.freshramen img{border:solid 12px rgba(244,200,93,1);border-radius: 20px;}
.freshramen{padding-top: 55px;padding-bottom: 70px;}

.wavy-line1 {padding-top:650px;margin-bottom: -350px;
  --s: 44px; /* size of the wave */
  --b: 12px; /* thickness of the line */
  --m: 1; /* curvature of the wave [0 2] */
  
  background: #e7b847;
  --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  height: calc(2*var(--R));
  width: 100%;
  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g)) 
     calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g)) 
     50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
}

.wavy-line2{padding-top:850px;margin-bottom: -450px;
  --s: 44px; /* size of the wave */
  --b: 12px; /* thickness of the line */
  --m: 1; /* curvature of the wave [0 2] */
  
  background: #e7b847;
  --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  height: calc(2*var(--R));
  width: 100%;
  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g)) 
     calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g)) 
     50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
}

/**CONTACT**/
.cform{padding-top:30px;padding-bottom:80px;}
label{color:rgba(247,228,147,1);font-family: "caraque-melted", sans-serif;font-weight: 400;font-style: normal;font-size:20px;}
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}

input[type=submit] {
  background-color: rgba(20,27,73,1);
  color: rgba(247,228,147,1);
  padding: 12px 20px;
  border: solid 5px rgba(186,54,48,1);
  border-radius: 6px;
  cursor: pointer;
  font-family: "caraque-melted", sans-serif;font-weight: 400;font-style: normal;font-size: 22px;
}

input[type=submit]:hover {
  color: rgba(244,200,93,1);
}

.section3{background-color: rgba(20,27,73,1);}
.section3{background-image: url("images/semipattern.png");margin-top:-15px;}
.section3 h1{font-family: "ekamai", sans-serif;font-size: 70px;font-weight: 400;font-style: normal;color:rgba(244,200,93,1);margin-bottom:2px;margin-top: 50px;}
.section3 h2{font-family: "caraque-melted", sans-serif;font-weight: 400;font-style: normal;font-size: 30px;color:rgba(247,228,147,1);}
.section3 p{font-family: aquavit, sans-serif;font-weight: 400;
font-style: normal;font-size: 15px;color:rgba(247,228,147,1);margin-top: 0px;}
iframe{padding-top: 110px;}

/**FOOTER**/
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: url("images/wavypattern2.png");
  color: rgba(20,27,73,1);
  font-family: aquavit, sans-serif;font-weight: 400;
  font-style: normal;font-size: 15px;
  text-align: center;
}

/**MOBILE DISPLAY**/
@media screen and (max-width: 768px)
{
	/**HOME**/
	.home{background:url("images/ramennoodles.png") bottom left no-repeat, url("images/ramenchef.png") top center no-repeat,url("images/wavypattern.png");background-size:40%, 100%;padding-bottom:20px;}
	.headline h1{font-size: 40px;margin-top: 60px;margin-bottom: 8px;}
	h1.line1{font-size: 30px;margin-top:-60px;margin-left:-60px;margin-bottom:40px}
	h1.line2{font-size: 29px;margin-left:-67px;margin-bottom: -8px;}
	h2.menubutton a{font-size:20px;margin-left:79px;}
	.headline img{position: absolute; width:25px;z-index: 2;margin-top:1px;margin-left:5px;}
	.cta img{position: absolute;width:3%;z-index: 2;margin-left: 145px;margin-top:-45px;}
	
	/**ABOUT**/
	.about{display:flex; flex-direction:column;}
	.about img{width:100%}
	.owner{order: 1;width:200%}
	.ownerbio{order: 2;width:200%}
	.freshramen{order: 1;width:200%;}
	.ethics{order: 2;width: 200%;}
	.wavy-line1{display:none;}
	.wavy-line2{display:none;}
	
	
	.contact{display:flex; flex-direction:column;width: 200%;}
	
}