.indie-flower {
    font-family: "Indie Flower", cursive;
    font-weight: 400;
    font-style: normal;
    
}

html {
    background-color: #000;
    background-image: linear-gradient(#000, #110023);
    color: #fff;
    font-family: Helvetica, sans-serif;
    text-align: center;
}

body {
    margin: 0;
    
    height: 100svh;
    display: grid;
    grid-template-rows: min-content auto 80px;
}

header {
    padding: 2em;
}

img#logo {
    width: 100%;
    max-width: 600px;
}

main {

}

section {
    padding: 1em;
}

.section-links {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
}

.sc-player {
    max-width: 450px;
}


:link {
    text-decoration: none;
    color: #fff;
}

footer {
    padding: 1em;
    color: #555;
}

h1 {
    font-size: 3em;
    min-height: 70px;
    background-image: linear-gradient(180deg, #fff, #eda13d);
    color: transparent;
    background-clip: text;
}
h2 {
    font-size: 1.5em;
    min-height: 70px;
}

p {
    font-size: 1em;
}


/* Small tablets and larger mobile devices (481px - 768px) */
@media (min-width: 481px) {
    header {

    }
    
    main {
    
    }
    
    footer {
    
    }
}
  
/* Tablets and small laptops (769px - 1024px) */
@media (min-width: 769px) {
    header {

    }
    
    main {
    
    }
    
    footer {
    
    }
    h2 {
        font-size: 1.5em;
        min-height: 35px;
    }
}

/* Large desktops and high-resolution screens (1025px and up) */
@media (min-width: 1025px) {
    body {
        max-width: 1200px;
        margin: 0 auto;
    }

    header {

    }
    
    main {
    
    }
    
    footer {
    
    }




}

/* Extra-large screens (1440px and up) */
@media (min-width: 1440px) {


    header {

    }
    
    main {
    
    }
    
    footer {
    
    }


}