/* Styling for text and layout */
       #headerText {
        font-size: 30px;
        font-weight: bold;
        font-style: italic;
        margin-bottom: 20px; 
    }
    #normaltext {
        font-size: 15px;
        font-style: italic;
        margin-bottom: 20px; 
    }
    #normaltext2 {
        font-size: 22px;
        font-style: italic;
        margin-bottom: 20px; 
    }
    #normaltextbutfar {
        font-size: 22px;
        font-style: italic;
        margin-bottom: 40px; 
    }
    #bordering {
        font-size: 16px;
        margin-bottom: 40px; 
        color: rgba(0, 0, 0, 0.274);
    }
    #dynamicText {
        font-size: 11px;
        font-style: italic;
        color: rgba(255, 255, 255, 0.432);
        transition: opacity 0.3s ease, transform 0.3s ease;
        visibility: visible;
        opacity: 1;
        
        


}

.hidden {
opacity: 0;
visibility:hidden;
transform: translateY(-10px);
}
        
    
    #dynamicText2 {
        font-size: 8px;
        font-style: bold;
        color: rgb(0, 0, 0);
    }
    body {
        display: flex;
        height: 100vh;
        margin: 0;
        padding: 0;
        background: linear-gradient(90deg, #324cff, #2A8FEA, #24BBDA );
        flex-direction: row;  /* Aligns the sidebar and content side by side */
    }

    /* Sidebar styling */
    .sidebar {
        width: 250px;
        height: 100vh;
        background-color: #00000027;
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 20px;
        padding-left: 10px;
        color: white;
    }

    .sidebar h2 {
        text-align: center;
        color: rgb(0, 0, 0);
    }

    .sidebar a {
        display: block;
        color: rgb(0, 0, 0);
        padding: 10px 15px;
        text-decoration: none;
        margin: 5px 0;
        border-radius: 4px;
    }

    .sidebar a:hover {
        background-color: #0000001e;
    }

    /* Main content styling */
    .the-shitassiest-of-shitass-webpages {
        margin-left: 100px; 
        flex-grow: 1; 
        display: flex;
        justify-content: center; 
        align-items: center; 
        text-align: center; 
    }
    .content-box a {
        display: block;
        color: rgb(0, 0, 0);
        padding: 10px 15px;
        text-decoration: none;
        margin: 5px 0;
        border-radius: 4px;
    }
    .content-box a:hover {
        background-color: #0000001e;
    }

    .content-box {
        padding: 20px;
        background-color: rgba(255, 255, 255, 0); /* Light background for contrast */
        border-radius: 8px;
        display: flex;
        flex-direction: column; /* Stack text vertically */
    }
        button {
  background-color: #ffffff50; 
  color: rgb(0, 0, 0); 
  padding: 8px 13px; 
  font-size: 16px; 
  font-style: italic;
  border: none; 
  border-radius: 5px; 
  cursor: pointer; 
}

button:hover {
  background-color: #ffffff91; 
}
.text-shadow {
  font-size: 30px;
  font-weight: bold;
  color: #000000; /* Text color */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.dyn-text-shadow {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
}
#dynamicText a {
  color: inherit; 
  text-decoration: none; 
}
#dynamicText a:hover { 
  text-decoration: bold; 
  color: #7c0000 
}

    p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    p.mix {border-style: dotted dashed solid double;}