.box1 {
    width: 100%;
    height: fit-content;

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 40px;
    gap: 14px;

    background: #151515;
    box-shadow: inset 0 0 60px black, 0 0 200px 150px black;
}


/* Image */
.image__wrapper {
    position: absolute;
    width: 100%;
    height: 1200px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden  ;
}
#image {
    --height: 800px;
    position: absolute;
    width: 100vw;
    height: 100vh;
    fill: black;
    color: black;
    background-color: black;
    background: transparent no-repeat center center;
    background-size: cover;
    object-fit: cover;
    gap: -100px;
    z-index: -1;
    transform: translateY(20px);
    overflow: hidden;

    transition: opacity 0.4s, filter 0.4s, transform 0.6s;
}
.image2  {
    background: transparent url(../images/home.png) no-repeat center;
}
#image.on_hover {
    filter: saturate(4) contrast(200%);
    transform: scale(102%);
}

/* Image end */




/* div[id^='id_']:hover {  ANY ID
    background: blue;
} */



/* Buttons */

.buttons__wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 20px 80px;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 20px black;

    gap: 10px;
}

.download_btn {
    --color_hue: 0;
    --color_sat: 2%;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
    gap: 10px;

    width: 300px;
    height: 50px;
    font-weight: 500;
    text-decoration: none;
    
    background: linear-gradient(180deg, hsl(var(--color_hue), calc(100 * var(--color_sat)), 30%)  0%, hsla(var(--color_hue), calc(100 * var(--color_sat)), 30%, 0.4) 100%);
    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 0 60px 14px black;
    border: 4px solid rgba(0, 0, 0, 0.4);

    transition: border 0.5s, width 0.3s, height 1s;
}

img {
    background-color: transparent;
}
.download_btn:hover {
    /* width: calc(240px * 1.15); */
    border: 1px solid rgba(0, 0, 0, 1);
}







.download_btn:before {
    --size: 100%;
    content: '';
    position: absolute;
    width: var(--size);
    height: calc(var(--size) * 300);
    background: radial-gradient(circle closest-side, var(--color), hsla(0, 100%, 0%, 0.7));
    opacity: 0%;

    transition: opacity 0.6s ease;
}

.download_btn:hover:before {
    opacity: 100%;
}



.download_btn span {
   color: white;
   font-weight: 600;
   text-shadow: 0 0 6px black;
   text-decoration: none;
   text-decoration-color: cyan;
}

/* Buttons end */



.bg_text {
    background-color: black;
    padding: 20px;
}




.downloading_text {
    text-shadow: 0 6px 20px black;
    color: gainsboro;
    opacity: 0%;
    transition: opacity 0.3s;
}
.downloading_text.active {
    opacity: 100%;
}
.downloading_text.flash {
    color: red;
}