:root {
    --colour-background: #f4f4f4;
    --colour-foreground: #404040;
    --colour-transparent: #c8c8c84e;
    --colour-select: #006565;
    --colour-highlight: #00b2a9;
    --colour-anchor: #1d7484;
    --nav-height: 5vh;
    --header-height: 10vh;
    --main-height: 80vh;
    --footer-height: 5vh;
    --header-font-size: min(var(--header-height), calc(1.6vw + 10px));
    --main-font-size: min(calc(var(--main-height) * 0.1), calc(0.5vw + 10px));
}
html {
    font-size: 62.5%;
    font-family: 'Raleway', sans-serif;
}
  
body {
    max-width: 100em;
    height: 100%;
    margin: 0 auto;
    color: var(--colour-foreground);
    background-color: var(--colour-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Martel', serif;
    text-align: center;
    word-break: break-word; 
}

h1 {
    font-size: var(--header-font-size);
}

p {
  margin: 0px;
  font-size: var(--main-font-size);
  word-wrap: break-word;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 80% 1fr;
    grid-template-rows: var(--nav-height) var(--header-height) var(--main-height) var(--footer-height);
}
    
navbar {
    grid-area: 1 / 2 / 2 / 3;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: var(--nav-height);
}

navbar > .navlink {
    display: flex;
    align-items: center;
    justify-content: center;
}

navbar > #home { grid-area: 1 / 2 / 2 / 3; }
navbar > #gallery { grid-area: 1 / 3 / 2 / 4; }
navbar > #about { grid-area: 1 / 4 / 2 / 5; }
navbar > #contact { grid-area: 1 / 5 / 2 / 6; } 

.navlink a {
    text-decoration: none;
    color: #000;
    padding: 10px 1vw;
    font-size: calc(0.8vw + 10px);
}

header {
    grid-area: 2 / 2 / 3 / 3;
    display: grid;
    align-items: center;
    justify-content: center;
    line-height: var(--header-font-size);
}

main {
    grid-area: 3 / 2 / 4 / 3;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: 10% 90%;
    font-size: 1.4vw;
}

main .about {
    grid-template-rows: 30% 70%;
}

main #top {
    grid-area: 1 / 1 / 2 / 2;
    width: 80%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
}

.about #top {
    line-height: 4vh;
}

main #bottom {
    grid-area: 2 / 1 / 3 / 2;
} 

img {
    display: block;
    max-width: 100%;
    max-height: calc(var(--main-height) * 0.9);
    margin: 0 auto;
}

.about img {
    max-height: calc(var(--main-height) * 0.7);
    max-width: 100%;
}

footer {
    grid-area: 4 / 2 / 5 / 3;
    text-align: center;
    line-height: var(--footer-height);
    font-size: calc(0.2vw + 10px);
}

main form {
    height: 100%;
    width: 100%;
}

input, textarea {
    border: 1px solid #1d7584;
    width: 80%;
    min-height: 40px;
    font-size: medium;
}

input:focus, textarea:focus {
    border: 1px solid #1d7484;
}
  
textarea {
    width: 100%;
    min-height: 200px;
}
  
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--colour-highlight);
    color: #f9f9f9;
    border-radius: 1px;
    border: 1px solid #1d7484;
    cursor: pointer;
    box-sizing: border-box;
    padding: 6px 10px;
    font-size: calc(0.6vw + 10px);
}
.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
    cursor: default;
    opacity: .5;
}

.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled {
    background-color: #982c61;
    border-color: #982c61;
    color: #f9f9f9;
    outline: 0;
}
  
textarea, select, input {
    color: #4a4a4a;
    background-color: #fbfbfb;
    border: 1px solid #f1f1f1;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}

textarea:focus, select:focus, input:focus {
    border: 1px solid #1d7484;
    outline: 0;
    font-size: large;
}
  
label, legend, fieldset {
    display: block;
    margin-bottom: .5rem;
}