/* Variables */
:root{
    /* Fonts */
    --Font-Inter: 'Inter';
    --Font-Inknut: "Inknut Antiqua";

    /* Colors */
    --Color-White: white;
    --Color-Black: black;
    --Color-light-black: #3D3D3D;
    --Color-gold: #FFC692;
    --Color-light-gold: #ffe7da;
    --Color-light-yellow: #FFF4DE;
    --Color-brown: #D68842;
    --Color-Red: #CB3100;

    /* Margins */
    --Margin-small: 90px;
    --Margin-big: 180px;

    /* Section Width */
    --Section-Width-big: 880px;
    --Section-Width-medium: 450px;
    --Section-Width-small: 300px;

    /* Font Sizes */
    --FontSize-Title-large: 48px;
    --FontSize-Title: 40px;
    --FontSize-Title-medium: 32px;
    --FontSize-Title-small: 24px;
    --FontSize-Title-tiny: 20px;
    --FontSize-p-large: 24px;
    --FontSize-p: 18px;
    --FontSize-p-small: 14px;
    --FontSize-buttom: 24px;
}

/* General */
* {
    border: 0px solid var(--Color-Black);
    font-family: var(--Font-Inknut), serif, var(--Font-Inter);
}

html, body {
    margin: 0px;
    padding: 0px;
    scroll-behavior: smooth;
}


.backgroundIMG{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.bold{
    font-weight:bolder;
}

.margin{
    margin: 60px;
}

.medium{
    font-weight:normal;
}

.light{
    font-family: var(--Font-Inter);
    font-weight:lighter;
}

.italic{
    font-family: var(--Font-Inter);
    color: var(--Color-White);
}

.Inter{
    font-family: var(--Font-Inter);
}

.link{
    text-decoration: none;
    color: var(--Color-gold);
}

.link:hover{
    color: var(--Color-light-gold);
}

/* Footer */
.Footer{
    position: relative;
    width: 100%;
    height: 350px;
    background-color: var(--Color-brown);
    color: var(--Color-White);
    overflow:hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.Footer .logo{
    position: relative;
    top: -30px;
    margin-left: var(--Margin-small);
}

.Footer .navbar{
    position: relative;
    height: 100%;
    z-index: 2;
    margin-right: var(--Margin-small);
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 0px;
}
.Footer .navbar .nav-list{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    width: 1000px;
    text-align: center;
    margin: 0px;
    padding: 0px;
}

.Footer .navbar .nav-list .list-1st{
    width: 200px;
}

.Footer .navbar .nav-list .list-mid{
    margin-top: 16px;
    width: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-between ;
}

.Footer .navbar .nav-list li{
    width: 80%;
    margin-right: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Footer .navbar .nav-list li h1{
    font-size: var(--FontSize-Title-tiny);
    margin-bottom: 20px; 
    margin-top: 20px;
}

.Footer .text-container img{
    margin-right: 5px;
    margin-top: 20px;
}
.Footer .icons{
    margin-top: 30px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.icon{
    cursor: pointer;
    margin: 5px;
}

/* Responsive */
@media (max-width: 1350px){
    .Footer{
        flex-direction: column !important;
        height: 1100px !important;
    }

    .Footer .logo{
        margin-top: 50px;
        margin-left: 0px !important;
        width: 200px !important;
    }

    .Footer .text-container .nav-list li{
        margin-right: 0px !important;
    }

    .Footer .navbar{
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: 0px;
        margin-right: 0px !important;
        height: 100%;
        width: 100%;
    }
    .Footer .navbar .nav-list{
        text-align: center;
        display: flex;
        flex-direction: column !important;
        justify-content: space-between;
        align-items: center;
        list-style: none;
        width: 100% !important;
        height: 450px;
        margin-top: -460px;
    }

    .Footer .navbar .nav-list .list-1st{
        width: 100% !important;
        text-align: center;
    }

    .Footer .navbar .nav-list .list-mid{
        display: flex;
        flex-direction: row;
        justify-content: space-between ;
    }
}

@media (max-width: 1150px){
    .S04_Menu .menu-container .image-container .text-container h3 {
        font-size: var(--FontSize-p) !important;
    }
}

@media (max-width: 925px){
    .S06_Reservation{
        height: 1100px !important;
        overflow: hidden;
    }
    .S06_Reservation .content-container{
        flex-direction: column-reverse !important;
        justify-content: space-between;
    }
    .S06_Reservation .content-container .text-container{
        position: relative !important;
        right: 0px !important;
        margin-top: var(--Margin-small);
        text-align: center !important;
    }
    .S06_Reservation .content-container .text-container h1{
        font-size: var(--FontSize-Title) !important;
    }
    .S06_Reservation .content-container img{
        position: relative;
        left: 0px !important;
        width: 340px !important;
        margin-bottom: var(--Margin-small);

        margin-left: 40px!important;
        margin-right: 40px!important;
    }
    .S06_Reservation .content-container .text-container .ReservationBtn{
        margin-top: 0px !important;
        margin-bottom: 15px !important;
    }
    
    .S08_Contact{
        height: 1100px !important;
        overflow: hidden;
    }
    .S08_Contact .content-container{
        flex-direction: column-reverse !important;
        justify-content: space-between;
    }

    .S08_Contact .content-container img{
        right: 0px !important;
        width: 340px !important;
        margin-bottom: var(--Margin-small);
    }

    .S08_Contact .content-container .text-container{
        position: relative !important;
        left: 0px !important;
        text-align: center !important;
        margin-top: var(--Margin-small);
    }
    .S08_Contact .content-container .text-container h1{
        font-size: var(--FontSize-Title) !important;
    }
    .S08_Contact .content-container .text-container .icons{
        justify-content: center;
    }
    .S08_Contact .content-container .text-container .icons .icon img{
        width: auto !important;
    }

    .S11_StoryOf .text-container{
        width: 100% !important;
        flex-direction: column !important;
        margin-left: 50px;
        margin-right: 50px;
    }


    .S11_StoryOf .text-container h1{
        width: 100% !important;
        margin-left: 0px !important;
        font-size: var(--FontSize-Title-small) !important;
        margin-bottom: 20px !important;
    }
    
    .S11_StoryOf .text-container p{
        font-size: var(--FontSize-p-small) !important;
        line-height: 24px !important;
        width: 100% !important;
        margin-right: 0px !important;
    }
    #logo{
        width: 100px !important;
        top: 50px !important;
        left: 50px !important;
    }
}
@media (max-width: 800px){
    .S04_Menu .all-container .text-container h1{
        font-size: var(--FontSize-Title-medium);
        line-height: 40px;
    }
    .S04_Menu .all-container .text-container h3{
        font-size: var(--FontSize-p);
        line-height: 30px;
    }

    .S04_Menu .all-container .text-container p{
        font-size: var(--FontSize-p-small);
        line-height: 160%;
    }
}
@media (max-width: 720px){
    .S01_Main .navbar{
        display: none !important;
    }
    #menulist-button{
        display: block !important;
    }
    .menu{
        right: 50px !important;
    }
    #menu-list .navbar .nav-list li .ReservationBtn{
        font-size: var(--FontSize-p) !important;
    }
    .S02_About h1{
        font-size: var(--FontSize-p) !important;
        line-height: 130%;
    }
    .S02_About  .nav-list li a {
        font-size: var(--FontSize-p) !important;
    }
    .S02_About .nav-list li .ReservationBtn{
        margin-top: 100px !important;
    }
    .S04_Menu{
        height: 1750px !important;
    }

    .S04_Menu .menu-container{
        height: 80% !important;
        flex-direction: column !important;
        margin-top: 200px !important;
        margin-bottom: 150px !important;
    }
    .S04_Menu .menu-container .image-container .menu-image{
        width: 350px !important;
    }

    .S04_Menu .menu-container .image-container .text-container h3 {
        font-size: var(--FontSize-p-large) !important;
    }

    .S04_Menu .menu-container a{
        width: 100% !important;
    }


    .S09_Definition .text-container{
        text-align: center;
    }
    .S09_Definition .text-container .word{
        margin-bottom: 20px;
    }
    .S09_Definition .text-container p{
        margin-bottom: 20px;
    }
    .S11_StoryOf .text-container{
        text-align: center;
    }

}
@media (max-width: 480px){
    .S01_Main{
        height: 100vh !important;
    }
    .S10_Photo04{
        height: 740px !important;
    }
    .Footer{
        height: 1400px !important;
    }
    .Footer .navbar .nav-list .list-mid{
        flex-direction: column !important;
        margin-bottom: 25px !important;
    }
    .Footer .navbar{
        margin-bottom: 200px;
    }
    .Footer .navbar .nav-list{
        height: 100% !important;
        margin-top: 0px !important;
    }
}
@media (max-width: 460px){
    .S04_Menu .menu-container a{
        width: 90% !important;
    }
    .S04_Menu .menu-container .image-container .menu-image{
        width: 100% !important;
    }
}

/* Home */
/* Section01 */
.S01_Main{
    position: relative;
    width: 100%;
    height: var(--Section-Width-big);
}

.menu{
    position: absolute;
    z-index: 3;
    top: 50px;
    right: var(--Margin-small);
}

.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    z-index: 2;
    top: 50px;
    right: 40px;
}

.nav-list{
    display: flex;
    list-style: none;
}

.nav-list li {
    margin-right: 40px;
}

.nav-list li a {
    text-decoration: none;
    color: var(--Color-gold);
    font-size: var(--FontSize-Title-tiny);
    font-weight: bold;
}

.S01_Main .nav-list li .ReservationBtn{
    font-size: var(--FontSize-buttom);
    padding: 8px 30px;
    color: var(--Color-light-black);
    background-color: var(--Color-brown);
    font-weight: bold;
}

.nav-list li a:hover{
    color: var(--Color-White);
    transition: 300ms;
}

.S01_Main .nav-list li .ReservationBtn:hover{
    color: var(--Color-White);
    background-color: var(--Color-gold);
    transition: 500ms;
}

.logo-container{
    position: absolute;
}

#logo {
    position: absolute;
    left: var(--Margin-small);
    top: 30px;
    width: 161px;
    z-index: 2;
}

.icon-down{
    position: absolute;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 90%;
    opacity: 0.3;
}

.icon-down:hover{
    opacity: 1;
    transition: 300ms;
    top: 91%;
}

/* drop-down-list */
#menu-list{
    display: block;
    position: absolute;
    top: 0px;
    overflow: hidden;
    width: 100%;
    height: var(--Section-Width-big);
    background-color: var(--Color-light-gold);
    z-index: 3;
}

#menu-list .navbar{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0px;
    right: 0px;
}

#menu-list .navbar .nav-list{
    height: 300px;
    display: flex;
    flex-direction: column;
    list-style: none;
    text-align: center;
    justify-content: space-around;
    color: var(--Color-Red);
}

#menu-list .navbar .nav-list .icon-list{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 20px;
}

#menu-list .navbar .nav-list .icon-list .icons{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#menu-list .navbar .nav-list li a {
    text-decoration: none;
    color: var(--Color-brown);
    font-size: var(--FontSize-Title-medium);
    font-weight: bold;
}

#menu-list .navbar .nav-list li .ReservationBtn{
    position: relative;
    top: 60px;
    padding: 8px 30px;
    color: var(--Color-White);
    background-color: var(--Color-brown);
    font-weight: bold;
    font-size: var(--FontSize-buttom);
}

#menu-list .navbar .nav-list li .ReservationBtn:hover{
    background-color: var(--Color-gold);
    transition: 500ms;
}

#menulist-button{
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    cursor: pointer;
}

#close-button{
    cursor: pointer;
}

.visible{
    visibility: visible;
    opacity: 1;
    transition: 750ms;
}

.hidden{
    visibility: hidden;
    opacity: 0;
    transition: 750ms;
}


/* Section02 */
.S02_About{
    position: relative;
    width: 100%;
    height: var(--Section-Width-small);
    background-color: var(--Color-light-yellow);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.S02_About h1{
    font-family: var(--Font-Inter), sans-serif;
    font-weight: bold;
    font-size: var(--FontSize-Title-medium);
    text-align: center;
    color: var(--Color-Red);
    margin: 0px;
    margin-top: 20px;
    line-height: 130%;
}

.S02_About .nav-list{
    margin-top: 20px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.S02_About  .nav-list li a {
    text-decoration: none;
    color: var(--Color-gold);
    font-size: var(--FontSize-buttom);
    font-weight: bold;
}

.S02_About .nav-list li .ReservationBtn{
    padding: 4px 30px;
    color: var(--Color-light-black);
    background-color: var(--Color-brown);
    font-weight: bold;
}

.S02_About .nav-list li .ReservationBtn:hover{
    background-color: var(--Color-gold);
    transition: 500ms;
}

/* Section03 */
.S03_Photo01{
    position: relative;
    width: 100%;
    height: var(--Section-Width-medium);
}

/* Section04 */
.S04_Menu{
    position: relative;
    width: 100%;
    height: var(--Section-Width-big);
    display: flex;
    justify-content: center;
}

.S04_Menu .title{
    color: var(--Color-gold);
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: var(--FontSize-Title);
    font-weight: bold;
    margin-top: var(--Margin-small);
    width: 274px;
    text-align: center;
}

.S04_Menu .menu-container{
    z-index: 2;
    width: 85%;
    height: 100%;
    top: 20px;
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.S04_Menu .menu-container a{
    width: 30%;
}

.S04_Menu .menu-container .image-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.S04_Menu .menu-container a:hover{
    text-decoration: none;
}
.S04_Menu .menu-container .image-container .menu-image{
    width: 100%;
}

.S04_Menu .menu-container .image-container .text-container {
    color: var(--Color-gold);
    width: 100%;
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.S04_Menu .menu-container .image-container .text-container h3 {
    font-size: var(--FontSize-p-large);
}
.S04_Menu .menu-container .image-container .text-container img{
    margin-right: 12px;
    margin-bottom: 8px;
}

/* transition */
.menu-image:hover{
    box-shadow: 0 0 50px rgb(255, 218, 181);
    transform: scale(102%);
    transition: 500ms;
}

.menu-image:hover + .text-container{
  transform: scale(110%);
  text-shadow: 0 0 20px ;
  transition: 500ms;
}

/* Section05 */
.S05_Photo02{
    position: relative;
    width: 100%;
    height: var(--Section-Width-medium);
}

/* Section06 */
.S06_Reservation{
    position: relative;
    width: 100%;
    height: var(--Section-Width-big);
    display: flex;
    justify-content: center;
}

.S06_Reservation .content-container{
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.S06_Reservation .content-container img{
    position: relative;
    left: var(--Margin-big);
    width: 30%;
}

.S06_Reservation .content-container .text-container{
    position: absolute;
    right: var(--Margin-big);
    text-align: right;
    color: var(--Color-gold);
    font-family: var(--Font-Inknut);
    translate: 0px -20px;
}

.S06_Reservation .content-container .text-container h1{
    font-size: var(--FontSize-Title-large);
    font-weight: bold;
    margin-bottom: 30px;
    margin-top: 0px;
    padding-top: 0px;
}

.S06_Reservation .content-container .text-container p{
    font-size: var(--FontSize-p);
    margin-bottom: 60px;
}

.S06_Reservation .content-container .text-container .ReservationBtn{
    font-size: var(--FontSize-buttom);
    padding: 4px 30px;
    color: var(--Color-light-black);
    background-color: var(--Color-brown);
    font-weight: bold;
    text-decoration: none;
    
}
.S06_Reservation .content-container .text-container .ReservationBtn:hover{
    background-color: var(--Color-gold);
    transition: 500ms;
}
/* Section07 */
.S07_Photo03{
    position: relative;
    width: 100%;
    height: var(--Section-Width-medium);
}

/* Section08 */
.S08_Contact{
    position: relative;
    width: 100%;
    height: var(--Section-Width-big);
}
.S08_Contact .content-container{
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.S08_Contact .content-container img{
    position: relative;
    right: var(--Margin-big);
    width: 30%;
}

.S08_Contact .content-container .text-container{
    position: absolute;
    left: var(--Margin-big);
    text-align: left;
    color: var(--Color-gold);
    font-family: var(--Font-Inknut);
    translate: 0px -20px;
}

.S08_Contact .content-container .text-container h1{
    font-size: var(--FontSize-Title-large);
    font-weight: bold;
    margin-bottom: 0px;
    margin-top: 0px;
}

.S08_Contact .content-container .text-container p{
    font-size: var(--FontSize-p);
    margin-bottom: 30px;
}

.S08_Contact .content-container .text-container .icons{
    z-index: 3;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.S08_Contact .content-container .text-container .icons .icon img{
    right: auto;
    width: auto;
}

/* Section09 */
.S09_Definition{
    position: relative;
    width: 100%;
    height: var(--Section-Width-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.S09_Definition .text-container{
    width: 100%; /* width: auto */
    color: var(--Color-gold);
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.S09_Definition .text-container .margin{
    margin-left: var(--Margin-small);
    margin-right: var(--Margin-small);
}

.S09_Definition h3{
    font-family: var(--Font-Inter);
    font-size: var(--FontSize-p-large);
    margin-top: 0px;
    margin-bottom: 5px;
}

.S09_Definition p{
    font-family: var(--Font-Inter);
    font-size: var(--FontSize-p);
    margin:0px
}

/* Section10 */
.S10_Photo04{
    position: relative;
    width: 100%;
    height: var(--Section-Width-big);
}


/* Section11 */
.S11_StoryOf{
    position: relative;
    width: 100%;
    height: var(--Section-Width-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.S11_StoryOf .text-container{
    width: 100%;
    z-index: 2;
    color: var(--Color-gold);
    display: flex;
    flex-direction: row; /* flex-direction: column */
    justify-content: space-between;
}

.S11_StoryOf .text-container h1{
    margin-left: var(--Margin-small);
    font-size: var(--FontSize-Title-medium);
}

.S11_StoryOf .text-container p{
    width: 830px;
    margin-right: var(--Margin-small);
    font-size: var(--FontSize-p);
    font-weight: lighter;
    line-height: 40px;
}