:root {
    --loadAnimTime: 4s;
}

@keyframes onLoad {
    0%   { height: 100vh; }
    50%  { height: 100vh; }
    100% { height: 30vh;  }
}

@keyframes onLoadOverflow {
    0%   { overflow: hidden; }
    50%  { overflow: hidden; }
    100% { overflow: hidden; }
}

@keyframes onLoadHeaderSpace {
    0%   { margin-top: 300px; }
    50%  { margin-top: 300px; }
    100% { margin-top: 70px;  }
}

body {
    background-color: rgb(243, 243, 243);
    min-height: 70vh;
    max-height: 100vh;
    width: 100%;
    animation-name: onLoadOverflow;
    animation-duration: var(--loadAnimTime);
    overflow-y: auto; overflow-x: hidden; 
}

.onLoad {
    animation-name: onLoad;
    animation-duration: var(--loadAnimTime);
}

.header {
    width: 100vw;
    height: 30vh;
}

.header-content {
    height: 100%;
}

.header-background {
    object-fit: cover;
    object-position: 50% 35%;
    width: 100%;
    height: 100%;
}

.header-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30vh;
    background-color: rgba(177, 177, 177, 0.692);
    text-align: center;
    color: white;
    font-size: 50px;
    text-shadow: 0px 0px 10px #000000;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

.logo {
    color: white;
    background-color: #A9D4B2;
    display: table;
    font-size: 75px;
    font-weight: bold;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 3px;
    margin: 10px auto;
    margin-top: 70px;
    padding: 10px 10px 5px 10px;
    border-radius: 24px;
    text-shadow: none;
    animation-name: onLoadHeaderSpace;
    animation-duration: var(--loadAnimTime);

    box-shadow:
        0px 0px 2.2px rgba(0, 0, 0, 0.034),
        0px 0px 5.3px rgba(0, 0, 0, 0.048),
        0px 0px 10px rgba(0, 0, 0, 0.06),
        0px 0px 17.9px rgba(0, 0, 0, 0.072),
        0px 0px 33.4px rgba(0, 0, 0, 0.086),
        0px 0px 80px rgba(0, 0, 0, 0.12)
    ;
}

.page {
    margin: auto;
    background-color: white;
    max-width: 1000px;
    min-height: calc(70vh - 40px);
    margin-top: 0;
    font-size: 20px;
    line-height: 24px;
}

.categoryBtns {
    position: relative;
    width: calc(100% - 80px);
    padding: 20px 40px;
}

.categoryBtn {
    position: relative;
    width: 230px;
    height: 230px;
    border-radius: 25px;
    display: inline-block;
    text-align: center;
    margin: 20px 36px;
    border: none;
    background-color: #A9D4B2;
    overflow: hidden;

    box-shadow:
        0px 0px 2.2px rgba(0, 0, 0, 0.02),
        0px 0px 5.3px rgba(0, 0, 0, 0.028),
        0px 0px 10px rgba(0, 0, 0, 0.035),
        0px 0px 17.9px rgba(0, 0, 0, 0.042),
        0px 0px 33.4px rgba(0, 0, 0, 0.05),
        0px 0px 80px rgba(0, 0, 0, 0.07)
    ;
}

.categoryBtn div {
    position: absolute;
    top: 0;
    left: 0;
    height: 230px;
    width: 230px;
    border-radius: 25px;
    transition: all 0.4s ease;
}

.categoryBtn .text {
    color: grey;
    font-size: 30px;
    font-weight: bold;
    padding-top: 55px;    
}

.categoryBtn .text .icon {
    display: block;
    font-size: 50px;
    margin-bottom: 20px;
}

.categoryBtn .background {
    background-color: #FFFFFF;
    top: 0;
    height: 220px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.categoryBtn:hover { cursor: pointer; }
.categoryBtn:hover .background {
    top: 0px;
    height: 0px;
}
.categoryBtn:hover .text { color: white; }



h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 50px;
    padding: 30px 20px;
    color: gray;
    width: calc(100% - 40px);
}
.center { text-align: center; }

.contact { 
    background-color: #A9D4B2; 
    color: white; 
    padding: 20px 40px;
}
.contact .text, .contact .form {
    display: inline-block;
    vertical-align: top;
}
.contact h1 {
    color: white;
}

.contact .text { 
    margin-left: 3%;
    width: 35%; 
    font-size: 18px;
    text-align: justify;
    font-weight: 400;
}
.contact .form { 
    margin-left: 5%;
    width: 50%;
}

.emailInput, .messageInput {
    width: 400px;
    padding: 10px;
    border-radius: 15px;
    border: 1px solid grey;
}

.messageInput {
    height: 200px;
    resize: none;
}

form table {
    margin: auto;
}

form td, form th {
    text-align: right;
    vertical-align: middle;
    padding: 5px;
}

form th {
    font-weight: 400;
    color: white;
}

.lowCol {
    height: 40px;
}

.submitCol {
    text-align: right;
}

.submitCol button {
    background-color: white;
    color: gray;
    font-weight: bold;
    padding: 10px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
}
.submitCol button:hover {
    background-color: lightgray;
    color: white;
}