/*avoid extra whitespace */
html, body {
overflow-x: hidden;
}
/* css reset */
*{
margin: 0;
padding: 0;
color: #000;
}
/*laptop */
@media screen and (min-width: 1366px){
/* canvas */
main#canvas {
width: 1366px;
height: auto;
font-family: "Comic Sans MS";
background-color: lightblue;
overflow-y: hidden;
overflow-x: hidden;
}
/* Header starts here */
header#header {
height: 25%;
width: 100%;
}
article#logo {
height: 100%;
width: 30%;
float: left;
}
article#list {
height: 100%;
width: 70%;
float: left;
}
/* html tags for header section*/
ul.horizontal-list {
display: inline;
}
ul.horizontal-list li {
display: inline;
font-size: 250%;
}
nav.wrapper {
height: 100%;
width: 100%;
padding-top: 3%;
padding-left: 10%;
}
a.horizontalList {
text-decoration: none;
color: red;
}
img#restLogo {
height: 100%;
width: 60%;
}
/* Header ends here */
/* Content starts here */
section#content{
padding-top: 2%;
height: 200%;
width: 100%;
}
article#revs {
margin-top: 3%;
height: 50%;
width: 100%;
}
article#rev1, article#rev2 {
height: 50%;
width: 100%;
}
article.picFood {
height: 100%;
width: 40%;
float: left;
}
article.textRev {
height: 100%;
width: 60%;
float: left;
vertical-align: center;
}
article#reviewForm {
width: 100%;
height: 60%;
}
img#foodPic{
height: 80%;
width: 50%;
padding-left: 20%;
}
img#foodPic2 {
height: 80%;
width: 50%;
padding-left: 20%;
}
h2.subtitles {
text-align: center;
padding-top: 3%;
font-size: 250%;
}
h2#question {
padding-top: 3%;
padding-left: 2%;
font-size: 250%;
}
p.bounds{
padding-top: 10%;
width: 40%;
height: 40%;
font-size: 150%;
text-align: center;
}
form {
height: 100%;
width: 100%;
}
label.titleForm {
padding-left: 5%;
font-size: 200%;
}
input#fullName, select#menuOptions {
width: 20%;
height: 3%;
margin-left: 8%;
margin-top: 1%;
font-size: 100%;
}
p#selector {
padding-top: 3%;
}
p#nameText {
padding-top: 2%;
}
textarea#comment {
width: 60%;
height: 20%;
margin-left: 8%;
margin-top: 1%;
font-size: 150%;
}
input#button {
height: 3%;
width: 6%;
margin-top: 0.5%;
margin-left: 62%;
}
/* info starts here */
footer#info {
height: 25%;
width: 100%;
background-color: black;
}
article#location {
width: 50%;
height: 100%;
float: left;
}
article#socialMedia{
width: 50%;
height: 100%;
float: left;
}
.white{
color: white;
}
h2#addressWord {
padding-top: 5%;
padding-left: 30%;
font-size: 180%;
}
p#address {
padding-left: 35%;
font-size: 150%;
}
a {
text-decoration: none;
}
img#ig{
width: 10%;
height: 20%;
}
#hamburger-button {
display: none;
}
.tabletPhone {
display: none;
}
}
/*tablet */
@media screen and (min-width: 767px) and (max-width: 1365px) {
/* canvas */
main#canvas {
width: 768px;
height: auto;
font-family: "Comic Sans MS";
background-color: lightblue;
}
/* Header starts here */
header#header {
height: 25%;
width: 100%;
}
article#logo {
height: 100%;
width: 100%;
}
img#restLogo {
height: 80%;
width: 30%;
padding-left: 30%;
padding-top: 5%;
}
button#hamburger-button {
position: fixed;
font-size: 4em;
z-index: 1;
line-height: 1em;
padding: 0.1em 0.2em 0.2em 0.2em;
border: 0.1em solid black;
border-radius: 10%;
margin: 0.2em;
}
button#hamburger-button:hover {
color: black;
background-color: rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.5);
}
nav.tabletPhone {
position: fixed;
top: 0;
font-size: 3em;
padding: 20vh 5vw 0 5vw;
background-color: rgba(255,255,255,0.9);
left: -60vw;
transition: transform 1s;
}
.slide-the-drawer {
transform: translateX(60vw);
}
nav.tabletPhone ul {
list-style-type: none;
}
nav.tabletPhone ul li a {
text-decoration: none;
color: black;
}
nav.tabletPhone ul li a:hover {
text-decoration: none;
}
/* Content starts here */
section#content{
padding-top: 2%;
height: 100%;
width: 100%;
}
article#revs {
margin-top: 3%;
height: 50%;
width: 100%;
}
article#rev1, article#rev2 {
height: 55%;
width: 100%;
}
article.picFood {
height: 80%;
width: 40%;
float: left;
}
article.textRev {
height: 80%;
width: 60%;
float: left;
vertical-align: center;
}
article#reviewForm {
width: 100%;
height: 60%;
}
img#foodPic{
height: 80%;
width: 50%;
padding-left: 20%;
}
img#foodPic2 {
height: 80%;
width: 50%;
padding-left: 20%;
}
h2.subtitles {
text-align: center;
padding-top: 3%;
font-size: 150%;
}
h2#question {
padding-left: 2%;
font-size: 150%;
}
p.bounds{
padding-top: 2%;
width: 40%;
height: 40%;
font-size: 100%;
text-align: center;
}
form {
height: 100%;
width: 100%;
}
label.titleForm {
padding-left: 5%;
font-size: 150%;
}
input#fullName, select#menuOptions {
width: 30%;
height: 5%;
margin-left: 8%;
margin-top: 1%;
font-size: 80%;
}
p#selector {
padding-top: 1%;
}
p#nameText {
padding-top: 2%;
}
textarea#comment {
width: 60%;
height: 20%;
margin-left: 8%;
margin-top: 1%;
font-size: 150%;
}
input#button {
height: 5%;
width: 6%;
margin-top: 0.5%;
margin-left: 62%;
}
/* pc list setisplay to none; */
.horizontal-list {
display: none;
}
.wrapper{
display: none;
}
article#list {
display: none;
}
footer#info {
display: none;
}
}
/*phablet */
@media screen and (min-width: 480px) and (max-width: 766px){
/* canvas */
main#canvas {
width: 480px;
height: auto;
font-family: "Comic Sans MS";
background-color: lightblue;
}
/* Header starts here */
header#header {
height: 25%;
width: 100%;
}
article#logo {
height: 100%;
width: 100%;
}
img#restLogo {
height: 80%;
width: 40%;
padding-left: 25%;
padding-top: 5%;
}
button#hamburger-button {
position: fixed;
font-size: 2em;
z-index: 1;
line-height: 1em;
padding: 0.1em 0.2em 0.2em 0.2em;
border: 0.1em solid black;
border-radius: 10%;
margin: 0.2em;
}
button#hamburger-button:hover {
color: black;
background-color: rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.5);
}
nav.tabletPhone {
position: fixed;
top: 0;
font-size: 2em;
padding: 20vh 5vw 0 5vw;
background-color: rgba(255,255,255,0.9);
left: -80vw;
transition: transform 1s;
}
.slide-the-drawer {
transform: translateX(80vw);
}
nav.tabletPhone ul {
list-style-type: none;
}
nav.tabletPhone ul li a {
text-decoration: none;
color: black;
}
nav.tabletPhone ul li a:hover {
text-decoration: none;
}
/* Content starts here */
section#content{
padding-top: 2%;
height: 100%;
width: 100%;
}
article#revs {
margin-top: 3%;
height: 50%;
width: 100%;
}
article#rev1, article#rev2 {
height: 50%;
width: 100%;
}
article.picFood {
height: 70%;
width: 40%;
float: left;
}
article.textRev {
height: 100%;
width: 60%;
float: left;
vertical-align: center;
}
article#reviewForm {
width: 100%;
height: 60%;
}
img#foodPic{
height: 80%;
width: 50%;
padding-left: 20%;
}
img#foodPic2 {
height: 80%;
width: 50%;
padding-left: 20%;
}
h2.subtitles {
text-align: center;
padding-top: 3%;
font-size: 100%;
}
h2#question {
padding-top: 3%;
padding-left: 2%;
font-size: 80%;
}
p.bounds{
padding-top: 2%;
width: 40%;
height: 40%;
font-size: 60%;
text-align: justify center;
}
form {
height: 100%;
width: 100%;
}
label.titleForm {
padding-left: 1%;
font-size: 80%;
}
input#fullName, select#menuOptions {
width: 40%;
height: 5%;
margin-left: 8%;
margin-top: 1%;
font-size: 80%;
}
p#selector {
padding-top: 2%;
}
p#nameText {
padding-top: 2%;
}
textarea#comment {
width: 70%;
height: 30%;
margin-left: 8%;
margin-top: 1%;
font-size: 100%;
}
input#button {
height: 5%;
width: 10%;
margin-top: 0.5%;
margin-left: 68%;
}
/* pc list setisplay to none; */
.horizontal-list {
display: none;
}
.wrapper{
display: none;
}
article#list {
display: none;
}
footer#info {
display: none;
}
}