@import url('https://fonts.googleapis.com/css2?family=Chonburi&family=DM+Serif+Text:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Whisper&display=swap');

body{
    margin: 0;
    width: 100%;
	background-color: #f8f6ea;
	font-family: "Inter";
}

#content{
	text-align: left;
    padding: 6vw 12%;
	box-sizing: border-box;
	display: table-cell;
	background-color: #ffffff;
}

.heading {
    background-image: url('left.jpg');
    color: white;
    text-shadow: 0 2px 32px black;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    width: 100%;
    padding: 12%;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.6);
    background-blend-mode: darken;
}

.miniheading {
    background-image: url('left.jpg');
    color: white;
    text-shadow: 0 2px 32px black;
    background-size: cover;
    background-position: center;
    width: 100%;
    padding: 3rem 12%;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.6);
    background-blend-mode: darken;
    margin-bottom: 4rem;
}

.miniheading a{
    font-size: 4em;
    font-family: "Whisper", cursive;
    text-align: left;
    color: white;
}

.pageheading {
    text-align: center;
}

.pageheading h2 {font-size: 2rem}

h1{
    font-size: 4em;
    margin: 0;
    font-family: "Whisper", cursive;
    margin-bottom: 1rem;
    text-align: center;
}

.heading h1 {text-align: left;}

a {
    color: rgb(152, 112, 11);
    font-weight: 600;
    text-decoration: none;
    line-height: 2rem;
}

.heading a {
    display: inline-flex;
    gap: 4px;
    margin-top: 1rem;
    align-items: center;
    color: rgb(181, 147, 60);
}

.card h2 {display: flex; align-items: baseline;}

.card a {
    padding-left: 1em;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
}

.cardclick {
    all: unset!important;
    margin: 0;
    padding: 0;
    display:contents;
}

.cardclick::before {
    all:unset!important;
}


.card a::before {
    font-family: 'Material Symbols Sharp';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    margin:0;
    height: 12px;
    overflow: hidden;
    line-height: 0.6em;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;

    content: "link";
    padding-right: 4px;
}

.heading h2 {
    font-family: "DM Serif Text", serif;
    font-style: normal;
    font-size: 21px;
}

p {
    font-size: 14px;
}

.focus {font-size: 18px;}

.cards { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    box-sizing: border-box; 
    padding: 2% 12%;
    box-sizing: border-box;
}
  
.card {
    padding: 1.5em 2em;
    backdrop-filter: blur(16px);
    text-shadow: none;
    box-sizing: border-box;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    
    background-size: cover;
    background-position: center;
    background-blend-mode: lighten;
    background-color: #f8f6eaf8;
    box-shadow: 0 0 64px 64px #f8f6ea inset;
    text-shadow: 0 0px 0px #f8f6ea;
    
}

#hotels {background-image:url('palace-deluxeroom.jpg');}

#mfcc {background-image:url('mfcc.jpg');}

#qpml {background-image:url('blueprint-964630_1280.jpg');}

.card:hover {
    background-color: #f8f6ead7!important;
    box-shadow: 0 0 32px 32px #f8f6ea inset;
}

.extra {
    padding: 0 calc(12% + 2em);
    margin-bottom: 6rem;
}

.moreinfo {
    padding: 0 calc(12% + 2em);
    margin-bottom: 6rem;
}

.extra h2 {
    font-size: 2rem;
    font-family: "DM Serif Text", serif;
}

.moreinfo h2 {
    font-size: 2rem;
    font-family: "DM Serif Text", serif;
}

.moreinfo p {font-size: 18px;}

h2 {margin: 0;font-family: "DM Serif Text", serif;}


#experience {
    box-sizing: border-box;
    padding: 0 12%;
}

.event {
    display: flex;
    flex-direction: row;
    margin-bottom: 32px;
}

.event span {
    margin-left: 2rem;
}
.event img {width: 180px}
.event h2 {font-size: 2rem}

.fadeimg {
    width:100%;
    position:relative;
    top:-42px;
    z-index:-1;
}

#footer {
    gap: 8px;
    margin: 4rem;
    align-items: center;
    display: flex;
    justify-content: center;
    transition-duration: 800ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

#footer:hover {
    transform: scale(1.05);
    color: rgb(112, 82, 8);
}

/* wide screens */
@media (min-width: 1200px) {
    .heading {padding:12vw 18%}
    .heading h1 {font-size:6em}
}

/* thin screens (mobile) */
@media (max-width: 600px) {
    .cards{padding:2% 4%}
    .extra{padding: 0 calc(4% + 2em);}

    .moreinfo {padding: 0 calc(4% + 2em);}

    #map, #global, .fadeimg {
        margin-top: 2em;
        margin-left: calc(-4vw + -2rem);
        margin-right: calc(-4vw + -2rem);
        width: 100vw!important
    }

}