/* @CHARSET "ISO-8859-1"; */
/* Reset CSS
 * --------------------------------------- */

 @font-face {
    font-family: Oswald;
    src: url(../font/Oswald-Regular.ttf);
  }
  
  body,
  div,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  pre,
  form,
  fieldset,
  input,
  textarea,
  p,
  blockquote,
  th,
  td {
    padding: 0;
    margin: 0;
  }
  a {
    text-decoration: none;
  }
  table {
    border-spacing: 0;
  }
  fieldset,
  img {
    border: 0;
  }
  address,
  caption,
  cite,
  code,
  dfn,
  em,
  strong,
  th,
  var {
    font-weight: normal;
    font-style: normal;
  }
  strong {
    font-weight: bold;
  }
  ol,
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  caption,
  th {
    text-align: left;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: normal;
    font-size: 100%;
    margin: 0;
    padding: 0;
    /* color:#444; */
  }
  q:before,
  q:after {
    content: "";
  }
  abbr,
  acronym {
    border: 0;
  }
  
  /* ***************************************** */
  /* ***************************************** */
  
  /* custom codes */
  
  
  body{
    font-family: "Oswald", sans-serif;
    background-color: #eaeaea; /* Center section color */
    overflow-x: hidden;
  }
  
  h1 {
    font-size: 5em;
  }
  p {
    font-size: 2em;
  }
  .intro p {
    width: 50%;
    margin: 0 auto;
    font-size: 1.5em;
  }
  .column {
    display: flex;
    flex-direction: column; /* Arrange items in a column */
    gap: 10px; /* Add space between items */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
  }
  
  
  /* ***************************************** */
  /* background */
  
  
  
  .bg-right, .bg-left {
    position: fixed;
    width: 8%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: 1;
  }
  
  .bg-right {
    right: 0;
    background-color: #161616;
  }
  
  .bg-left {
    left: 0;
    background-color: #161616;
  }
  
  
  .bg-left img.fixed-logo {
    position: fixed; /* Ensures the logo stays fixed on the screen */
    top: 1%; /* Distance from the top of the screen */
    left: 1%; /* Distance from the left of the screen */
    width: 6%; /* Adjust the width of the logo as needed */
    height: auto; /* Maintain the aspect ratio of the logo */
    z-index: 1000; /* Keeps the logo above all other content */
  }
  
  .bg-left .first-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 18%; /* Adjust the position as needed */
    width: 100%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-left .second-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 50%; /* Adjust the position as needed */
    width: 100%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-left .third-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 85%; /* Adjust the position as needed */
    left: 10%; /* Adjust for bg-left; for bg-right adjust right or left */
    width: 70%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-right .first-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 5%; /* Adjust the position as needed */
    width: 90%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-right .second-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 25%; /* Adjust the position as needed */
    left: 5%;
    width: 90%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-right .third-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 55%; /* Adjust the position as needed */
    
    width: 90%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  .bg-right .fourth-layer-image {
    position: absolute; /* New images scroll with the page */
    top: 83%; /* Adjust the position as needed */
    width: 90%; /* Make the image fit within the section */
    height: auto; /* Maintain aspect ratio */
  }
  
  
  /* ***************************************** */
/* sections */


.section {
    text-align: center;
  }
  
  #section0 img {
    height: auto; /* Maintains the aspect ratio */
    width: 40%; /* Allows the image to scale down */
    display: inline-block; /* Treats the image as an inline element for centering */
    margin: 0 auto; /* Centers the image horizontally */
    margin-top: 5%;
  }
  
  #section1 {
    text-align: left;
    width: 60%; /* Adjusts content width to account for 10% on each side */
    max-width: 1200px;
  
    position: relative;
    z-index: 2; /* Ensure it stays above the backgrounds */
  }
  
  .button-container {
    display: flex;
    flex-direction: column; /* Stacks buttons vertically */
    align-items: center; /* Centers buttons horizontally */
    margin-top: 4%;
  }
  
  
  .haag-btn {
    display: flex; /* Flexbox for image centering */
    align-items: center; /* Center image vertically */
    justify-content: center; /* Center image horizontally */
    width: 280px; /* Set a fixed width for the buttons */
    height: 70px; /* Set a fixed height for the buttons */
    background-color: #ffffff;
    color: #000000;
    font-size: 1.6em;
    border: 2px solid black;
    border-left: #787876 6px ridge;
    border-bottom: #787876 6px outset;
    margin: 10px 0; /* Adds vertical spacing between the buttons */
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .haag-btn:hover {
    background-color: #011167;
    color: #ffffff;
  }

  .bandcamp-btn img {
    width: 75%; 
    height: 90%;
    object-fit: cover;
  }
  
  .spotify-btn img {
    object-fit: contain;
    width: 60%;
  }
  
  .tidal-btn img {
    object-fit: contain;
    width: 60%;
  }
  
  .apple-music-btn img {
    width: 50%;
    object-fit: cover;
  }
  .amazon-music-btn img {
    width: 50%;
    object-fit: cover;
  }

  #section3 {
    margin-top: 10%;
  }
  
  #section3 i {
    font-size: 40px;
    color: #000000;
  }
  
  #section3 a {
    padding: 20px;
  }
  
  #section3 .copyright {
    text-transform: uppercase;
    padding: 20px 0;
    display: block;
  }
  
  
  
  
  
  

  

  /* ***************************************** */
  /* responsive codes */
  @media only screen and (max-width: 1300px) {
    
  
    h1 {
      font-size: 4.5em;
  
    }
  
    p {
      font-size: 2.5em;
      line-height: 1.2; /* Double spacing */
    }
  
    #section0 img {
     height: auto;
     max-width: 85%;
     width: 60%;
    }
  
  
    .bg-right, .bg-left {
      position: fixed;
      width: 12%;
      height: 100%;
      background-repeat: no-repeat;
      z-index: 1;
    }
    
    .bg-right {
      right: 0;
      background-color: #161616;
    }
    
    .bg-left {
      left: 0;
      background-color: #161616;
    }
  
    .bg-left img.fixed-logo {
      position: fixed; /* Ensures the logo stays fixed on the screen */
      top: 1%; /* Distance from the top of the screen */
      left: 1%; /* Distance from the left of the screen */
      width: 10%; /* Adjust the width of the logo as needed */
      height: auto; /* Maintain the aspect ratio of the logo */
      z-index: 1000; /* Keeps the logo above all other content */
    }
  
    .bg-right .fourth-layer-image {
      position: absolute; /* New images scroll with the page */
      top: 87%; /* Adjust the position as needed */
      width: 100%; /* Make the image fit within the section */
      height: auto; /* Maintain aspect ratio */
    }
 
  
    #section2 {
      position: relative; /* Sets a relative positioning context for child elements */
      width: 100%;
      height: 100vh; /* Full viewport height */
      margin-top: -60%;
    }
  
  
    .bg-left .first-layer-image {
      position: absolute; /* New images scroll with the page */
      top: 18%; /* Adjust the position as needed */
      width: 100%; /* Make the image fit within the section */
      height: auto; /* Maintain aspect ratio */
    }
    
    .bg-left .second-layer-image {
      position: absolute; /* New images scroll with the page */
      top: 50%; /* Adjust the position as needed */
      width: 100%; /* Make the image fit within the section */
      height: auto; /* Maintain aspect ratio */
    }
    
    .bg-left .third-layer-image {
      position: absolute; /* New images scroll with the page */
      top: 85%; /* Adjust the position as needed */
      left: 10%; /* Adjust for bg-left; for bg-right adjust right or left */
      width: 70%; /* Make the image fit within the section */
      height: auto; /* Maintain aspect ratio */
    }
    
    .bg-right .first-layer-image {
      position: absolute; /* New images scroll with the page */
      top: 5%; /* Adjust the position as needed */
      width: 90%; /* Make the image fit within the section */
      height: auto; /* Maintain aspect ratio */
    }
    
    .bg-right .second-layer-image {
      position: absolute; /* New images scroll with the page */
      top: 25%; /* Adjust the position as needed */
      left: 5%;
      width: 90%; /* Make the image fit within the section */
      height: auto; /* Maintain aspect ratio */
    }
    
    .bg-right .third-layer-image {
      position: absolute; /* New images scroll with the page */
      top: 55%; /* Adjust the position as needed */
      
      width: 90%; /* Make the image fit within the section */
      height: auto; /* Maintain aspect ratio */
    }
    
    .bg-right .fourth-layer-image {
      position: absolute; /* New images scroll with the page */
      top: 83%; /* Adjust the position as needed */
      width: 90%; /* Make the image fit within the section */
      height: auto; /* Maintain aspect ratio */
    }

    .haag-btn {
        width: 135px; /* Set a fixed width for the buttons */
        height: 50px; /* Set a fixed height for the buttons */
      }

      #section3 i {
        font-size: 25px;
       
      }
      
      

    
    
  
    
    
    
  
  }