@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;900&display=swap');

body {
    background: white;
}

/**
Cerulean color palette
03045E
0077B6
00B4D8
90E0EF
CAF0F8
*/

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 400px;
    width: 600px;
    background: #00B4D8;
    overflow: hidden;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 0 2px 2px #CAF0F8;
}

.content {
    position: relative;
    transform: translatey(-40%);
    text-align: justify;
    color: #03045E;
    padding: 40px 40px 0 40px;
    bottom: -100px;
    font-family: 'Merriweather', serif;
}

h1 {
    font-weight: 900;
    text-align: center;
}

h3 {
    font-weight: 300;
    text-align: center;
}

p {
    font-weight: 200;
    text-align: left;
    padding: 0 0 0 28px;
}

a {
    font-weight: 300;
    text-align: center;
    display: none;
}
/*
.flapleft {
    width: 50%;
    height: 120%;
    top: -450px;
    right: 300px;
    position: relative;
    background: #0077B6;
    opacity: 100%;
}

.flapleft::before {
    position: absolute;
    content: "";
    height: 120%;
    width: 0%;
    right: 0;
    background: #0077B6;
    background-repeat: no-repeat;
    transition: 1s;
}

.flapleft::after {
    position: absolute;
    content: "";
    height: 120%;
    width: 100%;
    right: -300px;
    background: #0077B6;
    background-repeat: no-repeat;
    transition: 1s;
}

.flapright {
    width: 50%;
    height: 120%;
    top: -938px;
    right: 300px;
    position: relative;
    background: #0077B6;
    opacity: 100%;
}

.flapright::before {
    position: absolute;
    content: "";
    height: 120%;
    width: 0%;
    right: 600px;
    background: #0077B6;
    background-repeat: no-repeat;
    transition: 1s;
}

.flapright::after {
    position: absolute;
    content: "";
    height: 120%;
    width: 100%;
    right: -600px;
    background: #0077B6;
    background-repeat: no-repeat;
    transition: 1s;
}*/