@font-face {
font-family: WeblySleek;
src: url(/assets/fonts/weblysleekuil.ttf);
}
::selection {
background: #c3e2eb; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #c3e2eb; /* Gecko Browsers */
}
footer::selection {
background: #1d3e47;
}
footer::-moz-selection {
background: #1d3e47;
}
html {
scroll-behavior: smooth;
}
body {
/* font-family: Raleway, 'WeblySleek', Helvetica, sans-serif; */
/* font-family: 'opensans', Helvetica, sans-serif; */
font-family: 'WeblySleek', Helvetica, sans-serif;
font-size: 1.2em;
font-weight: normal;
margin: 0;
}
/* Define a transition duration during page visits */
html.is-changing .transition-fade {
transition: opacity 0.4s;
opacity: 1;
}
/* Define the styles for the unloaded pages */
html.is-animating .transition-fade {
opacity: 0;
}
#menu {
position: relative;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 120px;
width: 100vw;
z-index: 2;
}
#menu a {
color: black;
margin: 40px;
text-decoration: none;
}
@keyframes fadeIn {
from {
opacity: 0;
} to {
opacity: 1;
}
}
.logo {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.logo::after {
margin-right: auto;
}
.logo::before{
content: "over";
visibility: hidden;
margin: 40px;
/* margin-left: auto; */
}
.logo img {
height: 100px;
width: auto;
margin-top: 5px;
}
/* ===== drawing ===== */
.divider {
display: flex;
align-items: center;
margin: 50px 30px;
}
.line {
flex: 1;
height: 5px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
background-position: center;
background-size: auto 100%;
}
.drawing {
width: 30%;
flex-shrink: 0;
}
.drawing path {
vector-effect: non-scaling-stroke;
}
.line.left {
flex: 4;
}
.line.right {
flex: 1;
}
/* ==== footer ====== */
footer {
position: absolute;
width: 100%;
margin-top: 100px;
background-color: #c3e2eb;
/* padding: 20px; */
}
footer > p {
/* TODO: change this 10% to a variable */
padding: 20px 20px 30px calc(20% + 30px);
margin: 0;
font-size: 0.8em;
color: #1d3e47;
}
footer::before {
/* TODO: Bootje neerzetten in footer */
display: block;
/* transform: translate(0,-5px); */
content: "";
/* margin-top: 50px; */
position: absolute;
top: -10%;
left: 0;
width: 100%;
margin-bottom: 0;
/* margin-inline: 30px; */
border: none;
color: white;
background-image: url('data:image/svg+xml;utf8,');
height: 20px;
/* margin-inline: 30px; */
/* width: 1000px; */
background-position: center;
background-repeat: repeat-x;
background-size: contain;
}
.boat {
/* display: block; */
position: absolute;
top: 0;
left: 20%;
margin: 0;
padding: 0;
/* position: relative; */
/* top: -30px; */
/* left: 300px; */
height: auto;
width: 30px;
/* background-color: #1d3e47; */
overflow: hidden;
transform: translateY(-90%);
animation: boat 4s alternate-reverse infinite, moveBoat 90s alternate infinite;
/* z-index: -1; */
}
@keyframes moveBoat {
0% {
left: 20%;
}
100% {
left: 80%;
}
}
@keyframes boat {
0% {
transform: translateY(-90%) rotate(-2deg);
}
100% {
transform: translateY(-80%) rotate(1deg);
}
}
.boat img {
height: 100%;
width: auto;
}
#contact {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
gap: 2ex;
margin-top: 10%;
}
@media screen and (max-width: 600px) {
body {
font-size: 1.1em;
}
#menu {
height: 80px;
justify-content: space-between;
padding-inline: 10%;
width: 80%;
}
.logo::before {
display: none;
}
.logo {
display: inline-block;
}
.logo img {
height: 50px;
width: auto;
margin-top: 5px;
}
#menu a {
color: black;
margin: 0px;
text-decoration: none;
}
footer > p {
/* TODO: Change this 10% to a variable */
padding: 20px 20px 30px 10%
}
.line.left {
flex: 1;
}
.line.right {
flex: 1;
}
.drawing {
width: 60%;;
}
}