body {
    background-color: black;
    color: white;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

h1 {
    text-align: center;
    margin-bottom: 40px;
    font-weight: 300;
    text-indent: -100000em;
    background: url(images/logo-neon.png) center center no-repeat;
    background-size: contain;
    width: 600px;
    height: 160px;
}

/*
video {
    border: 2px solid white;
    border-radius: 10px;
}
*/

body {
    background-color: black;
    color: white;
    margin: 0;
    padding: 0;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

p.coming-soon {
    font-size: 28pt;
    font-weight: 900;
    text-align: center;
    margin-bottom: 20px;
}

body {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}
/*

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
  border: 3px solid #0000;
  border-radius: 12px;
  background: linear-gradient(#000000, #000000) padding-box, linear-gradient(
        var(--angle),
        #000000,
        #000000
      ) border-box;
  animation: 8s rotate linear infinite;
  transition: background-color 2s;
}

.box.paused {
  background: linear-gradient(#131219, #000000) padding-box, linear-gradient(
        var(--angle),
        #000000,
        #f85300
      ) border-box;
  animation: 8s rotate linear infinite;
}

:playing {
  background:#000000!important;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
*/


/* Styling the body with flex container properties */
div.body {
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 100vh;*/
    /* Setting background color */
}

/* Styling for the main box */
.box {
    position: relative;
    width: 648px;
    height: 368px;
}

/* Styling for the gradient animation on the main box */
.box.paused::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(from var(--a),
            #0f0,
            #ff0,
            #0ff,
            #f0f,
            #0ff);
    border-radius: 20px;
    animation: rotating 4s linear infinite;
    /* Applying rotation animation */
}

/* Styling for the blurred gradient on the main box */
.box.paused::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(from var(--a),
            #0f0,
            #ff0,
            #0ff,
            #f0f,
            #0ff);
    border-radius: 20px;
    animation: rotating 4s linear infinite;
    /* Applying rotation animation */
    filter: blur(40px);
    opacity: 0.75;
}

/* Styling for the inner span within the main box */
.box span {
    position: absolute;
    inset: 4px;
    background: #222;
    /* Setting background color */
    border-radius: 16px;
    z-index: 1;
    /* opacity: 0; */
    /* Uncomment to hide the inner span */
}

/* Custom property for the rotation angle */
@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Keyframes for the rotating animation */
@keyframes rotating {
    0% {
        --a: 0deg;
    }

    100% {
        --a: 360deg;
    }
}

/* Styling for the text inside the nested box */
.box .box1 span {
    color: white;
    display: flex;
    align-items: center;
    padding: 0px;
    font-family: "Pacifico", cursive;
    overflow: hidden;
}