@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&family=Quattrocento:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Original+Surfer&display=swap');

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    align-items: center;
    background: linear-gradient(#bddef4 600px, #538ecf 500px, #090836 850px, #090836, #090836, #090836);
    height: auto;
    z-index: -99999;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background-color: rgb(42, 35, 112);
    outline: 1px solid slategrey;
    border-radius: 100px;
    width: 10px;
}

header {
    display: flex;
    justify-content: center;
    width: 100vw;
    box-shadow: 1px 1px 26px #000,
    -1px -1px 26px #0000;
    position: fixed;
    background-color: white;
    top: 0;
    z-index: 999;
}

.inner-header {
    display: flex;
    justify-content: space-between;
    height: 70px;
    width: 90vw;
    max-width: 1300px;

}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

}

.logo div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.logo div, .logo img {
    height: 90%;
}

.logo div h4, .logo div h6 {
    margin: 0;
    font-family: "Orbitron", serif;
}

.logo div h6 {
    font-weight: 400;
}

nav {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    align-items: center;
    height: 100%;
    width: 40%;
}

nav a {
    text-decoration: none;
    color: black;
    font-family: "Orbitron", serif;
    font-weight: 500;
}
.phone-nav-btn{
    background-color: transparent;
    border: none;
    display: none;
}
.phone-nav-btn svg{
    width: 80%;
    height: 80%;
}
@keyframes menuDown {
    from{
        transform: translateY(-110%);

    }
    to {
        transform: translateY(0);
    }
}
@keyframes menuUp {
    from{
        transform: translateY(0);
    }
    to {
        transform: translateY(-110%);
    }
}
.phone-nav{
    position: fixed;
    padding-top:10px;
    top: 55px;
    width: 100%;
    background-color: white;
    list-style: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 998;
    /*animation: menu 2s;*/
    display: none;
    padding: 0;

}
.phone-nav li{
    margin: 25px 0;
}
.phone-nav li a{
    text-decoration: none;
    color: black;
    font-family: "Orbitron", serif;

}
.games {
    padding: 10px 5px;
    border-radius: 10px;
    color: #0FA3B1;
    border: 1px solid #0FA3B1;

}

.games:hover {
    background-color: #0FA3B1;
    color: white;
    transition: 1s;
}

.main-page {
    height: auto;
    overflow: hidden;
    max-width: 1300px;
    z-index: 0;
}

.big-photo-part {

    position: relative;
    overflow: hidden;
    width: 100vw;
    max-width: 1300px;
    margin-top: 70px;
    margin-bottom: -5px;

}

.big-photo {


    width: 100%;

    z-index: -5;
}

.text-container {
    position: absolute;
    width: 850px;
    top: 10px;
    left: calc(50% - 425px);

}

.big-photo-part .text-container h1 {
    position: absolute;
    color: white;
    font-family: "Original Surfer", serif;
    font-size: 110px;
    font-weight: normal;
    text-align: center;
    -webkit-text-stroke: 1px transparent;
}

#sea-animation-h1 {
    color: #00a6ff;
    animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
    0%, 100% {
        clip-path: polygon(0% 59%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(0% 60%, 16% 65%, 34% 60%, 51% 62%, 67% 50%, 90% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
}

.hat {
    position: absolute;
    width: 100px;
    left: 5px;
    top: 80px;
}

.glasses {
    position: absolute;
    width: 90px;
    right: 190px;
    top: 122px;
}

.umbrella {
    position: absolute;
    width: 115px;
    right: 25px;
    top: 80px;

}

.ship {
    position: absolute;
    max-height: 100px;
    height: 7vw;
    right: -150px;
    bottom:4vw;
    animation: ships 20s infinite linear;
}

.second-ship {
    animation-delay: 2s;
}

@keyframes ships {
    0% {
        transform: translateX(0px);
    }
    85% {
        transform: translateX(-1500px);
    }
    100% {
        transform: translateX(-1500px); /* Ending state */
    }
}


main {
    position: relative;
    width: 100vw;
    max-width: 1300px;
    background-image: url("./images/sea.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 4000px;
    z-index: -0;
}

.sea-fish {
    position: absolute;
    width: 100px;
    z-index: -99;
}



@keyframes sea-fish-right {
    from {
        transform: translate(100px, 100px); /* Start position */
    }
    to {
        transform: translate(-150vw, -150vh); /* End position */
    }
}

@keyframes sea-fish-left {
    from {
        transform: translate(-100px, -100px); /* Start position */
    }
    to {
        transform: translate(150vw, -150vh); /* End position */
    }
}

.fish-right {
    top: 150vh;
    right: -30vw; /* Start position just outside the left edge */
    animation: sea-fish-right 3s linear infinite; /* Adjust duration as needed */
}

.fish-left {
    top: 250vh;
    left: -30vw;
    animation: sea-fish-left 3s linear infinite; /* Adjust duration as needed */
}

@keyframes big-fish {
    from {
        transform: translate(100px); /* Start position */
    }
    to {
        transform: translate(-150vw); /* End position */
    }
}
.big-fish{
    width: 25vw;
    position: absolute;
    top: 3500px;
    right: -30vw;
    animation: big-fish 10s infinite; /* Adjust duration as needed */

}
/*main .sea-image{*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    z-index: -999;*/
/*    overflow: visible;*/
/*}*/
@keyframes seaText {
    from {
        opacity: 0;
    }
}

.seaText {
    position: absolute;
    width: 20vw;
    max-width: 500px;
    z-index: 1;
    color: white;
    text-align: center;
    font-family: "Original Surfer", serif;
    animation: seaText linear;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
}

.welcome-container {
    top: 500px;
    left: 10%;
    max-width: 300px;
}

.about-us-container {
    top: 1000px;
    right: 10%;
    max-width: 300px;

}

.seaText h1 {
    color: #0FA3B1;
    border-bottom: #0FA3B1 5px solid;
}

.seaText p {
    position: relative;
    font-size: 1.2rem;
}

.seaText p:before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 60px;
    height: 5px;
    background-color: #0FA3B1;
}

.seaText p:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 5px;
    height: 60px;
    background-color: #0FA3B1;
}

.seaText:before {
    content: "";
    position: absolute;
    bottom: 9px;
    right: -10px;
    width: 60px;
    height: 5px;
    background-color: #0FA3B1;
}

.seaText:after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: -10px;
    width: 5px;
    height: 60px;
    background-color: #0FA3B1;
}

.diver-container {
    position: absolute;
    height: 1800px;
    left: calc(50% - 1.5vw);
    top: 150px;
    width: 3vw;
}

.diver {
    top: 400px;
    position: sticky;
    width: 100%;


}

.submarine-container {
    position: relative;
    left: calc(50% - 25vw);
    width: 50vw;
    height: 33vw;
    top: 2500px;
    animation: submarine;
    animation-timeline: view();
    animation-range: entry 0% cover 100%;
    /*background-color: #0FA3B1;*/

}

@keyframes submarine {
    0% {
        -webkit-transform: translateX(-1000px) scale(0.2);
        opacity: 0;
    }
    40% {
        -webkit-transform: translateX(0px) scale(1);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateX(0px) scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(1000px) scale(0.2);
        opacity: 0;
    }
}

.submarine-container img {
    width: 100%;
    position: absolute;
    z-index: -98;
    bottom: 0;
    left: 0;
    user-select: none;
}

.game-container {

    position: absolute;
    width: 65%;
    height: 30%;
    bottom: 2%;
    right: 10%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2%;
    /*background-color: black;*/

}
.game-container:before{
    content: "klik om te spelen";
    position: absolute;
    top: -20%;
    right:20%;
    font-size: 1vw;
    color: white;
}

.game-container div {
    background-color: #0FA3B1;
    /*border-radius: 10px;*/
    border-radius: 50%;
    border: 5px solid white;
    width: 7vw;
    height: 7vw;
    overflow: hidden;
}
.game-container div img{
    width: auto;
    height: 100%;
    position: unset;
    cursor: pointer;
}
.game-container>a {
    text-decoration: none;
    color: white;
    font-family: "Original Surfer", serif;
    font-weight: 500;
    font-size: 1rem;
}

.coral-container {
    position: relative;
    width: 100vw;
    height: 5vw;
    background-color: #f4d3b0;

}

.coral {
    position: absolute;
    bottom: 0;
    z-index: 0;
    width: 100%;
    opacity: 0.9;

}

footer {
    background-image: url("./images/sand footer (1) 1.png");
    background-size: 100% 100%;;
    width: 100vw;
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;


}

.inner-footer {
    width: 100%;
    max-width: 1300px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 33.33%;
}

.footer-part img {
    /*height: 80%;*/
    width: 60%;
    display: block;
}

.footer-part ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-part ul li {
    margin: 10px 0;
}

.footer-part ul li a {
    position: relative;
    text-decoration: none;
    color: black;
    font-family: "Original Surfer", serif;
    font-size: 1.5rem;

}

.footer-part ul li a:before {
    content: "";
    position: absolute;
    bottom: -5px;
    height: 2px;
    left: 50%;
    width: 0%;
    background-color: #000000;
    transition: 0.3s;
}

.footer-part ul li a:hover:before {
    left: 0;
    width: 100%;
}

.footer-middle {
    flex-direction: column;
    justify-content: center;
}

.footer-middle img {
    width: 50%;
}

.footer-middle h1 {
    font-family: "Orbitron", serif;
    text-align: center;
}

.footer-right ul li {
    text-align: right;
}
@media screen and (max-width: 1000px) {
    .text-container {
        position: absolute;
        width: 567px;
        top: 10px;
        left: calc(50% - 270px);
    }

    .big-photo-part .text-container h1 {
        font-size: 74px;
        text-align: center;
    }
    .hat {
        position: absolute;
        width: 60px;
        left: 5px;
        top: 55px;
    }

    .glasses {
        position: absolute;
        width: 55px;
        right: 128px;
        top: 75px;
    }

    .umbrella {
        position: absolute;
        width: 70px;
        right: 20px;
        top: 55px;

    }
    .seaText {
        width: 90vw;
    }
    .diver-container {
        width: 7vw;
    }
    .submarine-container {
        left: calc(50% - 45vw);
        width: 90vw;
    }
    .game-container {
        bottom: 15%;
    }
    .game-container:before{
        font-size: 2vw;
        top: -80%;

    }
    .game-container div {
        width: 15vw;
        height: 15vw;
    }

    .big-fish{
        width: 50vw;
    }
    .footer-part ul li a {
        font-size: 1rem;
    }
    .footer-middle h1 {
        font-size: 1rem;
    }
}
@media screen and (max-width: 650px) {
    nav{
        display: none;
    }
    .phone-nav-btn{
        display: block;
    }
    .text-container {
        position: absolute;
        width: 375px;
        top: 10px;
        left: calc(50% - 160px);

    }
    .big-photo-part .text-container h1 {
        font-size: 45px;
    }
    .hat {
        position: absolute;
        width: 35px;
        left: 5px;
        top: 35px;
    }

    .glasses {
        position: absolute;
        width: 35px;
        right: 106px;
        top: 45px;
    }

    .umbrella {
        position: absolute;
        width: 40px;
        right: 43px;
        top: 34px;

    }
    .diver-container {
        width: 10vw;
    }
    .submarine-container {
        left: calc(50% - 45vw);
        width: 90vw;
    }
    .game-container {
        bottom: 15%;
    }
    .game-container:before {
        font-size: 2vw;
        top: -75%;
    }
    .game-container div {
        border: 3px solid white;
        width: 10vw;
        height: 10vw;
    }
    .game-container a {
        font-size: 0.75rem;
    }
    .welcome-container {
        left: calc(50% - 22.5vw);
    }
    .about-us-container {
        right: calc(50% - 22.5vw);
    }
}