@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* { padding: 0; margin: 0; scroll-behavior: smooth;}
body { font-family: 'Roboto', sans-serif;}

#facebody { height: 120vh; width: 100%; position: relative;}

#home { height: 100vh; width: 100%; position: absolute; background: url(../media/hotel-out.jpg) center no-repeat; background-size: cover;}
.background { height: 100vh; width: 100%; position: absolute; margin: 0; background: rgba(0, 0, 0, .7); }
.logo { height: 60px; width: 60px; position: absolute; margin: 20px 0 0 40px; background: url(../media/logo-white.png) center no-repeat; background-size: contain;}

form { height: 400px; width: 475px; position: absolute; margin: calc(50vh - 135px) 0 0 calc(50% - 237.5px); color: #fff;}

#fname { height: 40px; width: 200px; position: absolute; margin: 40px 0 0 0; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px;}
.label-fname { position: absolute; margin: 0 0 0 0; font-size: 24px; font-weight: 400;}

#sname { height: 40px; width: 200px; position: absolute; margin: 40px 0 0 250px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px;}
.label-sname { position: absolute; margin: 0 0 0 250px; font-size: 24px; font-weight: 400;}

#email { height: 40px; width: 350px; position: absolute; margin: 100px 0 0 100px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px;}
#email::placeholder { color: #fff; font-size: 14px; position: absolute;}
.label-email { position: absolute; margin: 107px 0 0 0; font-size: 24px; font-weight: 400;}

#guestsnum { height: 40px; width: 210px; position: absolute; margin: 160px 0 0 240px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px; color: #fff;}
.label-guestsnum { position: absolute; margin: 167px 0 0 0; font-size: 24px; font-weight: 400;}

#dateA { height: 40px; width: 150px; position: absolute; margin: 220px 0 0 110px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px; color: #fff;}
#timeA { height: 40px; width: 140px; position: absolute; margin: 220px 0 0 310px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px; color: #fff;}
.label-dateA { position: absolute; margin: 227px 0 0 0; font-size: 24px; font-weight: 400;}

#dateD { height: 40px; width: 150px; position: absolute; margin: 280px 0 0 110px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px; color: #fff;}
#timeD { height: 40px; width: 140px; position: absolute; margin: 280px 0 0 310px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px; color: #fff;}
.label-dateD { position: absolute; margin: 287px 0 0 0; font-size: 24px; font-weight: 400;}

#submit { height: 40px; width: 100px; position: absolute; margin: 360px 0 0 375px; border: #fff 0px solid; border-radius: 10px; background: #fff; color: black; transition: all ease-in-out .5s;}
#submit:hover { border: #fff 2px solid; background: none; color: #fff;}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.wave2 { width: 100%; position: absolute; margin: calc(100vh - 284.44px) 0 0 0;}

footer { height: 20vh; width: 100%; position: absolute; margin: 100vh 0 0 0; background: #333333;}
.logo-container { height: 10vh; width: 50%; position: absolute; margin: 5vh 0 0 25%; display: flex; justify-content: space-between;}
.logo-container img { height: 10vh; position: relative;}


@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* Styles for phones in portrait orientation */
    #facebody { height: 115vh;}
    
    form { height: 450px; width: 275px; position: absolute; margin: calc(50vh - 225px) 0 0 calc(50% - 137.5px); color: #fff;}

    #fname { height: 40px; width: 100px; position: absolute; margin: 40px 0 0 0; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px;}
    .label-fname { position: absolute; margin: 0 0 0 0; font-size: 24px; font-weight: 400;}

    #sname { height: 40px; width: 100px; position: absolute; margin: 40px 0 0 150px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px;}
    .label-sname { position: absolute; margin: 0 0 0 150px; font-size: 24px; font-weight: 400;}

    #email { height: 40px; width: 150px; position: absolute; margin: 100px 0 0 100px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px;}
    #email::placeholder { color: #fff; font-size: 12px; position: absolute;}
    .label-email { position: absolute; margin: 107px 0 0 0; font-size: 24px; font-weight: 400;}

    #guestsnum { height: 40px; width: 50px; position: absolute; margin: 160px 0 0 200px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px; color: #fff;}
    .label-guestsnum { position: absolute; margin: 167px 0 0 0; font-size: 24px; font-weight: 400;}

    #dateA { height: 40px; width: 100px; position: absolute; margin: 250px 0 0 0; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px;}
    .label-dateA { position: absolute; margin: 210px 0 0 0; font-size: 24px; font-weight: 400;}
    #timeA { height: 40px; width: 100px; position: absolute; margin: 250px 0 0 150px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px; color: #fff;}

    #dateD { height: 40px; width: 100px; position: absolute; margin: 350px 0 0 0; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px;}
    .label-dateD { position: absolute; margin: 310px 0 0 0; font-size: 24px; font-weight: 400;}
    #timeD { height: 40px; width: 100px; position: absolute; margin: 350px 0 0 150px; padding: 0 10px; background: none; border: 2px solid #fff; color: #fff; border-radius: 10px; color: #fff;}

    #submit { height: 40px; width: 100px; position: absolute; margin: 410px 0 0 175px; border: #fff 0px solid; border-radius: 10px; background: #fff; color: black; transition: all ease-in-out .5s;}
    #submit:hover { border: #fff 2px solid; background: none; color: #fff;}

    footer { height: 15vh; }
    .logo-container img { height: 5vh;}
    .logo-container img { height: 5vh; position: relative;}
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
    /* Styles for phones in landscape orientation */
    .logo { margin: 20px 0 0 580px;}

    form { height: 330px; width: 600px; margin: calc(50vh - 165px) 0 0 40px}
    #submit { margin: 285px 0 0 500px;}
}

@media only screen and (min-width: 768px) and (max-width: 1370px) and (orientation: portrait) {
    /* Styles for tablets in portrait orientation */
    .logo-container { width: 80%; margin: 5vh 0 0 10%;}
}

@media only screen and (min-width: 768px) and (max-width: 1170px) and (orientation: landscape) {
    /* Styles for tablets in portrait orientation */

}