*{
    margin: 0;
    padding: 0;
}
::selection{
    background-color: #0b162e;
    color:#6378a3;
}
html {
    font-size:62.5%;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h3,p,a{
    margin: 0;
}
    h1{
        font-size: 10rem;
        letter-spacing: 3rem;
        text-indent: 3rem; /* Otherwise, center isn't centered */
        font-family: Montserrat, sans-serif;
    }
    h2{
        font-size: 7rem;
    }
    h3{
        font-size: 4rem;
    }
    h4{
        font-size: 2.5rem;
    }
    h5{
        font-size: 2.4rem;
    }
    p{
        font-size: 1.8rem;
        font-family: Montserrat, sans-serif;
    }
    a{
        color: inherit;
        text-decoration: none;
    }
body{
    position: relative;
	font-family: 'Josefin Sans', sans-serif;
	background-color: #0b162e;
	color: white;
	padding-bottom: 50px;
    background-image: url("images/boat1.png"), url("images/boat2.png"), url("images/boat3.png");
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: 10px 27%, 10px 48%, 10px 70%;
}
nav {
    position: fixed;
    overflow-x: hidden;
    width: 80.2%; /*Slight subpixel visible if 80% */
    min-width: 800px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1300px;
    z-index: 3;
}
    nav h5{
        width: 40px;
        padding: 1.5% 0;
        float:right;
        display: flex;
        justify-content: space-between;
        white-space: nowrap;
        color: #0b162e;
        transition: width 0.5s ease-in-out, background-color 0.2s 0.3s ease-in-out, color 0.5s ease-in-out;
    }
    nav.active h5{
        width: 100%;
    }
    nav.active h5.has_background{
        background-color: #0b162e;
        transition: width 0.5s ease-in-out, background-color 0.2s ease-in-out;
    }
    nav h5 a#menu{
        margin-top: -10px;
        margin-right: 20px;
        font-size: 2.8rem;
        cursor: pointer;
    }
    nav h5 a:not(#menu):hover{
        text-decoration: underline;
    }
header{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
    header div#background_image{
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url("images/wallpaper2.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }
    header div#title_wrapper{
        position: absolute;
        width: 100%;
        text-align: center;
        top: 20%;
        transform: translateY(20px);
        opacity: 0;
        transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    }
        header div#title_wrapper img {
            width: 350px;
        }
        header div#title_wrapper h1{
            color: #42567d;
            margin: 1.3rem;
            transition: color 0.5s ease-in-out;
        }
main{
    margin: 0 auto;
    padding: 30px 0;
    display: grid;
    width: 80%;
    max-width: 1300px;
    min-width: 800px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 20px;
}
    main > * {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content:space-between;
        background-color: #2b3e64;
        border-radius: 2px;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s ease-in-out;
    }
    main > h2 {
        grid-column-end: span 2;
        text-align: center;
        padding: 2.3% 0 1.2% 0;
    }
    main > img,
    main > section{
        object-fit:cover;
        min-height: 550px;
        height: 100%;
        width: 100%;
    }
        main > section > * {
            margin-left: 5%;
            width: 90%;
        }
            main > section > h3 {
                margin-top: 5%;
                margin-bottom: 5%;
            }
            main > section > h4 {
                margin-top: 5%;
                margin-bottom: 1%;
            }
            main > section:not(.contact_section) > p {
                margin-bottom: 4%;
            }
            main > section.contact_section > p#response{
                font-size: 1.5rem;
                min-height: 1.7rem;
            }
                main > section.contact_section > p#response.error{
                    color: rgb(255, 88, 88);
                }
                main > section.contact_section > p#response.warning{
                    color: rgb(233, 230, 89);
                }
                main > section.contact_section > p#response.success{
                    color: rgb(61, 180, 61);
                }
            main > section > form,
            main > section > iframe{
                height: 53%;
                margin-bottom: 5%;
                margin-top: 5%;
                border: none;
                text-align: center;
            }
            main > section > form > input,
            main > section > form > textarea{
                width: 100%;
                height: 15%;
                border: none;
                border-bottom: 1px solid #6176a1;
                text-indent: 3px;
                background: rgba(0, 0, 0, 0);
                color: white;
                font-family: 'Montserrat', sans-serif;
            }
            main > section > form > textarea{
                resize: none;
                height: 35%;
                margin: 5px 0;
                display: block;
            }
            main > section > form > input::placeholder, 
            main > section > form > textarea::placeholder{
                color: #dfe7ff88;
            }
            main > section > form > input:focus, 
            main > section > form > textarea:focus{
                border-bottom: 1px solid white;
                outline: none;
            }
            main > section > form > input[type='submit']{
                width: 30%;
                background-color: #6176a1;
                border-bottom: 0px solid white;
                cursor: pointer;
            }
            main > section > form > input[type='submit']:hover{
                background-color: #3D517A;
                border-bottom: 0px solid white;
            }
            input:-webkit-autofill,
            input:-webkit-autofill:hover,
            input:-webkit-autofill:focus,
            input:-webkit-autofill:active {
                transition: all 0s 50000s;
            }

footer{
    text-align: center;
}
    footer img{
        width: 100px;
        margin: 10px;
    }
    footer p#link{
        margin-top: 10px;
        font-size: 1.5rem;
    }
    footer p#link a{
        color: white;
        text-decoration: none;
    }
    footer p#link a svg{
        width: 1.2rem;
    }

@media screen and (max-width: 1300px) {
    header div#title_wrapper img {
        width: 27%;
        min-width: 150px;
    }
    header div#title_wrapper h1{
        font-size: 7.7vw;
        letter-spacing: 2.3vw;
        text-indent: 2.3vw; /* Otherwise, center isn't centered with single word? */
    }
    header div#title_wrapper h3{
        font-size: 3.1vw;
    }
}
@media screen and (max-width: 880px) {
    h2{
        font-size: 4rem;
    }
    h3{
        font-size: 3rem;
    }
    h4{
        font-size: 1.8rem;
    }
    body{
        background-image: none;
    }
    header div#title_wrapper h3{
        font-size: 2rem;
        color: #42567d;
    }
    nav{
        width: 93.2%;
        min-width: auto;
    }
        nav h5{
            width: 28px;
            padding: 5.5vw 0 !important;
            font-size: 4vw !important;
        }
        nav h5 a#menu{
            font-size: 5vw !important;
            margin-top: -2vw;
        }
    main{
        grid-template-columns: 1fr;
        min-width:auto;
        width: 93%;
        gap: 15px;
    }
        main > h2 {
            grid-column-end: span 1;
        }
        main > img{
            min-height: auto;
        }
}