@font-face {
    font-family: 'Fattern';
    src: url(Fattern.otf) format('opentype');
}

html {
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

body {
    font-family: 'Fattern', sans-serif;
}

nav {
    z-index: 1;
}

.form-control,
.form-control:focus {
    background: rgba(255, 255, 255, 0);
}

.logoPlace {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.logo {
    font-size: 30vw;
}

.logo2 {
    font-size: 20vw;
}

h1 span {
    display: inline-block;
}

footer {
    color: white;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 1vh;
    font-size: smaller;
}

footer a {
    color: white;
    text-decoration: none;
}

Glasses

.glassBox {
    background: rgba(255, 255, 255, 0) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
}

.glassBox2 {
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
}

.glassBox3 {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
}

/* Define the wave animation */
@keyframes text-wave {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-70px);
    }
}

/* Play animation on hover */
.wave-on-hover:hover span {
    animation-play-state: running !important;
}

/* MAIN SITE ONLY */

html {
    height: 100%;
}

/* Light blue color-transition background */

.bg-blue {
    background: radial-gradient(ellipse at center, white 0%, white 35%, #B7E8EB 100%) !important;
}

.bg-white {
    background: white !important;
}

/* Waving ocean */

.ocean {
    height: 20vh;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #015871;
}

.wave {
    background: url(wave.svg) repeat-x;
    position: absolute;
    top: -198px;
    width: 6400px;
    height: 1000vw;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
    top: -175px;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
}

@keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}

@keyframes swell {

    0%,
    100% {
        transform: translate3d(0, -25px, 0);
    }

    50% {
        transform: translate3d(0, 5px, 0);
    }
}