.opensans {
  font-family: "Open Sans", sans-serif;
}

.inactivelink {
    color:black;
	text-decoration:none;
}


      /* Desktop Style */
      @media (min-width: 601px) 
      {
        body {
          width: 40%;
          /* Set the width to 50% of the viewport width */
          height: 90vh;
          /* Set the height to be 80% of the viewport height */
          margin: 2% auto;
          /* Center the body vertically and horizontally */
        }



        .bulletlisting {
            list-style: disc;
            padding-left: 1.25rem;
            font-family: 'Open Sans', sans-serif;
            font-size: 16px;
        }

            .bulletlisting li::marker {
                color: #3ba0e9; /* bullet color */
            }

            .bulletlisting a {
                color: #0d6efd;
                text-decoration: none;
            }

                .bulletlisting a:hover,
                .bulletlisting a:focus {
                    text-decoration: underline;
                }



        .macroclade {
          text-align: left;
          font-weight: bold;
          font-size: 22px;
          background-color: #a5bfc9;
          color: #27256e;
        }
        
        .clade {
          text-align: left;
          font-size: 20px;
          background-color: #3ba0e9;
          color: white;
        }
       
        .subclade {
          text-align: left;
          font-size: 18px;
          background-color: #f4fffe;/*#eef2f5;*/
          color: steelblue;
          padding-left: 10px;
        }
		
        .story {
			font-family: 'Open Sans', sans-serif;
          padding-left: 10px;
		  padding-right: 10px;
          font-size: 16px;
          text-align: justify;
          color: #3a3e4b;
          line-height: 21px;
        }
        
		.main {
			font-family: 'Open Sans', sans-serif;
		  text-decoration: underline;
          font-size: 16px;
          text-align: justify;
          color: #0d6efd;
          line-height: 21px;
        }
		
		.famous {
			font-family: 'Open Sans', sans-serif;
		  text-decoration: none;
          font-size: 16px;
          text-align: justify;
          color: #3a3e4b;
          line-height: 21px;
        }
		
		.ydna {
			font-family: 'Open Sans', sans-serif;
		  color:#3a3e4b; 
		  font-size: 14.5px; 
		  text-align: left;
		  padding-left: 10px;
		  padding-right: 10px;
		  padding-bottom: 40px;
		  line-height: 16px;
		}
		
		.inactivelink {
			color: #3a3e4b;
			text-decoration: none;
		}
		
		
        .pic {
          float: left;
          margin-top: 4px;
          margin-right: 8px;
          width: 60px;
          height: 68px;
        }
        
		
        .hover-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 300px;
            height: 340px;
            border: 1px solid black;
            display: none;
            z-index: 9999;
        }
    
        .hover-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
         
        .collapsible {
            collapse: show; /* Initially hidden */
            color: white;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
        }

        .active, .collapsible: hover {
            background - color: #555;
        } 

        .macroclade.collapsible-open .collapsible    {
            display: block;
        }

        .content {
            padding: 0 0px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            background-color: white;
            font-family: 'Open Sans', sans-serif;
            padding-left: 0px;
            font-size: 16px;
            text-align: justify;
            color: black;
        }
         
        /* Override Bootstrap button styles */
        .btn.btn-primary {
            background-color: transparent;
            color: transparent;
            border-color: transparent;
            padding: 0; /* Remove padding */
        }
    
        /* Override Bootstrap button styles on click */
            .btn.btn-primary:active {
                background-color: transparent;
                color: transparent;
                border-color: transparent;
                padding: 0; /* Remove padding */
            }
           
        /* Override Bootstrap button styles when focused */
        .btn.btn-primary:focus {
            outline: none; /* Remove the default focus outline */
            box-shadow: none; /* Remove any box shadow */
        }
        
        }
    
      /* Mobile Style */
      @media (max-width: 600px) {
        .body {
            
        }


        .bulletlisting {
            list-style: disc;
            padding-left: 1.75rem;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
        }

            .bulletlisting li::marker {
                color: #3ba0e9; /* bullet color */
            }

            .bulletlisting a {
                color: #0d6efd;
                text-decoration: none;
            }

                .bulletlisting a:hover,
                .bulletlisting a:focus {
                    text-decoration: underline;
                }


        .macroclade {
          text-align: center;
          font-weight: bold;
          font-size: 22px;
          background-color: #3ba0e9; /*#a5bfc9;*/
          color: #27256e;
        }

        .clade {
          text-align: center;
          font-size: 20px;
          background-color: #3ba0e9;/*grey;*/
          color: white;
        }

        .subclade {
          text-align: center;
          font-size: 18px;
          background-color: #f4fffe;/*lightgray;*/
          color: steelblue;
        }
 
        .story {
		  font-family: 'Open Sans', sans-serif;
          padding-left: 60px;
		  padding-right: 60px;
          font-size: 14px;
          text-align: justify;
          line-height: 18.5px;
          color:#3a3e4b;
        }
		
        .main {
			font-family: 'Open Sans', sans-serif;
	      text-decoration: none;
          font-size: 14px;
          text-align: justify;
          line-height: 18.5px;
          color: #0a58ca;
        }

        .famous {
			font-family: 'Open Sans', sans-serif;
          		  text-decoration: none;
				  font-size: 14px;
          text-align: justify;
          line-height: 18.5px;
          color:#3a3e4b;
        }

		.ydna {
			font-family: 'Open Sans', sans-serif;
		  color:#3a3e4b; 
		  font-size: 13px; 
		  text-align: left;
		  padding-left: 60px;
		  padding-right: 60px;
		  padding-bottom: 40px;
		  line-height: 15.5px;
		}
		
		.inactivelink {
			color: #3a3e4b;
			text-decoration: none;
		}

        .pic {
            float: left;
            margin-top: 4px;
            margin-right: 8px;
            width: 64px;
            height: 68px;
            box-shadow: 0 8px 30px rgba(66, 86, 117, 0.4);
            border-radius: 50%;
        }

        .hover-container {
            position: fixed;
            width: 75% !important;
            height: 55% !important;
            min-width: 100px; /* Set minimum width */
            min-height: 120px; /* Set minimum height */
            /*border: 1px solid black;*/
            display: none;
            z-index: 9999;
            background-color: white !important;
        }

            .hover-container img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                opacity: 0.98 !important;
                border-radius: 5px;
                /*border: 1px solid cornflowerblue;*/
                /* THE GLOW EFFECT */

                box-shadow:
                /* --- TOP SHADOWS (Use large negative offset-y) --- */
                /* 1. Top Red Wave (Inner - 5px) */
                0 -15px 15px 0 rgba(80, 80, 120, 0.9),
                /* 2. Top Cyan Wave (Middle - 10px) */
                0 -20px 20px 0 rgba(0, 255, 255, 0.5),
                /* 3. Top Blue Wave (Outer - 15px) */
                0 -25px 25px 0 rgba(0, 0, 255, 0.1),
                /* --- BOTTOM SHADOWS (Use large positive offset-y) --- */
                /* 4. Bottom Red Wave (Inner - 5px) */
                0 15px 15px 0 rgba(80, 80, 120, 0.9),
                /* 5. Bottom Cyan Wave (Middle - 10px) */
                0 20px 20px 0 rgba(0, 255, 255, 0.5),
                /* 6. Bottom Blue Wave (Outer - 15px) */
                0 25px 25px 0 rgba(0, 0, 255, 0.1) !important;
            } 
        
        .collapsible {
            collapse: show; /* Initially hidden */
            color: white;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
        }

        .active, .collapsible: hover {
    background-color: #555;
        } 

        .macroclade.collapsible-open .collapsible    {
            display: block;
        }

        .content {
            padding: 0 0px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            background-color: white;
            font-family: 'Open Sans', sans-serif;
            padding-left: 0px;
            font-size: 16px;
            text-align: justify;
            color:#151619;
        }

        /* Override Bootstrap button styles */
        .btn.btn-primary {
            background-color: transparent;
            color: transparent;
            border-color: transparent;
            padding: 0; /* Remove padding */
        }
    
        /* Override Bootstrap button styles on click */
            .btn.btn-primary:active {
                background-color: transparent;
                color: transparent;
                border-color: transparent;
                padding: 0; /* Remove padding */
            }
           
        /* Override Bootstrap button styles when focused */
        .btn.btn-primary:focus {
            outline: none; /* Remove the default focus outline */
            box-shadow: none; /* Remove any box shadow */
        }
        
      .clear {
        clear: left;
        display: block;
      }
/*
      a:link {
        color: inherit;
        background-color: transparent;
        text-decoration: none;
      }

      a:visited {
        color: inherit;
        background-color: transparent;
        text-decoration: none;
      }

      a:hover {
        color: inherit;
        background-color: transparent;
        text-decoration: none;
      }

      a:active {
        color: inherit;
        background-color: transparent;
        text-decoration: none;
      }

      .underlined {
        text-decoration: underline;
      }
      */