@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {font-family: "Montserrat", sans-serif;}

article:hover .button:hover {display: block;}


.flex-row {display: flex;}
.flex-col {display: flex; flex-direction: column;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.justify-around {justify-content: space-around;}
.align-center {align-items: center;}
.border-white-wide {border: 5px solid white; border-radius: 50px;}
.font100 {font-size: 10em;}
.text-white {color: white;}
.none {display: none;}
.gap70 {gap: 70px;}
.absolute {position: absolute;}
.bottom20 {bottom: 20px;}
.mrg-bottom-0 {margin-bottom: 0;}

.button {background-color: white; border-radius: 30px; cursor: pointer; color: rgb(92,115,149); border: 3px solid transparent; padding-inline: 30px;}
.button:hover {background-color: transparent; color: white; border: 3px solid white;}

.bc1 {background-image: url('/images/hotel-white.svg'); background-repeat: no-repeat; background-size: contain; transition: all .2s ease-in-out;}
article:hover .bc1 {background-image: url('/images/hotel.svg'); background-color: white; transform: scale(1.3);}
.bc2 {background-image: url('/images/apartments-white.svg'); background-repeat: no-repeat; transition: all .2s ease-in-out;}
article:hover .bc2 {background-image: url('/images/apartments.svg'); background-color: white; transform: scale(1.3);}
.bc3 {background-image: url('/images/studios-suites-white.svg'); background-repeat: no-repeat; transition: all .2s ease-in-out;}
article:hover .bc3{background-image: url('/images/studios-suites.svg'); background-color: white; transform: scale(1.3);}


#main-page { background: url('/images/landing-pic.jpg');background-size: cover;background-position: bottom; background-repeat: no-repeat; min-height: 100vh;display: flex; flex-direction: column;}
#main-page h1 {font-family: "Great Vibes", cursive; font-style: normal;}
#content > article:hover .button {display: block;}

@media screen and (max-width: 1200px) {
    h1 {padding-top: 50px;}
    #content {flex-direction: column; gap: 50px;align-items: center; min-height: 110vh; padding-top: 50px;}
    .wraper {min-width: 0;}
    
}

@media screen and (max-width: 500px) {
   article {height: 320px !important;}
   article > div {width: 200px !important; height: 200px !important;}
   .font100 {font-size: 7em;}
   .font15 {font-size: 1.2em;}
}