@font-face {
    font-family: 'GravePresse';
    src: url(fonts/GravePresse-ExtraBold.woff2) format(woff2);
}

@font-face {
    font-family: 'UniNeue';
    src: url(fonts/UniNeue-HeavyItalic.woff2) format(woff2);
}

@font-face {
    font-family: 'LouisGeorge';
    src: url(fonts/LouisGeorgeCafe-Bold.woff2) format(woff2);
}

html {
    font-family: 'UniNeue';
    color: #0D1321;
    background-color: #94C7DC;
}

h1 {
    font-family: 'GravePresse';
    font-size: 60px;
    filter:drop-shadow(5px 5px #e3b3b9);
    
}

p {
    font-size: 20px;
    filter:drop-shadow(5px 5px #e3b3b9);
}

.websitecontainer {
    display: grid;
    margin: 0 auto;
    grid-template-columns: 650px 20px 1200px;
    grid-template-rows: auto;
    grid-template-areas: 
    'one . two';
}

@media (max-width: 1800px) {
    .websitecontainer {
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
        'two'
        'one';
    }
    .thankyou {
        opacity: 50%;
    }
}

.gridtextleft {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 250px 170px;
    grid-template-areas: 
    'toptext'
    'bottomtext';
}

.gif {
    margin-left: 5%;
}

.stickytext {
    text-align: center;
}

.thankyou {
    width: 450px;
    position: sticky;
    bottom: 0px;
    filter:drop-shadow(10px 10px #e3b3b9);
}

.bubble {
    background-color: #DFDBCF;
    position: absolute;
    left: 42%;
    width: 220px;
    height: 60px;
    float: right;
    align-items: center;
}

.gallerycontainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.galleryitem {
    margin-top: 20px;
    max-width: 300px;
    filter:drop-shadow(10px 10px #e3b3b9);
}

.texttop {
    grid-area: toptext;
}

.textbot {
    grid-area: bottomtext;
}

.box {
    grid-area: one;
    margin: 20px auto;
    background-color: #DFDBCF;
    padding-left: 3%;
    width: 600px;
    height: 620px;
    filter:drop-shadow(15px 20px #e3b3b9);
}

#sticky {
    position: sticky;
    top: 30px;
}

.box2 {
    grid-area: two;
    margin: 20px auto;
    padding-right: 20px;
    background-color: #DFDBCF;
    width: 1100px;
    height: 2050px;
    filter:drop-shadow(15px 20px #e3b3b9);
    text-align: end;
}

a {
    font-size: 35px;
    background-color: #94C7DC;
    color: #0D1321;
    text-align: center;
    display: inline-block;
    padding: 20px 40px;
    text-decoration: none;
    filter:drop-shadow(10px 10px #e3b3b9);
    transition: 0.5s;
}

a:hover {
    color: white;
    background-color: #e3b3b9;
    filter:drop-shadow(10px 10px #94c7dc);
    transition: 0.5s;
}