@charset "UTF-8";

/* CSS Document */

body {background-color:#fff3dc}

img {width:100%;}

html {

  scroll-behavior: smooth;

}

/*HOMEPAGE*/

div.row.header {

	position: fixed;

	z-index:100;

	background-color:#fff3dc;

	top:0	

}

	.container {

		font-size:20pt;

		margin-top:50px;

		margin-left: auto;

		margin-right: auto;

	}



.translate-y.col-2-sm a::hover{

  transform: translateY(-2px);

}

	.col-2-sm a:hover {

	  display: inline-block;

	  background-color: #F17852;

	  color: #FFFDF8;

	  font-size: 20pt;

	  padding-left: 15px;

	  padding-right:15px;

	  padding-top:3px;

	  padding-bottom:3px;

	  border-radius: 200.51px;

	  border: 5px solid #e06e4a;

	  text-decoration: none;

	  transition: transform 0.2s ease; 

	}





	.header .col-3 img {             

	  width: clamp(auto, 10vw, 100px); 

	  height: auto;

	  display: block;

	  margin-top: -2vw;  

	  margin-left: -4vw;

	}

	.CTA {

		padding-top:120px;

		padding-bottom:70px;

		margin-top:40px;

		background:url("images/whatevbr-02.png") bottom center no-repeat;

		background-size:100%

	}

.CTA img {width:77%}

	.menu a{

	  position: relative;

	  z-index: 10;

	  display: inline-block;

	  background-color: #F17852;

	  color: #FFFDF8;

	  font-size: 50pt;

	  padding-left: 50px;

	  padding-right:50px;

	  padding-top:10px;

	  padding-bottom:10px;

	  border-radius: 200.51px;

	  border: 8px solid #e06e4a;

	  text-decoration: none;

	  transition: transform 0.2s ease;

	}

	.menu a:hover {

		text-decoration-line: underline;

		color:#ffffff

	}

/*FOOTER*/

	.footer-img {

		position: relative;

		z-index:1;

		width:100%

	}

	.row.footer {

		background-size: 100%

	}



/*ABOUT US SECTION*/

.micheal {

  width: 100%;              

  height: auto;

padding-top:15px

}	

	div.row.about.us h1{

		text-align:center;

		text-shadow: 

    1px 1px 0px #fff3dc,  

    2px 2px 0px #fff3dc, 

    3px 3px 0px #fff3dc, 

    4px 4px 0px #e06e4a,

	5px 5px 0px #e06e4a; 

	}

/*MENU SECTION*/

div.row.menu h1 { margin-right:170px;

	text-shadow: 

    1px 1px 0px #fff3dc,  

    2px 2px 0px #fff3dc, 

    3px 3px 0px #fff3dc, 

    4px 4px 0px #e06e4a,

	5px 5px 0px #e06e4a;

}

div.row.menu {padding-left:60px}

div.menuitem {clear:both;}

	div.menu p.price {

		float:right; 

		width:100px; 

		color:#e06e4a; 

		font-size:20px;

	}

div.menu p.price span {font-size:20px;color:#e06e4a;font-weight:200}

.menu {

  position: relative;

}



.menu .tako {

  position: absolute;

  left: 20px;   

  top: 700px;  

  max-width: 200px;  

  z-index: 1;

  transform: rotate(-40deg)

}

.menu .porkchasu {

  position: absolute;

  left: 40px;   

  top: 100px;     

  width: 220px;  

  z-index: 1;    

}

.menu .misoramen {

  position: absolute;

  right: 80px;   

  top: 300px;     

  max-width: 200px;  

  z-index: 1;

  transform: rotate(-10deg)

}



/*CONTACT SECTION*/



.contactstuff{padding-bottom:100px; width:60%; margin:0 auto;}

div.row.contact h1 {

	text-shadow: 

    1px 1px 0px #fff3dc,  

    2px 2px 0px #fff3dc, 

    3px 3px 0px #fff3dc, 

    4px 4px 0px #e06e4a,

	5px 5px 0px #e06e4a;

}

div.row.contact p {font-weight:500; font-size:20px;padding-bottom:30px}

.contactstuff input{

	padding:10px;

	background-color:#e06e4a;

	box-shadow: 

    1px 1px 0px #fff3dc,  

    2px 2px 0px #fff3dc, 

    3px 3px 0px #fff3dc, 

    4px 4px 0px #161f49,

	6px 6px 0px #161f49;

	border-radius:10px;

	border:10px; width:27%;

		

}

input.email {margin:0 3%}

.contactstuff textarea{

	padding:10px;

	display: block;

	background-color:#e06e4a;

	box-shadow: 

    1px 1px 0px #fff3dc,  

    2px 2px 0px #fff3dc, 

    3px 3px 0px #fff3dc, 

    4px 4px 0px #161f49,

	6px 6px 0px #161f49;

	border-radius:10px;

	border:10px;

	resize:none; width:92%

}



div.row.contact a {

      display: block; 

  width: fit-content;

  margin-left: 300px;

  margin-right: auto;  

	  background-color: #161f49;

	  color: #FFFDF8;

	  font-size: 20pt;

	  padding-left: 20px;

	  padding-right:20px;

	  padding-top:5px;

	  padding-bottom:5px;

	  border-radius: 200.51px;

	  border: 4px solid #161f49;

	  text-decoration: none;

}

textarea {margin:3% 0}

::placeholder {

  color: #161f49; 

}





@media only screen and (max-width: 500px) { 

    .row.header .container {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    padding: 10px 0;

  }



  .row.header .col-2-sm {

    width: auto;

    margin: 0;

  }



  .row.header .col-2-sm a {

    font-size: 18pt;

    padding: 8px 15px;

    display: inline-block;

  }



  .tako,

  .porkchasu,

  .misoramen {

    display: none;  

  }

	.contactstuff {width:100%}

}