@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');

body {
    background-image: url("/images/bg.png");
    background-size: cover;
    justify-self: center;
    color: rgb(63, 2, 2);
    display: flex;
    gap: 1rem;
    flex-direction: column;
    text-align: center;   
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.link-container {
    background-image: url("/images/bg.png");
    background-size: cover;
    background-position: center;
    display: grid;
    /* Default: 1 column for mobile */
    grid-template-columns: 1fr; 
    gap: 1rem;
    padding: 1rem;
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
    .link-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .link-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.link-container a {
    width: 15rem;
    text-decoration: none;
    padding: 1rem;
    color: rgb(63, 2, 2);
    -webkit-box-shadow: 0px 10px 13px -7px #e8e3e0, -1px 5px 9px 5px rgba(112, 110, 108, 0.36);
    box-shadow: 0px 10px 13px -7px #e8e3e0, -1px 5px 9px 5px rgba(112, 110, 108, 0.36);
}

.link-container div a {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subtext{
    font-size: x-small;
}
.disabled-button{
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    color: rgb(63, 2, 2);
    background-color:  rgb(238,233,230);
    border: 1px solid rgb(238,233,230);
    -webkit-box-shadow: 0px 10px 13px -7px #e8e3e0, -1px 5px 9px 5px rgba(112, 110, 108, 0.36);
    box-shadow: 0px 10px 13px -7px #e8e3e0, -1px 5px 9px 5px rgba(112, 110, 108, 0.36);
    padding: 0.5rem;
}
body hr{
    border: 1px solid rgb(216, 216, 216);
}