nav img {
    width: 40px;
    height: auto;
}

table img {
    width: 50px;
    height: auto;
}

div.container div.row section.col-12 form div button img {
    width: 20px;
    height: auto;
}

div.container-fluid>section.row>img {
    width: 500px;
    height: auto;
}

article div img,
section.col header img,
div.container section.row img,
div.container-fluid section div div div.card div.card-body div img {
    width: 20px;
    height: auto;
}

@media (min-width: 544px) {
    div.container-fluid section div div div.card div.card-body p {
        font-size: 1.5rem;
    }
}

@media (min-width: 768px) {
    div.container-fluid section div div div.card div.card-body p {
        font-size: 1rem;
    }
}

@media (min-width: 992px) {
    div.container-fluid section div div div.card div.card-body p {
        font-size: 1.5rem;
    }
}

@media (min-width: 1200px) {
    div.container-fluid section div div div.card div.card-body p {
        font-size: 2rem;
    }
}

form div button:nth-of-type(2),
form div button:nth-of-type(3) {
    display: none;
}

div section form div:nth-child(8) {
    display: none;
}

div section form div:nth-child(7) {
    display: none;
}

main>div>form {
    max-width: 330px;
}

h1,
h2,
h3 {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: bold;
}

section.col p>strong {
    font-size: xx-large;
}

a.bg-light-purple.border-0.text-purple:hover,
button.bg-light-purple.border-0.text-purple:hover,
input.bg-light-purple.border-0.text-purple:hover {
    background-color: rgb(155, 109, 198) !important;
    color: white !important;
}

textarea[name="description"] {
    resize: none;
}

/* Magic card base style */
.magic-card {
    position: relative;
    overflow: visible;
    border: 2px solid rgb(234, 234, 234);
}

/* Particle container */
.magic-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Particle style */
.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, var(--particle-color) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    animation: particle-animation 1s linear;
    pointer-events: none;
}

@keyframes particle-animation {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--x), var(--y)) scale(0.5);
        opacity: 0;
    }
}

input[type="checkbox"][role="switch"]:before,
input[type="checkbox"][role="switch"]:focus {
    box-shadow: none !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}

input[type="checkbox"][role="switch"]:checked {
    background-color: rgb(185, 158, 225);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255)'/></svg>");
}

input[type="checkbox"][role="switch"] {
    background-color: rgb(203, 195, 227);
}

/* Custom Bootstrap-derived styles */
@media (min-width: 1400px) {
    .row-cols-xxl-7>* {
        flex: 0 0 auto;
        width: 14.28571429%;
    }
}

.dot.bg-primary {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
}

.bg-purple {
    background-color: rgba(155, 109, 198, 1) !important;
}

.bg-purple-mid {
    background-color: rgb(185, 158, 225);
}

.bg-platinum {
    background-color: rgb(234, 234, 234) !important;
}

.bg-light-purple {
    background-color: rgba(203, 195, 227, 1) !important;
}

.bg-light-green {
    background-color: rgba(109, 198, 155, 1) !important;
}

.bg-purple-gray {
    background-color: rgb(192, 173, 208) !important;
}

.text-purple {
    color: rgb(105, 0, 168) !important;
}

.nav-link {
    color: black;
}

.nav-link:hover {
    color: white;
}

.card-text {
    font-size: large;
    font-weight: 500;
}

.card-hover {
    transition: transform 0.3s ease;
}

.card-hover:hover {
    transform: scale(1.05);
    z-index: 10;
}