@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

:root {
  --basebg: #464441;
  --basecolor: #C1AF80;
  --linkcolor: #D2865B;
}

* {
    box-sizing: border-box;
}
body {
    background: var(--basebg);
    padding: 0;
    margin:0;
    font-family: "Source Code Pro", monospace;
    color: var(--basecolor);
}
a {
    color: var(--linkcolor);
}
h1 {
    font-family: "Cinzel", serif;
    font-size: 4.5rem;
    margin: 100px 0 10px 0;
    text-align: center;
}
.classy-font {
    font-family: "Cinzel", serif;
}
.text-center {
    text-align: center;
}
.main-btn {
    display: inline-block;
    width: 160px;
    padding: 10px 16px;
    border: 1px solid var(--basecolor);
    background: var(--basebg);
    border-radius: 6px;
    text-decoration: none;
    color: var(--basecolor);
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    text-align: center;

    &:hover {
        background: var(--basecolor);
        color: var(--basebg);
    }
}

.home-container {

    section.main {
        width: 100%;
        background-image: url("../images/before-ac30bUq.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom center;

        .content {
            min-height: max(100vh, 1024px);
            position: relative;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;

            .locale-switch {
                display: inline-block;
                position: absolute;
                top: 20px;
                right: 20px;
                text-align: right;
            }

            .hotel-door {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
                width: 220px;
                height: 450px;
                background-image: url("../images/entrance2-jxv40cl.png");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: bottom center;

                .main-btn {
                    position: absolute;
                    bottom: 50%;
                    left: 50%;
                    transform: translate(-50%, 50%);
                }
            }
        }
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 5.5rem;
        margin: 120px 0 10px 0;
    }
    .home-container {
        section.main {
            .content {
                .hotel-door {
                    bottom: 20px;
                    width: 260px;
                    height: 550px;
                }
            }
        }
    }
}