<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= cloudname %></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
  <style>
     @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

body {
  background-image: linear-gradient(to right bottom, #1f74cc, #3c7ed1, #5087d6, #6291db, #729be0, #87a6e4, #9ab1e9, #acbced, #c5cbf1, #dadcf5, #eeedfa, #ffffff);
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.flex-container {
  display: flex;
  width: 100%;
  height: 96%;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.audioplayer {
  width: 20%;
  height: 15%;
  background-color: #111111;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column nowrap;
}

.audioplayer > h1, .audioplayer > h2 {
  font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #1f74cc;
    line-height: 40%;
}

button {
          display: flex;
            justify-content: center;
            align-items: center;
            margin: 10% auto;
            width: 100%;
            height: 60%;
            background-color: #1f74cc;
            border-radius: 20px;
            font-size: 20px;
            color: white;
            border: none;
            transition-duration: 0.4s;
            font-family: "Montserrat", sans-serif;
        }
        button:hover {
            height: 61%;
            width: auto + 1%;
            color:#1f74cc;
            background-color: white;
        }
        .footer {
            width: 40%;
            height: 3%;
            background-color: black;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto;
            color: white;
            font-family: 'Montserrat', sans-serif;
        }

        a:link, a:visited, a:hover, a:active {
            color: #1f74cc;
            text-decoration: none;
            background-color: transparent;
        }
        /* Laptop support */
        @media screen and (max-width: 1825px) {
            .audioplayer {
                width: 35%;
                height: 20%;
            }
            .footer {
                height: 5%;
            }
            .flex-container {
                height: 94%;
            }
        }
        /* Mobile support */
        @media screen and (max-width: 426px) {
            .audioplayer {
                width: 90%;
                height: 25%;
            }

            .footer {
                width: 100%;
                font-size: 12px;
            }
        }
  </style>
<div class="flex-container">
  <div class="audioplayer">
    <h1><%= cloudname %></h1>
    <audio controls preload="metadata">
      <source src=<%= "/files/" + username + "/" + file %>>
    </audio>
  </div>
  <form action="/">
    <button type="submit"><i class="fa-solid fa-arrow-left-long"></i>&nbsp;<%= lang["Back"] %></button>
  </form>
</div>
<div class="footer">
  <p><%= cloudname %> ©️ 2022 - 2023 | Developed by <a href="https://github.com/DaneeSkripter">DaneeSkripter</a></p>
</div>
</body>
</html>