/*
Theme Name: ACO
Theme URI: https://aco.soest.hawaii.edu
Author: Marcos D. Nobre, PacIOOS
Author URI: https://aco.soest.hawaii.edu
Description: ACO theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aco
Tags: one-column, two-columns, right-sidebar, flexible-header, custom-background, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

 /$$$$$$$                     /$$$$$$  /$$$$$$   /$$$$$$   /$$$$$$ 
| $$__  $$                   |_  $$_/ /$$__  $$ /$$__  $$ /$$__  $$
| $$  \ $$ /$$$$$$   /$$$$$$$  | $$  | $$  \ $$| $$  \ $$| $$  \__/
| $$$$$$$/|____  $$ /$$_____/  | $$  | $$  | $$| $$  | $$|  $$$$$$ 
| $$____/  /$$$$$$$| $$        | $$  | $$  | $$| $$  | $$ \____  $$
| $$      /$$__  $$| $$        | $$  | $$  | $$| $$  | $$ /$$  \ $$
| $$     |  $$$$$$$|  $$$$$$$ /$$$$$$|  $$$$$$/|  $$$$$$/|  $$$$$$/
|__/      \_______/ \_______/|______/ \______/  \______/  \______/ 
                                                                         
*/
html {
   max-width: 2000px;
   margin: 0 auto;
    background: linear-gradient(
		180deg,
		#2b9b94 0%,
		#2b9b94 20%, /* Start color */
		#258b8a 30%, /* Slightly darker teal */
		#216c74 40%, /* Teal blending into blue */
		#1b4c5e 50%, /* Darker blue */
		#163b4a 60%, /* Even darker blue */
		#112b36 70%, /* Starting to blend into black */
		#0d1b23 80%, /* Dark blue, almost black */
		/*#090c11 85%, /* Very dark blue, nearly black */
		#000000 90%  /* Pure black */
	  );
}

body {
    background:url('images/top-body.png');
	background-size: auto 100vh;
	background-position: center top;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
    
}
.font-serif {
	font-family: "Mercury SSm Book", "Mercury SSm Book SSm Medium", "Helvetica Neue", Helvetica, sans-serif;
}

a, .nav-link {
	color: rgb(25, 135, 84);
}
.full-width img {
	width: 100%;
	height: auto;
}

/* Default mobile styling */
.hero {
    height: 60vh; /* Mobile devices */
    width: 100%;
    display: block;
}

#svgwrap {
	position: absolute;
	z-index: 1;
	top: 59vh;
	left: 50%;
	margin-left: -215px;
	width: 253px;
	height: 200px;
	overflow: hidden;
}
.navbar-toggler {
	background-color: darkslategray;
	border: solid 1px white;
}
/* Media query for larger screens (e.g., tablets, desktops) */
@media (min-width: 769px) {
    .hero {
        height: calc(100vh - 170px); /* Larger devices */
    }
	#svgwrap {
		position: absolute;
		z-index: 1;
		top: 59vh;
		left: 50%;
		margin-left: -215px;
		width: 253px;
		height: 200px;
		overflow: hidden;
	}
	body {
		background:url('images/top-body.png');
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
	
		
	}
}
.cursor-pointer:hover {
    cursor: pointer;
}

video {
    width: 100%; /* This will make the video responsive to the container width */
    height: auto; /* This will maintain the aspect ratio of the video */
    max-width: 100%; /* This ensures that the video does not overflow its container */
    object-fit: contain; /* This makes sure that the video fits nicely within the bounds of its container */
}


#svg {
	width: 253px;
	height: 2890px;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.menu-left, .menu-right {
    flex: 1; /* Ensures equal space on both sides */
    display: flex;

}
.menu-left {
    justify-content: left; 
}
.menu-right {
    justify-content: right; 
}

.funded {
    width: 12%;
    max-width: 200px;
    height: auto;
}
img {
    max-width: 100%;
}
.table>:not(caption)>*>* {
	background-color: rgb(0, 0,  0 , 0.75) !important;
}
#ballena, #squid {
    opacity: 0; /* Start with the model invisible */
    transition: opacity 2s ease-in-out; /* Animate the opacity change over 2 seconds */
  }

model-viewer#ballena {
	width: 100%;
	height: 650px;
	top: -135px
  }
  model-viewer#squid {
	width: 100%;
	height: 100px;
  }

  model-viewer#splendens {
	width: 100%;
	height: 500px;
  }

footer {
    width: 100%;
    display: block;
}

.blog-post {
	max-width: 80ch;
	margin: 0 auto;
}

.post-content {
    font-size: 1.1em; /* Or a specific size like 18px */
    line-height: 2;
    letter-spacing: 0.5px;
    font-weight: normal; /* Or 'bold' if needed */
}
.post-content p:first-of-type::first-letter {
    float: left;
    font-size: 3.6em;
    line-height: 1.1;
    margin-right: 0.1em;
    font-weight: bold;
}

#baguetteBox-overlay .full-image figcaption {
	padding: 20px;
}

#secondary a {
	color: white;
	text-decoration: none;
}
.ch-80 {
	max-width: 600px;
	margin: 0 auto;
}

.side-images img {
	max-width: 200px;
	height: auto;
	display: block;
	margin: 0 auto !important;
}