@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 {
            background: url('images/sea.png');
            color: white;
            font-family: "Original Surfer", serif;
            text-align: center;
            height: 100vh;
            margin: 0;
            padding: 0;
            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: 99999;
        }
        
        .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;
        
        }
        .phone-nav ul {
            padding: 0;
        }
        
        .games {
            padding: 10px 5px;
            border-radius: 10px;
            color: #0FA3B1;
            border: 1px solid #0FA3B1;
        
        }
        
        .games:hover {
            background-color: #0FA3B1;
            color: white;
            transition: 1s;
        }
        .container {
            width: 100vw;
            max-width: 700px;
            margin: auto;
            padding-top: 50px;
            margin-bottom: 200px;
        }
        h1 {
            font-size: 2.5em;
        }
        .team-member {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 200px;
    
        }
        .bubble {
            width: 15vw;
            height: 15vw;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
            animation: pulse 2s infinite;
            max-width: 200px;
            max-height: 200px;
        }
        .bubble img {
            width: 100%;
            border-radius: 50%;
        }
        .description {
            max-width: 300px;
            text-align: left;
            font-size: 1em;
        }
        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;
    
        }
        .logo div, .logo img {
            height: 90%;
            color: black;
        }
        
        .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;
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
            }
            50% {
                transform: scale(1.1);
                box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
            }
        }
        .diver {
            position: absolute;
            top: 0;
            left: 70px;
            width: 50px;
            height: 100px;
            background-image: url('images/sea-diver.png');
            background-size: cover;
            animation: vis-beweging 10s infinite;
        }
        
        @keyframes vis-beweging {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(150vh);
            }
        }

        .vis {
            position: absolute;
            top: 0;
            right: 70px;
            width: 50px;
            height: 100px;
            background-image: url('images/sea-diver.png');
            background-size: cover;
            animation: vis-beweging 10s infinite;
        }
        
        @keyframes vis-beweging {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(120vh);
            }
            100% {
                transform: translateY(0);
            }
        }
        @media screen and (max-width: 1000px) {
            
        
           
            .seaText {
                width: 90vw;
            }
            .diver-container {
                width: 7vw;
            }
            
        
            
            .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;
            }
           
            .diver-container {
                width: 10vw;
            }
            .container {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 30px;
    
               }
    
               h1 {margin-bottom: 50px;
            margin-top: 50px;}
    
               .team-member {
                display: flex;
                flex-direction: column;
               }
    
               .bubble {
                width: 30vw;
                height: 30vw;
                max-width: 200px;
                max-height: 200px;
               }
    
               .description {
                max-width: 300px;
                text-align: center;
                font-size: 1em;
               }
    
               .footer-part {
                width: 100%;
               }
               
               #memberY  {
                flex-direction: column-reverse;
               }
    
               #memberM {flex-direction: column-reverse;}
            
            
            
        }

        @media screen and (max-width: 400px) {
           .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30px;

           }

           h1 {margin-bottom: 50px;
        margin-top: 50px;}

           .team-member {
            display: flex;
            flex-direction: column;
           }

           .bubble {
            width: 30vw;
            height: 30vw;
            max-width: 200px;
            max-height: 200px;
           }

           .description {
            max-width: 300px;
            text-align: center;
            font-size: 1em;
           }

           .footer-part {
            width: 100%;
           }
           
           #memberY  {
            flex-direction: column-reverse;
           }

           #memberM {flex-direction: column-reverse;}
        
           
        }