@charset "utf-8";
/* ===================================
   GLOBAL STYLES
=================================== */

:root{
    --page-padding:clamp (20px, 5vw, 80px);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



html{
    scroll-behavior:smooth;
}

body{
    width:100%;
    min-height:100vh;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

.hamburger{
    display:none;
}


body{ /* linear gradiesnt to apear like the user is scrolling deeper into the ocean depths */
    background: linear-gradient(
        to bottom,
        #49A9B7 0%,
        #3E8EA4 30%,
        #2E6F88 60%,
        #1E566F 80%,
        #143F56 100%
    );
}


/* =====================================
   HEADER
===================================== */

header{
	background-color:#ffffff;
    height:80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
	position:relative;
	padding:0 50px; /*This keeps the content comfortably spaced on desktop while automatically reducing the side padding on smaller screens*/
}


.logo{
    display:flex;
    align-items:center;
}

.logo img{
    height:75px;
    width:auto;
    display:block;
}



nav ul{
    list-style:none;
    margin:0;
    padding:0;
	display:flex;
	gap: 35px;
	
}

nav a{
    text-decoration:none;
    color:#000;
	font-size:1rem;      /* 16px */
    font-weight:400;
	font-family: "Century Gothic", Arial, sans-serif;
}



/* =====================================
   HERO
===================================== */

#hero{
    background-color:#88A8C1;
    display:flex;
    justify-content:space-between;
    align-items:center;
	min-height:650px;
    padding-left:40px;
    padding-right:30px;
}

#hero h1{

    font-family:"Century Gothic", Arial, sans-serif;
    font-size:clamp(3rem, 6.5vw, 6.25rem); /* clamp makes the text scale smoothly during browser resizing*/
    font-weight:400;
    color:#ffffff;
    line-height:1.05;
    margin:0;
}

.heroimage{
    width: 75%;
    max-width: 900px;
}

.heroimage img{
    width: 100%;
    height: auto;
}


/* =====================================
   FEATURED SHARK CARDS
===================================== */

main h2{
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:clamp(2rem, 5vw, 3rem);
    font-weight:400;
    color:#ffffff;
    text-align:center;
    margin-top: 50px;
    margin-bottom: 100px;

}

.sharkgrid{

    width:100%;
    max-width:1000px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:50px;
    position:relative;
    z-index:1;


}

#featuredsharks{
    position:relative;
    overflow:hidden;
}



.card{
    flex:0 1 calc(50% - 25px);
    max-width:420px;
    text-align:center;
    color:white;
    font-family:"Century Gothic", Arial, sans-serif;
}

.card h3{
    margin-top: 10px;
    margin-bottom: 12px;
}

.card p{
    line-height:1.4;
    margin-bottom:20px;
}

.card .learnmore{
    margin-top:auto;
}

.card img{
    border-radius:20px;
    width:100%;
}



.bubble{
    position:absolute;
    pointer-events:none;
    opacity:0.75;
    z-index: 0;
}

.bubblesmall{
    width:80px;
}
.bubblelarge{
    width:220px;
}

.bubbleone{
    left:25px;
    top:430px;
}

.bubbletwo{
    right:10px;
    top: 200px;
}

.bubblethree{
    right:30px;
    top: 320px; 
}





/* =====================================
   SHARK FACTS
===================================== */



#sharkfacts h2{
    color:#ffffff;
    text-align:center;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:clamp(2rem, 5vw, 3rem);
    font-weight:400;
    margin-bottom:40px;
}

#sharkfacts{
    padding:60px 40px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.fact{
    width:100%;
    max-width:1100px;
    display:flex;
    align-items:center;
    gap:30px;
    background-color:#71b7cc;
    border-radius:24px;
    padding:18px;
    margin-bottom:24px;
}

.fact img{
    width:38%;
    max-width:400px;
    height:260px;
    object-fit:cover;
    border-radius:18px;
}

.facttext{
    flex:1;
}

.facttext h3{
    color:white;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:2rem;
    font-weight:400;
    margin-bottom:18px;
}

.facttext p{
    color:white;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:1.15rem;
    line-height:1.35;
    margin-bottom:24px;
}

.learn-more{
    display:inline-block;
    background-color:#005982;
    color:#ffffff;
    text-decoration:none;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:1.1rem;
    padding:12px 18px;
    border-radius:16px;
}

.learn-more{
    display:inline-block;
    background-color:#005982;
    color:#ffffff;
    text-decoration:none;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:1.1rem;
    padding:12px 18px;
    border-radius:16px;
}







/* =====================================
   GAMES
===================================== */

#games{ 
    padding:80px 40px 140px;
    position:relative;
}

#games h2{
    width:max-content;
    margin:0 auto 10px;
    padding: 18px 60px;
    color:white;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:clamp(2rem, 4vw, 3rem);
    font-weight:400;
    text-align:center;
    border-radius:28px;
}

.gamescontent{
    width:100%;
    max-width:1280px;
    margin:0 auto;   
    display:flex;
    align-items:stretch;
    border:10px solid #71d5f3;
    border-radius: 30px;
    padding:0;
    background-color:#3a8092;
}

.gamelinks{
    width:290px;
    list-style:none;
    margin:0;
    padding:30px 40px;
    display:flex;
    flex:0 0 290px;
    flex-direction:column;
    justify-content:flex-start;
    gap:20px;
}

.gamelinks a{
    display:block;
    padding:16px 20px;
    background-color:#005982;
    color:#ffffff;
    text-decoration:none;
    text-align:center;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:1.2rem;
    border:1px solid #79cbe8;
    border-radius:18px;
}

.gamesimage{
    flex:1;
    min-width:0;
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:0 20px 20px 0;
}

.bubble{
    position:absolute;
    pointer-events:none;
    opacity:0.75;
    z-index:0;
}
.bubblesmall{
    width:80px;
}
.bubblelarge{
    width:220px;
}

.bubblefour{
    left:25px;
    top:430px;
}

.bubblefive{
    right:10px;
    top: 200px;
}

.bubblesix{
    right:30px;
    top: 320px; 
}

.bubbleseven{
    right:30px;
    top: 320px; 
}
	




/* =====================================
   NEWSLETTER
===================================== */


#newsletter{
   #newsletter{
    position:relative;
    overflow:hidden;
    padding:100px 40px 0;
}
}

#newsletter h2{
    color:#ffffff;
    text-align:center;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:clamp(2rem, 5vw, 3rem);
    font-weight:400;
    margin-bottom:45px;
    
}


.newsletterform{
    width:100%;
    max-width:580px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:28px;
    position:relative;
    z-index:1;
}

.newsletterform label{
    color:#ffffff;
    text-align:left;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:1rem;
    margin-bottom:-18px;
}

.newsletterform input{
    width:100%;
    padding:20px;
    border:1px solid #cccccc;
    background-color:#ffffff;
    color:#111111;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:1.1rem;
}

.newsletterform button{
    align-self:center;
    padding:16px 55px;
    border:none;
    border-radius:28px;
    background-color:#71b7cc;
    color:#ffffff;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:1.4rem;
    cursor:pointer;
}


#newsletter h2,
.newsletterform,
.footernav{
    position:relative;
    z-index:1;
}







/* =====================================
   FOOTER
===================================== */


footer{
    padding:30px 0 45px;
    text-align:center;
    position:relative;
    overflow:hidden;
    width:100%;
}

.footernav{
    list-style:none;
    display:none;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin:40px 0;
    padding:0;
}


.footernav a{
    color:#ffffff;
    text-decoration:none;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:0.95rem;
   
}

footer p{
    text-align:center;
    margin:18px 0 0;
    color:#ffffff;
    font-family:"Century Gothic", Arial, sans-serif;
    font-size:0.95rem;  
}

.sociallinks{
    width:max-content;
    margin:30px auto 0;
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    background-color:#71b7cc;
    border-radius:30px;
}

.sociallinks img{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
}




.coral{
    position:relative;
    width:100%;
    height:auto;
    display:block;
    margin-top:-20px;
    pointer-events:none;
}




 



/* =========================================================================
   MEDIA QUERIES
============================================================================ */


/*------------------------
         1000px
------------------------*/

@media (max-width:1000px){

    .newsletterform{
        gap:20px;
    }

    .newsletterform input{
        padding:16px;
    }

}


/*------------------------
         920px
------------------------*/

@media (max-width:920px){

/* Navigation */

    .hamburger{
        display:block;
        background:none;
        border:none;
        font-size:2rem;
        cursor:pointer;
    }

    #main-nav{
        display:none;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background-color:#ffffff;
        z-index:1000;
    }

    #main-nav.nav-open{
        display:block;
    }

    #main-nav ul{
        flex-direction:column;
        gap:0;
        text-align:center;
    }

    #main-nav li{
        border-top:1px solid #dddddd;
    }

    #main-nav a{
        display:block;
        padding:16px 20px;
    }


}

/*------------------------
         768px
------------------------*/


/* Header */

@media (max-width:768px){

    header{
        padding:0 20px;
    }

    .logo img{
        height:65px;
    }


   


/* Hero and Hero Image*/

    #hero{
        flex-direction:column;
        text-align:center;
        min-height:auto;
        padding:40px 20px 50px;
        gap:24px;
    }

    .heroimage{
        width: 85%;
        max-width:420px;
    
    }



/* Featured Shark Cards*/

    .card{
        flex:0 1 100%;
        max-width:420px;
        padding:0 10px;
    }

    .card p{
        margin-bottom:18px
    }

    .card .learnmore{
        margin-bottom:10px;
    }
    


/* Shark Facts */

    .fact{
        flex-direction:column;
        text-align:center;
    }

    .fact img{
        width:100%;
        max-width:500px;
        height:auto;
        margin-bottom:25px;
    }

    .fact-text{
        width:100%;
    }


/* Games */

    .gamescontent{
        flex-direction:column;
        align-items:stretch;
    }

    .gamesimage{
        width:100%;
        max-width:none;;
        height:auto;
        order:-1;
        border-radius:0 20px 20px 0;
    }

    .gamelinks{
        width:100%;
        align-items:center;
        margin-top:30px;
    }


/* Newsletter */

    #newsletter{
        padding:60px 20px 0;
    }

    .newsletterform{
        width:100%;
        max-width:100%;
        gap:16px;
    }

    .newsletterform input{
        padding:11px 12px;
        font-size:1rem;
    }

    .newsletterform button{
        padding:12px 40px;
        font-size:1.2rem;
    }


/* Footer */

     .footernav{
        display:flex;
        flex-direction:column;
        gap:12px;
        margin:40px 0;
        padding:0 20px;
        list-style:none;
    }
}