/* ===========================
   Global Reset
=========================== */

* {

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html,
body {

    width:100%;
    min-height:100%;

    margin:0;
    padding:0;

    overflow-x:hidden;

    background:#021d46;

}


/* ===========================
   Aquarium Container
=========================== */

#aquarium {

    position:relative;

    width:100%;

    min-height:100vh;

    height:100svh;

    overflow:hidden;

}


/* ===========================
   Background
=========================== */

.background {

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:1;

}


/* ===========================
   Sand
=========================== */

.sand {

    position:absolute;

    bottom:0;
    left:0;

    width:100%;

    height:auto;

    z-index:2;

}


/* ===========================
   Decorations
=========================== */

.anchor,
.kelp {

    position:absolute;

    bottom:0;

    z-index:3;

    pointer-events:none;

}


/* Anchor */

.anchor {

    left:6%;

    width:clamp(600px, 18vw, 600px);

    bottom:12%;

    filter:
        drop-shadow(0 15px 15px rgba(0,0,0,.45))
        brightness(.75);

}


/* Kelp */

.kelp {

    right:4%;

    width:clamp(160px, 22vw, 350px);

    bottom:10%;

    transform-origin:bottom center;

    filter:
        drop-shadow(0 10px 12px rgba(0,0,0,.4));

    animation:kelpSway 6s ease-in-out infinite;

}


/* ===========================
   Fish
=========================== */

#fishContainer {

    position:absolute;

    inset:0;

    z-index:4;

}



.fish {

    position:absolute;

    max-width:clamp(40px, 8vw, 120px);

    height:auto;

    pointer-events:none;

}


/* ===========================
   Bubbles
=========================== */

#bubbleContainer {

    position:absolute;

    inset:0;

    z-index:5;

}


.bubble {

    position:absolute;

    width:clamp(5px,1vw,10px);

    height:clamp(5px,1vw,10px);

    border-radius:50%;

    background:rgba(255,255,255,.45);

}


/* ===========================
   Water Effect
=========================== */

#aquarium::after {

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,80,180,.08);

    pointer-events:none;

    z-index:6;

}


/* ===========================
   Blog Overlay
=========================== */

.aquariumBlog {

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    width:min(800px,90vw);

    display:flex;

    align-items:center;

    gap:clamp(15px,3vw,30px);

    padding:clamp(20px,4vw,35px);

    background:rgba(0,35,80,.9);

    border:2px solid rgba(255,255,255,.35);

    border-radius:8px;

    backdrop-filter:blur(12px);

    color:white;

    z-index:50;

}


.blogImage {

    width:clamp(150px,35vw,300px);

    height:auto;

    aspect-ratio:3 / 2;

    object-fit:cover;

    border-radius:5px;

}


.blogContent {

    flex:1;

}


.blogContent h2 {

    font-size:clamp(22px,4vw,36px);

    margin-bottom:15px;

}


.blogContent p {

    font-size:clamp(14px,2vw,20px);

    line-height:1.5;

    margin-bottom:15px;

}



/* ===========================
   Mobile Layout
=========================== */

@media(max-width:700px) {


    #aquarium {

        height:100svh;

    }


    .aquariumBlog {

        flex-direction:column;

        text-align:center;

        max-height:85vh;

        overflow:auto;

    }


    .blogImage {

        width:min(80vw,300px);

    }


    .anchor {

        left:2%;

    }


    .kelp {

        right:2%;

    }


}


/* ===========================
   Small Phones
=========================== */

@media(max-width:400px) {


    .aquariumBlog {

        padding:15px;

        width:92vw;

    }


    .blogContent p {

        font-size:14px;

    }


}