.img {
    clip-path: url( #cloud);
    background-color: var(--lavender);
    mask-mode: alpha;
    width: 100%;
    aspect-ratio: 1;
}

body {
    background-color: var(--violet);
}

.dropshadow {
    width: 100%;
    filter: drop-shadow(0px 0px 20px var(--dark-purple));
}

.toy {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.toys {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: var(--violet);
    padding: 2em;
}

.toys > * {
    margin: 1em;
    width: 300px;
}

.title {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--dark-purple);
    margin-top: 1em;
    background-color: var(--lavender);
    padding: 0.5em;
    border-radius: 0.5em;
    transform: scale(1);
    transition-property: transform, box-shadow;
    transition-duration: .5s;
    box-shadow: 0px 0px 20px var(--dark-purple);
}

.title:hover, .title:focus {
    transform: scale(1.1);
    box-shadow: 0 0 40px var(--dark-purple);
}

.title:active {
    transform: scale(1.05);
    box-shadow: 0 0 30px var(--dark-purple);
}

#boid-canvas {
    width: 100%;
    height: 100%;
}
#dots {
    width: 100%;
    height: 100%;
}

.dot {
    background-color: var(--violet);
    transition: transform .15s;
    touch-action: none;
}

.ex-elems {
    width: 100%;
    height: 100%;
}