/* @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: #bbdee0;
}


.bg-right, .bg-left {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-right {
  right: 0;
  background-image: url('../img/buoyancy-right.jpg');
}

.bg-left {
  left: 0;
  background-image: url('../img/buoyancy-left.jpg');
}
.bg-left img {
  position: fixed; /* Ensures the logo stays fixed on the screen */
  top: 10px; /* Distance from the top of the screen */
  left: 20px; /* Distance from the left of the screen */
  width: 70px; /* 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 */
}


h1 {
  font-size: 6em;
}
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 */
}




/* ***************************************** */
/* sections */


.section {
  background: #bbdee0;
  color: #000000;
  text-align: center;
}

#section0 img {
  height: 100%;
  max-width: 100%;
}

#section1 {
  text-align: left;
}

.button-container {
  display: flex;
  flex-direction: column; /* Stacks buttons vertically */
  align-items: center; /* Centers buttons horizontally */
  margin-top: 30px;
}

.haag-btn {
  display: block; /* Makes each button take the entire width of its container */
  width: 200px; /* Set a fixed width to keep the buttons consistent */
  padding: 10px 20px;
  background-color: #ffffff;
  color: #000000;
  font-size: 1.6em;
  text-decoration: none;
  border: 2px solid black;
  border-left: #aa0205 6px ridge;
  border-bottom: #aa0205 6px outset;
  margin: 10px 0; /* Adds vertical spacing between the buttons */
  text-align: center; /* Centers text inside the button */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.haag-btn:hover {
  background-color: #aa0205;
  color: #ffffff;
}


#section2 {
  position: relative; /* Sets a relative positioning context for child elements */
  width: 100%;
  height: 100vh; /* Full viewport height */
  background: none; /* Ensures no additional backgrounds are added */
}




#section3 i {
  font-size: 40px;
  color: #000000;
}

#section3 a {
  padding: 20px;
}

#section3 .copyright {
  text-transform: uppercase;
  padding: 20px 0;
  display: block;
}



/* ***************************************** */
/* image artist image */
.artist-img {
  position: absolute; /* Allows the image to freely float over the entire section */
  top: 50%; /* Centers vertically */
  left: 50%; /* Centers horizontally */
  transform: translate(-50%, -50%); /* Precisely centers the image in the container */
  max-width: 95vw; /* Adjusts the size of the image to be proportional to the viewport width */
  height: auto; /* Maintain aspect ratio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
  z-index: 10; 
}

/* ***************************************** */
/* responsive codes */
@media only screen and (max-width: 1500px) {
  

  #section0 img {
   height: 70%;
   max-width: 100%;
  }

  

}