@import url('https://fonts.googleapis.com/css2?family=Bona+Nova&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

body {
    font-family: 'Nunito Sans', sans-serif;
    line-height: 1.6;
    margin: 20px;
    background: #c4cddc;
}

p {
    margin-bottom: 1em;
}

strong, b {
    font-weight: bold;
}

ul {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
}

li {
    margin-bottom: 0.5em;
}

a {
    color: #00296b;
}

#copy-icon {
    width: 17px;
    height: auto;
}

.screenshot {
    float: right;
    top: 8px;
    right: 16px;
    height: 600px;
    box-shadow: 2px 2px 5px black;
}

.onHover {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
    filter: drop-shadow(2px 2px 2px transparent);
}

.onHover:hover {
    opacity: 1.0;
    transition: opacity 0.3s ease-in-out;
}

.onHoverClick {
    /*filter: drop-shadow(0 0 5px green);*/
    filter: drop-shadow(2px 2px 2px #00296b);
    will-change: filter;
    /*filter: brightness(1.5); !* Example: Changes to a purplish hue and increases saturation *!*/
    /* You can also use other filters like:
       filter: invert(100%);
       filter: sepia(100%);
       filter: grayscale(100%);
       filter: brightness(1.5) saturate(3) hue-rotate(90deg);
    */
    transition: filter 0.3s ease-in-out; /* Smooth transition for the filter property */
}