html {
    margin: 0;
    padding: 0;
}

body {
    background-color: #00A59B;
    margin: auto;
}

.container {
    margin: auto;
    width: 80%;
    text-align: center;
    position: relative;
    height: 100vh;
}

.text {
    width: 30%;
    text-align: center;
    z-index: 0;
    position: absolute;
    background-color: white;
    padding-bottom: 3rem;
    padding-top: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    top: 30%;
    box-shadow: 7px 7px 10px #27414C;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.whatsapp-button {
    display: inline-block;
    background-color: #25d366;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 20px;
    transition: all 0.2s;
}

    .whatsapp-button:hover {
        background-color: #00A59B;
    }

h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    text-align: center;
    margin: auto;
    color: #1C75BA;
    letter-spacing: .10rem;
    padding-bottom: .5rem;
}

h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
    margin: auto;
    color: #395D6D;
    letter-spacing: .10rem;
    padding-bottom: 2rem;
}

h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: .8rem;
    text-align: center;
    margin: auto;
    letter-spacing: .10rem;
}
a {
    text-decoration-line: none;
    color: #1C75BA;
}



.button {
    width: 6rem;
    border: 3px solid #1C75BA;
    margin: auto;
    text-align: center;
    padding: .5rem;
    color: #1C75BA;
}

#home:hover {
    background-color: #1C75BA;
    color: white;  
    cursor:pointer;
   
}
.button:hover a {
    text-decoration: none;
    color: white;
}

svg {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}


#hotel-top {
    -webkit-animation: fall-8 8s ease-in infinite;
    opacity: .5;
}


#left-martini-page {
    -webkit-animation: fall-8 8s ease-in infinite;
    opacity: .5;
}

#top-spa {
    -webkit-animation: fall-7 7s ease-in infinite;
    .opacity:.75;
}

#chemistry-big {
    -webkit-animation: fall-12 12s ease-in infinite;
}

#comp-big {
    -webkit-animation: fall-13 13s ease-in infinite;
    animation: fall-13 13s ease-in infinite;
    opacity: .5;
}

#martini-bottom {
    -webkit-animation: fall-12 12s ease-in infinite;
    animation: fall-12 12s ease-in infinite;
}

#spa-bottom {
    -webkit-animation: fall-10 10s ease-in infinite;
    animation: fall-10 10s ease-in infinite;
}

#hotel-bottom {
    -webkit-animation: fall-10 10s ease-in infinite;
    opacity: .25;
}

#chemistry-little {
    -webkit-animation: fall-8 8s ease-in infinite;
}

#hotel-tiny {
    -webkit-animation: fall-10 10s ease-in infinite;
}

#chemistry-top-right {
    -webkit-animation: fall-10 10s ease-in infinite;
}

#comp-little {
    -webkit-animation: fall-7 7s ease-in infinite;
}

.page-fall2 {
    -webkit-animation: fall-12 12s ease-in infinite;
}

.page-fall3 {
    -webkit-animation: fall-13 13s ease-in infinite;
    opacity: .5;
}

.white_page {
    fill: #fff;
}

.dark_gray_page {
    fill: #a9a9a9;
}

.medium_gray {
    fill: #ccc;
}

.light_orange {
    fill: #fca671;
}

.orange {
    fill: #e96019;
}

.top-martini {
    fill: #fdd2b8;
}

.dark_navy {
    fill: #1b2c3d;
}

.green {
    fill: #a48801;
}

.med-blue {
    fill: #395d6d;
}

.light-blue {
    fill: #e8eaec;
}

.extra-light-o {
    fill: #fce7dc;
}

.extra2-light-o {
    fill: #fff2ea;
}

.navy-light {
    fill: #495664;
}

.light-green {
    fill: #bfac4d;
}

.light-bubbles {
    fill: #e1e7e9;
}

@-webkit-keyframes fall-13 {
    from {
        transform: translateY(-700px);
    }

    to {
        transform: translateY(800px)
    }
}

@-webkit-keyframes fall-7 {
    from {
        transform: translateY(-700px);
    }

    to {
        transform: translateY(800px)
    }
}

@-webkit-keyframes fall-8 {
    from {
        transform: translateY(-700px);
    }

    to {
        transform: translateY(800px)
    }
}

@-webkit-keyframes fall-10 {
    from {
        transform: translateY(-700px);
    }

    to {
        transform: translateY(800px)
    }
}

@-webkit-keyframes fall-12 {
    from {
        transform: translateY(-700px);
    }

    to {
        transform: translateY(800px)
    }
}

/* On screens that are 1024px or less */
@media screen and (max-width: 1024px) {
    .text{
        width:45%;
    }
}