/* blue: #102746; */ 
  /* pink: #B11254; */ 

/* global styles */

body
{
    background-color: whitesmoke;
    opacity: 0;
    transition: opacity .5s ease;
    
}

body.loaded
{
        opacity: 1;
}

header
{
    background-color: whitesmoke;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease;
}

header.faded {
  opacity: 0; /* or whatever opacity you want */
  pointer-events: none;
  
}

h1
{
    position: relative;
    font-size: 1.4rem;
    font-family: "Commissioner";
    text-align: left;
    font-weight: 600;
    color: #B11254;
}

h2
{
    position: relative;
    font-size: 2.4rem;
    font-family: "Commissioner";
    text-align: left;
    font-weight: 800;
    color: whitesmoke;
    font-size: clamp(1.8rem, 1.5vw, 2.4rem);
}

h3
{
    position: relative;
    font-size: 1.1rem;
    font-family: "Commissioner";
    text-align: center;
    font-weight: 600;
    color: #102746
}

h4
{
 position: relative;
    font-size: 2.4rem;
    font-family: "Commissioner";
    text-align: center;
    font-weight: 600;
    color: #B11254;
}

h5
{
        position: relative;
    font-size: 1.4rem;
    font-family: "Commissioner";
    text-align: left;
    font-weight: 600;
    color: #102746
}

/* classes */

.container
{
     
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

 

.banner
{
    background-color: #102746;

    
 
}

 

.strip
{
    background-color: #102746;
 
}

.strip2
{
    background-color: lightgrey;
    background: linear-gradient(to bottom, lightgrey 95%, transparent 100%);
}

.p1
{
    
    font-family: "Bitter";
    font-weight: 200;
    color: #102746;
    text-align: left;
          font-size: clamp(16px, 2vw, 20px);
    
}

.p2
{
    
    font-family: "Bitter";
    font-weight: 200;
    color: whitesmoke;
           font-size: clamp(16px, 2vw, 20px);
}

.p3
{

}

li
{
    
    font-size: 1.2rem;
    font-family: "Bitter";
    font-weight: 200;
    color: #102746;
}

 .body_img
 {
    height: 400px;
    box-shadow: 0px 2px 6px rgb(0, 0, 0, 0.3);
      width: auto;
  height: 400px; /* example fixed height */
 }

.title_assembly
{
  
}

.navbar
{
    
}

.navbar.faded
{
   
}

.nav_link {
  font-family: "Commissioner";
  text-decoration: none;
  font-weight: 600;
  color: #102746;
  position: relative;

  transition: color 0.3s ease;
}

.nav_link::after {
  content: "";
  position: absolute;
  bottom: -4px; /* adjust for offset */
  left: 0;
  height: 2px;
  width: 100%;
  background: #B11254;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.1s ease;
}

.nav_link:hover {
  color: darkgrey;
}

.nav_link:hover::after {
  transform: scaleX(1);
}

.nav_link_selected { 
  font-family: "Commissioner";
  font-weight: 600;
  text-decoration: none;
  color: #B11254;
}

.content_block
{
     
 
}

.content_block2
{
    background-color: whitesmoke;    
      
      
}


.content_container
{
     
           
}

.content_container2
{
 

}



/* IDs */

#disclaimer
{

  font-family: "Commissioner";
  font-size: 0.75rem;
 
  color: #102746;
}

#mob_menu
{

  background-color: whitesmoke;  
  color: blue;
 
  pointer-events: auto; /* captures clicks */
}

.burger
{
      font-family: "Commissioner";
  text-decoration: none;
 
  color: #102746;
  position: relative;

  transition: color 0.3s ease;
      font-size: 2rem;
}

.burger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.burger.open span:nth-child(2) {
  opacity: 0;
}

.burger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}