@charset "UTF-8";
/* css document */

.viewport {
  max-width: fit-content; 
  background-color: #020202;
  color: azure;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  align-content: center;
  align-self: center;
  align-items: center;

}
.mozh5-viewport {
  display: flex;
  align-self: center;


}
nav {
  display: flex;
  align-self: baseline;
  justify-content: center;
  align-content: center;
  background-color: black,0.5;

}

main {
  display: block;
  flex-direction: column;
  alignment-baseline: middle;
  align-self: baseline;
  align-items: center;
  align-content: center;
  justify-content: center;
  background-image: "background.png";
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px;
  border-radius: 10px;

  
}
.contact{
  align-self: flex-end;
}
body {
  align-items: center;
  align-content: center;
  

  text-align: center;
  background-color: #121212;
  color: #eeeeee;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding: 20px;
}
  /*.media-player {
    margin: 20px 0;
    padding: 20px;
    background-color: #282828;
    outline-color: crimson;
    outline-radius: 10px;
    box-shadow: 0 50 10px rgba(0, 0, 0, 0.7);
  }*/

  -------------/*
    width: 1080px; /* Change width 
    height: 600px; /* Change height 
    background-color: rgba(0, 0, 0, 0); /* Change background color 
    background-image: url("background.PNG"); background-size: contain; background-position-y: top; background-position: center; background-repeat: no-repeat;  Add background image 
    border: 2px solid rgb(43, 43, 43); /* Add a border 
    border-radius: 15px; /* Round the corners 
    box-shadow: 0 20px 80px rgba(0, 0, 0, 1); /* Add a shadow */
  --------------
audio { 
 /* Dimensions */
    width: 100%;
    max-width: 1080px; /* Make it responsive */
    height: 600px; /* Adjust height as needed */

    /* Background and Borders */
    background-image: url("background.PNG"); background-size: auto; background-repeat: no-repeat;  /* Add background image */
    background-color: #a3a3a3; /* Light grey background */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow */

    /* Spacing */
    margin-top: 20px;
    padding: 5px; /* Padding inside the player */

    /* Font for any text within the player (if applicable) */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;



/* Styling the timeline/progress bar (Webkit) */

audio::-webkit-media-controls-timeline {
    background-color: #414141;
    border-radius: 5px;
}

/* Styling the play button (Webkit) */
audio::-webkit-media-controls-play-button {
    background-color: #333333;
    border-radius: 25%;
    color: rgb(121, 0, 0); /* Affects the icon color if it's an SVG or text */
}

/* Styling the current time display (Webkit) */
audio::-webkit-media-controls-current-time-display {
    color: #000000;
    font-weight: bold;
}

}
header {
  align-content: center;
}

h1, h2, h3 {
  color: #fafafa; justify-content: center; outline: olivedrab;  size: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font: 600;
    text-align: center; 
}
p {
  margin-bottom: 15px;
}
a {
  color: #1e90ff;
  text-decoration: none;
  align-items: center;
}
a:hover {
  text-decoration: underline;
}
button {
  background-color: #ffcc00;
  color: #181818;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #e6b800;
}
input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 10px;
  margin: 5px 0 15px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: #ffcc00;
  outline: none;
}
footer {

   justify-self: baseline;
  text-align: center;
  margin-top: 20px;
  font-size: 0.9em;
  color: #aaaaaa;
}
.contact {
  align-self: last baseline;
}


footer a {
  color: #ffcc00;
}
footer a:hover {
  text-decoration: underline;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #1e1e1e;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.container h1, .container h2, .container h3 {
  color: #ffcc00;
}
.container p {
  color: #dddddd;
}
.container button {
  background-color: #ffcc00;
  color: #181818;
}
.container button:hover {
  background-color: #e6b800;
}
.container input[type="text"], .container input[type="email"], .container textarea {
  border: 1px solid #555;
}
.container input[type="text"]:focus, .container input[type="email"]:focus, .container textarea:focus {
  border-color: #ffcc00;
}
.navbar {
  background-color: #282828;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.navbar a {
  color: #ffcc00;
  margin: 0 10px;
  text-decoration: none;
}
.navbar a:hover {
  text-decoration: underline;
}
.card {
  background-color: #2e2e2e;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.card h3 {
  color: #ffcc00;
}