:root{
    --main-bg:#292222;
    --main-fg:#e0d3f5;
}
*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    height:100%;
    min-height:98vh;
    color:var(--main-fg);
}

body {
    margin: 0;
    padding: 10px;
    background-image: url("./assets/floating-cogs.svg"); 
    background-color: var(--main-bg);
    background-size: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
a{
    text-decoration: none;
}

.center_div{
    display: flex;
    flex-direction:column;
    margin: 0 auto;
    padding: 5px;
    width: 30%;
    min-width: fit-content;
    min-height:80% ;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color: var(--main-bg);
}
.heading{
    padding:5px;
    text-align: Center;
    border-radius: 20px;
    width: 100%;
    margin-bottom: 5rem;
}

.link_container{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.link{
    padding:10px;
    position:relative;
    border-radius:20px;
    font-size:1.5em;
    background-color: var(--main-fg);
    color: var(--main-bg);
    transition: box-shadow 0.2s ease; /* <- smooth transition */
    display: flex;
    gap: 0.4rem;
}

.link:hover{
-webkit-box-shadow: -1px 4px 20px -3px #e0d3f5; 
box-shadow: -1px 4px 20px -3px #e0d3f5;
}

.link_text{
    flex-basis: 50%;
}

.link_question{

}

img,.icon{
    width: 30px;
    height: 30px;
    text-align:start;
    margin-bottom: -0.3rem;
}

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) 
{

    .center_div{
        padding-bottom: 1rem;
    }
    .link_question{
        margin:0 auto;
    }
    .link{
        font-size:1.4rem;
    }
    .link_text{
    }
    .img,.icon{
        width: 3.7rem;
        height:3.7rem;
    }
    .link_app{
        display: none;
    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) 
{


}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px){

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}