body {
    font-family: 'Roboto', sans-serif;
    background-color: #1b3483;
    color: #ffffff;
}
.container {
    max-width: 100vw;
    padding: 5px;
    margin: 0 auto;

    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
}
details summary {
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1);
}
details p {
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-top: 5px;
}
h2 {
    margin-bottom: 20px;
}
a:link {
    color: #fff;
    background-color: transparent;
    text-decoration: none;
}
.stylish-box {
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 0px;
    margin: 0px;
}

.unavailablecard, .availablecard {
border-radius: 25px;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.availablecard {
background-image: linear-gradient(0deg, hsl(157deg 92% 85%) 0%, hsl(155deg 83% 81%) 7%, hsl(154deg 76% 78%) 15%, hsl(153deg 71% 74%) 22%, hsl(152deg 67% 71%) 29%, hsl(150deg 63% 68%) 36%, hsl(149deg 61% 64%) 43%, hsl(148deg 58% 61%) 50%, hsl(146deg 56% 57%) 58%, hsl(145deg 55% 54%) 65%, hsl(144deg 53% 51%) 73%, hsl(143deg 59% 47%) 81%, hsl(142deg 68% 43%) 89%, hsl(143deg 85% 38%) 100%);
}