body {
  background-color: black;
  margin: 0; /* Remove default margin */
}

img {
  opacity: 0.2; /* Set default opacity for images */
}

h1 {
  color: white;
  text-align: center;
  font-family: Arial, sans-serif;
}

.container {
    position: relative;
    height: 100vh; /* Ensure the container takes the full height of the viewport */
}

.background-image {
    width: 100vw; /* Set width to 100% of the viewport width */
    height: 100vh; /* Set height to 100% of the viewport height */
    position: fixed; /* Fix the position to cover the entire screen */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    z-index: -1; /* Send it to the back */
    object-fit: cover; /* Ensure the image covers the area without distortion */
}

.centered {
    position: relative; /* Change to relative for top positioning */
    top: 50px; /* Add some space from the top */
    text-align: center; /* Center text within the container */
    width: 100%; /* Ensure it takes full width */
}

.typewriter {
    display: inline-block;
    position: relative;
}

.typewriter h1 {
    color: white;
    font-family: JMH-Typewriter;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    border-right: .15em solid orange;
    width: 0;
}

.typewriter.typing h1 {
    animation: 
        typing 3.5s steps(var(--steps), end) forwards,
        blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: rgb(255, 255, 255); }
}

.language-selector {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.language-selector select {
    padding: 8px 12px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: 1px solid #333;
    cursor: pointer;
}

.language-selector select:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.social-links {
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: center; /* Center the icons */
    align-items: center; /* Align items vertically */
    margin-top: 20px; /* Add some space above */
}

.social-links a {
    margin: 0 10px; /* Add spacing between icons */
}

.social-links img {
    width: 50px; /* Set a width for the images */
    height: auto; /* Maintain aspect ratio */
    opacity: 1; /* Set opacity to 1 for social media images */
}

.large-bar {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the content */
    align-items: center; /* Center items vertically */
    background-color: #333; /* Background color for the bar */
    color: white; /* Text color */
    padding: 20px; /* Padding around the content */
    margin-top: 15px; /* Space above the bar */
    width: 100%; /* Ensure it takes full width */
}

.left-content, .right-content {
    flex: 1; /* Allow both sections to take equal space */
    display: flex; /* Use flexbox for inner content */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    padding: 0 20px; /* Padding on the sides */
}

.left-content h2, .right-content h2 {
    margin: 0; /* Remove default margin */
    text-align: center; /* Center text within the section */
}

.custom-hr {
    width: 5px; /* Width of the vertical line */
    height: 400px; /* Height of the line */
    background-color: white; /* Color of the line */
    margin: 15px auto; /* Center it horizontally with space above and below */
}

.twitch-status {
    position: relative; /* Position it relative to the container */
    top: 20px; /* Adjust as needed */
    color: white; /* Text color */
    text-align: left; /* Align text to the left */
    z-index: 1; /* Ensure it appears above the background */
}