/* global */
* { box-sizing: border-box; margin: 0; padding: 0; font-weight: 100 !important;}
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
body { font-family: Sarah, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

@font-face {
    font-family: Sarah;
    src: url(media/fonts/Sarah-Regular-New.otf) format('opentype');
}

/* dekstop */

@media (min-width: 769px) {

    html, body { overflow-x: hidden; min-height: 100vh; }
    .main_div { margin-top: 2.5vh; margin-bottom: 3vh; min-height: 60vh;}

    /* header */
    #header { margin-top: 5vh};

    #header_logo { display: block;}
    #header_logo a { width: 30vw; display: block; margin-left: auto; margin-right: auto; }
    #header_logo_img { width: 30vw; display: block; margin-left: auto; margin-right: auto; transform: scale(1); transition: transform .2s ease-in-out;}
    #header_logo_img:hover { transform: scale(1.1); transition: transform .2s ease-in-out; cursor: pointer;}

    #header_nav { display:flex; justify-content:space-between; width:100%; max-width:var(--menu-max-width); justify-content: center; gap: 2vw;}
    #header_nav h1 { font-family: Sarah; font-weight:700; margin:0; }
    #header_nav a { text-decoration:none; color: black; transition: transform .2s ease-in-out; }
    #header_nav a:hover { transform: scale(1.2); }

    #header_links { margin-top: 1.5vh; display:flex; justify-content:space-between; width:100%; max-width:var(--menu-max-width); justify-content: center; gap: 0.5vw;}
    #social_media_icon { width: 2vw; transition: transform .2s ease-in-out;}
    #social_media_icon:hover { transform: scale(1.2); }

    /* footer */
    #footer { margin-top: 3vh; margin-bottom: 1vh; width: 100vw; text-align: center;}
    #footer p { font-size: 1.5vh; }
    #footer img { width: 10vh; vertical-align: middle; margin-left: 0.5vh; }

    /* index */
    #astronaut_gif { display: flex; justify-content: center; width: 100vw;}

    /* music */
    .release_right { display: flex; flex-wrap: wrap; justify-content: center; width: 66vw; margin-left: auto; margin-right: auto; gap: 1vh;}
    #spotify_embed iframe { opacity: 1;}

    /* store */
    .store_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5vw; width: 66vw; margin-left: auto; margin-right: auto; }
    .store_grid a { text-decoration: none; color: black; }

    .store_product { background-color: transparent; width: 21vw; transform: scale(1); transition: all .2s ease-in-out;}
    .store_product:hover { transform: scale(1.05); text-decoration: underline;}
    .image_container img { width: 21vw; border-radius: 1vw ;}
    .image_container { width:100%; aspect-ratio:1/1; overflow:hidden; margin-bottom:1vh;  }

    .product_detail { width: 66vw; margin-left: auto; margin-right: auto; display: flex; position: relative;}
    .product_image img { border-radius: 1vw; width: 31vw;}
    .product_right { margin-left: 2vw; width: 31vw;}

    .shopify-buy__btn { background-color: transparent; color: transparent; border: none; background-image: url('media/store/addtocart.gif'); background-repeat: no-repeat; background-size: contain; width: 15vw; height: 7vw; cursor: pointer; transition: transform .2s ease-in-out; transform: scale(1);}
    .shopify-buy__btn:hover { transform: scale(1.1); }
    .shopify-buy__select-icon { display: none;}
    .shopify-buy__option-select__label { font-size: 1.5vw; margin-right: 0.2vw;}
    .shopify-buy__option-select { display:flex;}

    .shopify-buy__cart-toggle {color: transparent;border: none;background-repeat: no-repeat;background-size: contain;background-color: transparent;width: 6vw;height: 10vw;cursor: pointer;background-image: url(media/store/Cart2.gif);}
    .shopify-buy__cart-toggle svg { display: none; }

    .product_info h2 { font-size: 5vh; }
    .product_info p { font-size: 2.5vh; }
    .product_price { font-size: 5vh; font-weight: 700; margin-top: 1vh; margin-bottom: 0.5vh; }
    .product_buy { position: absolute; bottom: 0;}
}







/* mobile */
@media (max-width: 768px) {

    html, body { overflow-x: hidden; min-height: 100vh; }
    .main_div { margin-top: 2.5vh; margin-bottom: 3vh; min-height: 60vh;}

    /* header */
    #header { margin-top: 5vh};

    #header_logo { display: block;}
    #header_logo a { width: 80vw; display: block; margin-left: auto; margin-right: auto; }
    #header_logo_img { width: 80vw; display: block; margin-left: auto; margin-right: auto; transform: scale(1); transition: transform .2s ease-in-out;}
    #header_logo_img:hover { transform: scale(1.1); transition: transform .2s ease-in-out; cursor: pointer;}

    #header_nav { display:flex; justify-content:space-between; width:100%; max-width:var(--menu-max-width); justify-content: center; gap: 2vw;}
    #header_nav h1 { font-family: Sarah; font-weight:700; margin:0; }
    #header_nav a { text-decoration:none; color: black; transition: transform .2s ease-in-out; }
    #header_nav a:hover { transform: scale(1.2); }

    #header_links { margin-top: 1.5vh; display:flex; justify-content:space-between; width:100%; max-width:var(--menu-max-width); justify-content: center; gap: 0.5vw;}
    #social_media_icon { width: 7.5vw; transition: transform .2s ease-in-out;}
    #social_media_icon:hover { transform: scale(1.2); }

    /* footer */
    #footer { margin-top: 3vh; margin-bottom: 1vh; width: 100vw; text-align: center;}
    #footer p { font-size: 1.5vh; }
    #footer img { width: 10vh; vertical-align: middle; margin-left: 0.5vh; }

    /* index */
    #astronaut_gif { width: 300vw; position: absolute; left: -100%; overflow-x: hidden;}
    #astronaut_gif_div { justify-items: center; width: 100vw;}

    /* music */
    .release_right { display: flex; flex-wrap: wrap; justify-content: center; width: 80vw; margin-left: auto; margin-right: auto; gap: 1vh;}
    #spotify_embed iframe { width: 80vw;}

    /* store */
    .store_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5vw; width: 80vw; margin-left: auto; margin-right: auto; }
    .store_grid a { text-decoration: none; color: black; }

    .store_product { background-color: transparent; width: 38vw; transform: scale(1); transition: all .2s ease-in-out;}
    .store_product:hover { transform: scale(1.05); text-decoration: underline;}
    .image_container img { width: 38vw; border-radius: 1vw ;}
    .image_container { width:100%; aspect-ratio:1/1; overflow:hidden; margin-bottom:1vh;  }

    .product_detail { width: 80vw; margin-left: auto; margin-right: auto; position: relative;}
    .product_image img { border-radius: 1vw; width: 80vw;}
    .product_right { margin-left: 2vw; width: 80vw;}
    .product_info h2 { font-size: 5vh; }
    .product_info p { font-size: 2.5vh; }
    .product_price { font-size: 5vh; font-weight: 700; margin-top: 1vh; margin-bottom: 0.5vh; }
    .product_buy { bottom: 0;}

    .shopify-buy__btn { background-color: transparent; color: transparent; border: none; background-image: url('media/store/addtocart.gif'); background-repeat: no-repeat; background-size: contain; width: 28vw; height: 12vw; cursor: pointer; transition: transform .2s ease-in-out; transform: scale(1);}
    .shopify-buy__btn:hover { transform: scale(1.1); }
    .shopify-buy__btn-disabled {background-color: transparent; color: transparent; border: none; background-image: url('media/store/soldout.gif'); background-repeat: no-repeat; background-size: contain; width: 28vw; height: 12vw; cursor: pointer; transition: transform .2s ease-in-out; transform: scale(1);}
    .shopify-buy__select-icon { display: none;}
    .shopify-buy__option-select__label { font-size: 4.5vw; margin-right: 0.2vw;}
    .shopify-buy__option-select { display:flex;}

    .shopify-buy__cart-toggle {color: transparent;border: none;background-repeat: no-repeat;background-size: contain;background-color: transparent;width: 13vw;height: 20vw;cursor: pointer;background-image: url(media/store/Cart2.gif);}
    .shopify-buy__cart-toggle svg { display: none; }

}