/*body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    flex-direction: column;
}*/

.audio-player {
    display: flex;
    flex-direction: column;
    align-items: center;
/*    padding: 20px;*/
/*    border: 2px solid #ccc;*/
    border-radius: 10px;
/*    background-color: #fff;*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 99%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.controls button {
    padding: 10px;
    font-size: 24px;
    border: none;
    background-color: #007BFF;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.controls button:hover {
    background-color: #0056b3;
}

.volume-control {
    display: flex;
    align-items: center;
}

.filename {
    margin-left: 10px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
}

.progress-container {
    width: 100%;
    background-color: #f1f1f1;
    border-radius: 5px;
    height: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

.progress {
    height: 5px;
    width: 0;
    background-color: #007BFF;
    border-radius: 5px;
    transition: width 0.1s ease-in-out; /* Smooth animation */
}

.toggle-media-session {
    padding: 10px;
    font-size: 16px;
    background-color: #28a745; /* Default green when active */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-media-session.off {
    background-color: #dc3545; /* Red when off */
}

.toggle-media-session:hover {
    background-color: #218838;
}

.toggle-media-session.off:hover {
    background-color: #c82333;
}

/* Ensure all elements in the control line are evenly spaced */
.controls .toggle-media-session {
    margin-left: 10px;
}

* {
  margin: 0;
  padding: 0;
}

/* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: lightgreen;
}

/* selected link */
a:active {
  color: #ff6600;
}

body {
	background-color: black;
	text-align: left;
  color: white;
  font: normal 25px Arial; Helvetica, sans-serif;
  margin: 0px;
  height:100%;
}

body, html {
  height: 100%;
}

.image1 {
  /* The image used */
/*  background-image: url("img_girl.jpg");*/

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding:20px;

/*  background-repeat: no-repeat;width:100%;padding:20px;*/
}

.lookup-containers {
  display: flex;
/*  margin-bottom: 20px;*/
  flex-wrap: wrap;
  border-radius: 25px;
/*  background-color: black;*/
  justify-content: space-evenly;
  align-items: stretch;
  align-content: stretch;
  padding: 10px;
  margin: 10px;
  opacity: 1;
}

.lookup-containers > div {
/*  background-color: #808080;*/
/*background-color: green;*/
/*  background-color: black;*/
  max-width: 170px;
  margin: 5px;
  text-align: center;
  font-size: 30px;
  overflow: visible;
  border-radius: 25px;
}

.white-pill-buttons {
  font-size: 20px;
  padding:10px;
  border-radius: 50px;
  border: none;
  background-color: white;
  color: black;
  margin: 5px;
}

.header-container {
  display: flex;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border-radius: 25px;
/*  background-color: #808080;*/
/*background-color: rgb(128, 128, 128, 0.5);*/
background-color: rgb(255,255,255, 0.4);
box-shadow: 5px 10px 20px black;
/*filter: blur(2px);*/
  justify-content: space-evenly;
  align-items: stretch;
  align-content: stretch;
  padding: 5px;
/*  opacity: 0.5;*/
}

.header-container > div {
  /*  background-color: #808080;*/
background-color: rgb(128, 128, 128, 0);
/*background-color: green;*/

  max-width: 170px;
  margin: 5px;
  text-align: center;
  font-size: 25px;
  overflow: visible;
  border-radius: 25px;
}



.header-container-2 {
/*  display: flex;*/
  margin-bottom: 20px;
  flex-wrap: wrap;
  border-radius: 25px;
/*  background-color: #808080;*/
/*background-color: rgb(128, 128, 128, 0.5);*/
background-color: rgb(255,255,255, 0.4);
box-shadow: 5px 10px 20px black;
/*filter: blur(2px);*/
  justify-content: space-evenly;
  align-items: stretch;
  align-content: stretch;
  padding: 5px;
  text-align: center;
/*  opacity: 0.5;*/
}

.header-apps {
  display: flex;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border-radius: 25px;
/*  background-color: #808080;*/
/*background-color: rgb(128, 128, 128, 0.5);*/
/*background-color: rgb(255,255,255, 0.4);
box-shadow: 5px 10px 20px black;*/
/*filter: blur(2px);*/
  justify-content: space-evenly;
  align-items: stretch;
  align-content: stretch;
  padding: 5px;
  width: 100%;
  text-align: center;
/*  opacity: 0.5;*/
}

.header-media-player {
    /*  background-color: #808080;*/
background-color: rgb(128, 128, 128, 0);
/*background-color: green;*/

  max-width: 170px;
  margin: 5px;
  text-align: center;
  font-size: 25px;
  overflow: visible;
  border-radius: 25px;
}

/*.header-container-2 > div {*/
  /*  background-color: #808080;*/
/*background-color: rgb(128, 128, 128, 0);*/
/*background-color: green;*/

/*  max-width: 170px;
  margin: 5px;
  text-align: center;
  font-size: 25px;
  overflow: visible;
  border-radius: 25px;*/
/*}*/

/* Style the links inside the navigation bar */
.header-container a {
  color: #f2f2f2;
  text-decoration: none;
/*  opacity: 100;*/
}

/* Change the color of links on hover */
.header-container a:hover {
/*  background-color: #ddd;*/
  color: black;
}

/* Add an active class to highlight the current page */
.header-container a.active {
  background-color: #ff6600;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.header-container .icon {
  display: none;
}

/* Style the links inside the navigation bar */
.header-container-2 a {
  color: #f2f2f2;
  text-decoration: none;
/*  opacity: 100;*/
}

/* Change the color of links on hover */
.header-container-2 a:hover {
/*  background-color: #ddd;*/
  color: black;
}

/* Add an active class to highlight the current page */
.header-container-2 a.active {
  background-color: #ff6600;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.header-container-2 .icon {
  display: none;
}

.topnav {
  overflow: hidden;
  background-color: #808080;
  border-radius: 25px;
  /*margin: auto;*/
}

/* Style the links inside the navigation bar */
.topnav a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px;
  text-decoration: none;
  font-size: 30px;
  margin: auto;
  float: left;
  height: 100%;
  vertical-align: middle;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #ff6600;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


.rainbow {
  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   -webkit-background-clip: text;
  color: transparent;
}

/*https://stackoverflow.com/questions/54702124/rainbow-text-animation-using-only-css*/
.rainbow-animated {
  animation: colorRotate 6s linear 0s infinite;
}

@keyframes colorRotate {
  from {
    color: #4C3FF9; /*#FFFFFF*/
  }
  16.5% {
    color: #EA1111;
  }
  33% {
    color: #FF8300;
  }
  49.5% {
    color: #F9C536;
  }
  66% {
    color: #03B14B;
  }
  82.5% {
    color: #2F7EFD;
  }
  100% {
    color: #4C3FF9;
  }
}

/* COLUMNS  */

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column-2 {
  float: left;
  width: 50%;
  /*padding: 10px;*/
  height: 100%; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row-2:after {
  content: "";
  display: table;
  clear: both;
}

/* Create three equal columns that floats next to each other */
.column-3 {
  float: left;
  width: 33.33%;
  /*padding: 10px;*/
  height: 100%; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row-3:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to each other */
.column-4 {
  float: left;
  width: 25%;
  /*padding: 10px;*/
  height: 100%; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row-4:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 630px) {
  .column {
    width: 100%;
  }
}

@media only screen and (min-width: 600px) {/*768px and more for tablets*/


}

@media only screen and (min-width: 1000px) {/*1000px and more for pcs*/



}

.main-footer{
  text-align:center;
  font-size:20px;
  color: white;
}