/* Import the Quantico font */
@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap');

/* Ensures body has a full-height striped background */
/* Prevent horizontal scrolling */
html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
    font-family: "Quantico", serif;
    margin: 0;
    padding: 0;
    color: whitesmoke;
    text-align: center;
    
    /* Striped background that appears when scrolling */
    background: repeating-linear-gradient(
        -55deg,
        #333,
        #333 10px,
        #222 10px,
        #222 23px
    );
}

/* Container for the blurred background (ONLY at the top) */
#background-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Covers only the first screen */
    overflow: hidden; /* Prevents background from expanding */
}

/* Blurred background at the top */
#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 100vh; /* Only covers the first screen */
    background: url('bg.jpg') no-repeat center center/cover;
    filter: blur(5px); /* Apply Gaussian Blur */
    z-index: -2;
}

/* Overlay for smooth transition */
#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Covers only the first screen */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #111 100%);
    transition: opacity 0.5s ease;
    z-index: -1;
}
/* Top Bar - short horizontal bar across the striped background */
#top-bar {
  position: absolute;
  top: 100vh; /* Starts where the striped background begins */
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* Adjust width as needed */
  height: 20px; /* Adjust height as needed */
  background-color: darkslategray; /* Color of the bar */

  border-radius: 5px; /* Optional rounded edges */
}

/* Push content below the blurred background */
.content {
    position: relative;
    z-index: 1;
    padding-top: 5vh;
    min-height: 200vh; /* Ensures scrolling */
}

/* Headings */
h1 {
    padding-top: 250px;
    font-weight: 700;
    font-size: xxx-large;
}

h2 {
    font-weight: 400;
    font-size: large;
}

/* Social Links */
.sociallinks {
    padding: 10px;
}

.socialbutton {
    padding: 4px;
    text-decoration: none;
}

/* Font Styles */
.quantico-regular {
    font-family: "Quantico", serif;
    font-weight: 400;
    font-style: normal;
}

.quantico-bold {
    font-family: "Quantico", serif;
    font-weight: 700;
    font-style: normal;
}

.quantico-regular-italic {
    font-family: "Quantico", serif;
    font-weight: 400;
    font-style: italic;
}

.quantico-bold-italic {
    font-family: "Quantico", serif;/* Import the Quantico font */
    @import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap');
    
    /* Prevent horizontal scrolling */
    html, body {
        width: 100%;
        overflow-x: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    /* Ensure body has a full-height striped background */
    body {
        font-family: "Quantico", serif;
        margin: 0;
        padding: 0;
        color: whitesmoke;
        text-align: center;
    
        /* Striped background that appears when scrolling */
        background: repeating-linear-gradient(
            -55deg,
            #333,
            #333 10px,
            #222 10px,
            #222 23px
        );
        flex-grow: 1;
    }
    
    /* Container for the blurred background (ONLY at the top) */
    #background-container {
        position: relative;
        width: 100%;
        height: 100vh; /* Covers only the first screen */
        overflow: hidden; /* Prevents background from expanding */
    }
    
    /* Blurred background at the top */
    #background {
        position: absolute;
        top: 0;
        left: 0;
        width: 110%;
        height: 100vh; /* Only covers the first screen */
        background: url('bg.jpg') no-repeat center center/cover;
        filter: blur(5px); /* Apply Gaussian Blur */
        z-index: -2;
    }
    
    /* Overlay for smooth transition */
    #overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Covers only the first screen */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #111 100%);
        transition: opacity 0.5s ease;
        z-index: -1;
    }
    
    /* Top Bar - short horizontal bar across the striped background */
    #top-bar {
        position: absolute;
        top: 100vh; /* Starts where the striped background begins */
        left: 50%;
        transform: translateX(-50%);
        width: 100%; /* Adjust width as needed */
        height: 20px; /* Adjust height as needed */
        background-color: darkslategray; /* Color of the bar */
        border-radius: 5px; /* Optional rounded edges */
    }
    
    /* Push content below the blurred background */
    .content {
        position: relative;
        z-index: 1;
        padding-top: 5vh;
        min-height: 200vh; /* Ensures scrolling */
    }
    
    /* Striped Background Text Section */
    #striped-section {
        position: relative;
        width: 100%;
        min-height: 500vh; /* Adjust height as needed */
        padding: 50px 0;
        text-align: center;
        flex-grow: 1;
    }
    
    /* Style text inside the striped background */
    #striped-section h2 {
        background: rgba(0, 0, 0, 0.5); /* Semi-transparent for readability */
        display: inline-block;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 700;
        font-size: xxx-large;
        color: white; /* Ensures visibility */
    }
    
    #striped-section p {
        background: rgba(0, 0, 0, 0.5); /* Semi-transparent for readability */
        display: inline-block;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 700;
        font-size: x-large;
        color: white; /* Ensures visibility */
    }
    
    /* Footer */
    #footer {
        position: relative;
        width: 100%;
        padding: 10px 0;
        background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
        color: white;
        text-align: center;
        font-size: 14px;
        bottom: 0;
    }
    font-weight: 700;
    font-style: italic;
}


/* Striped Background Text Section */
#striped-section {
  position: relative;
  width: 100%;
  min-height: 500vh; /* Adjust height as needed */
  padding: 50px 0;
  text-align: center;
}

/* Style text inside the striped background */
#striped-section h2{
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent for readability */
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
    font-weight: 700;
    font-size: xxx-large;
  color: white; /* Ensures visibility */
}

#striped-section p{
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent for readability */
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
    font-weight: 700;
    font-size: x-large;
  color: white; /* Ensures visibility */
}