@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

html {
    height: 100%;
}

body {
    font-family: "Russo One", sans-serif;
    color: rgb(216, 0, 0);
    letter-spacing: 0.03rem;
    background-color: 0;
}

@media (orientation: landscape) {
body {
    background-image: url(/images/art/cant-run-away-cover-no-text.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    letter-spacing: 0.14rem;
    display: flex;
    flex-direction: column;
    } 
    .content {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        padding: 0vw 30vw;
    }
h1 {
    margin: 24vmin 0 0 0;
    } 
}

@media (orientation: portrait) {
body {
    background-image: url(/images/art/cant-run-away-cover-no-text.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    } 
.content {
    padding: 0vw 6vw;
    }
h1 {
    margin: 42vmin 0 0 0;
    }
.tidal-wrapper {
    background-color: #b90000; /* deep dark red, black, or any color you like */
    border-radius: 8px;         /* optional rounded corners */
    display: inline-block;      /* shrink-wrap to player width */
}
.tidal-wrapper iframe {
    display: block;
}
}

.russo-one-regular {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1 { 
    display: flex;
    justify-content: center;
    align-content: center;
        text-shadow:
        0 0 3px rgba(50, 0, 0, 0.7),
        0 0 6px rgba(60, 0, 0, 0.5),
        0 0 12px rgba(70, 0, 0, 0.35);
        0 0 2px rgba(0,0,0,0.6),
        0 0 4px rgba(0,0,0,0.5),
        0 0 6px rgba(0,0,0,0.4),
        0 0 10px rgba(0,0,0,0.3),
        0 0 15px rgba(0,0,0,0.25),
        0 0 20px rgba(0,0,0,0.2);
}

p {
    text-shadow:
        0 0 3px rgba(50, 0, 0, 0.7),
        0 0 6px rgba(60, 0, 0, 0.5),
        0 0 12px rgba(70, 0, 0, 0.35);
        0 0 2px rgba(0,0,0,0.6),
        0 0 4px rgba(0,0,0,0.5),
        0 0 6px rgba(0,0,0,0.4),
        0 0 10px rgba(0,0,0,0.3),
        0 0 15px rgba(0,0,0,0.25),
        0 0 20px rgba(0,0,0,0.2);
}

.embed-landscape,
.embed-portrait {
  display: none;
}

@media (orientation: portrait) {
  .embed-portrait {
    display: block;
  }
}

@media (orientation: landscape) {
  .embed-landscape {
    display: block;
  }
}

.embed {
display: flex;
flex-wrap: wrap;
flex-direction: row;
    justify-content: space-evenly
}