main {
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* 2 column layout on desktop, 1 column stacked on mobile */
#apps-layout {
    display: flex;
    flex-direction: row;
    max-width: 1000px;
}

#apps-metadata {
    /* position: fixed; */
    /* width: min(30vw, 300px ); */
    /* height: 100vh; */
    position: absolute;
    top: calc(40vh - 200px );
    background-color: rgba(var(--card-color), 0.5);
    -webkit-backdrop-filter: blur(20px) saturate(10%);
    backdrop-filter: blur(20px) saturate(10%);

    display: flex;
    flex-direction: column;


    /* justify-content: center; */
    align-items: center;

    /* transform: translateY(-50%); */

    padding: 30px;
    border-radius: 45px;

    
}

#apps-metadata .icon {
    /* padding-left: 50px;
    padding-right: 50px; */
    max-width: 200px;
    /* min-width: 100px; */
    /* margin-top: calc(40vh - min(30vw, 300px ) + 50%  + 35px ); */

}
#apps-metadata .icon > img {
    border-radius: 25%;
    width: 100%;
    height: auto;
    
}
#apps-metadata h1 {
    font-size: min(5vw, 40px );
}

#apps-content {
    max-width: 1000px;
    /* padding-left: min(30vw, 300px ); */
    padding: 30px;

    margin-top: 200px;
}




#apps-header {
    height: 40vh;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#apps-header > img {
    height: 100%;
    width: auto;
    
}


#downloads {
    /* width: calc(100% - 30px); */
    margin: 30px;
    padding: 20px;
    background-color: rgb(var(--card-color));
    border-radius: 25px;
    border: 2px solid rgba(var(--secondary-color));
    /* glow shadow */
    /* box-shadow: 0 0 10px rgba(var(--secondary-color)); */

}

#downloads .wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
}

#downloads a {
    text-decoration: none;
    margin: 10px;
}

.app-store-icon  {
    height: 40px;
}



/* #downloads::before {
    content: "Downloads";
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: 'Aldrich', sans-serif;
} */

.get-button {
    --button-color: rgb(var(--primary-color));
    color: var(--on-primary-color);
}



/* classes for the article */

aside {

    background-color: rgb(var(--card-color));
    border-radius: 25px;
    border: 2px solid rgba(var(--secondary-color));
    padding: 10px;

    /* glow shadow */
    box-shadow: 0 0 10px rgba(var(--secondary-color));

    margin: 10px;
}


/* small screens */