#main {
    max-width: 100%;
    padding: 0;
}

.top-grid, #testimonials {
    max-width: var(--maxwidth);
    margin: auto auto;
    padding: 0 20px;
}

#plugin-grid {
    position: relative;
    margin: 40px 0 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0px;
}

h1 span, h2 span {
    white-space: nowrap;
}

#content h1.slogan {
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 60px;
}

#content h2.subslogan {
    font-size: 1.25rem; font-variation-settings: 'ital' 1, 'wght' 200;
    text-align: center;
    margin-top: 0px;
}

@media (max-width: 650px) {
    #plugin-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        margin-top: 40px;
    }

    .slogan {
        font-size: 2.25em !important;
    }
}

.plugin-square {
    color: royalblue;
    text-decoration: none;
    display: block;
    border: 6px solid white;
    position: relative;
}

.plugin-square-img-wrapper {
    border: 6px solid blue;
}

.plugin-square img {
    width: 100%;
    display: block;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.plugin-square:hover {
    background-color: var(--custom-color);
    background-color: #ccc;
    transition: background-color 0.15s ease-in-out;
}

/* On hover the tagline arrives as a sticker slapped onto the logo: a white
   label in the plugin's own (darkened) colour that springs up, tilted, over
   the bottom of the square. Legible because the label is solid, not because
   the logo underneath is darkened. */
.plugin-square .plugin-square-info {
    position: absolute;
    inset: 0;
    color: var(--ink, #222);
    text-decoration: none;
    pointer-events: none;
}

.plugin-square .plugin-square-info .plugin-square-name {
    display: none;
    position: absolute;
    left: 11px;
    top: 8px;
    font-size: 1.5em;
    width: 80%;
    font-variation-settings: "wght" 700, "opsz" 36;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.plugin-square .plugin-square-info .plugin-square-tagline {
    --tilt: -4deg;
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 86%;
    box-sizing: border-box;
    padding: 6px 8px 7px;
    border: 2px solid var(--ink, #222);
    border-radius: 7px;
    background: white;
    color: var(--ink, #222);
    text-align: center;
    line-height: 112%;
    font-variation-settings: "wght" 750, "opsz" 36;
    font-size: 0.83em;
    box-shadow: 3px 3px 0 var(--ink, #222);
    opacity: 0;
    transform: translate(-50%, 30%) rotate(0deg) scale(0.4);
    /* a little overshoot on the way in, a quick exit */
    transition: transform 0.18s ease-in, opacity 0.12s ease-in;
}

/* neighbouring stickers lean opposite ways, so a row does not look stamped */
.plugin-square:nth-child(even) .plugin-square-info .plugin-square-tagline {
    --tilt: 3.5deg;
}

.plugin-square:hover .plugin-square-info .plugin-square-tagline,
.plugin-square:focus-visible .plugin-square-info .plugin-square-tagline {
    opacity: 1;
    transform: translate(-50%, 0) rotate(var(--tilt)) scale(1);
    transition: transform 0.42s cubic-bezier(0.34, 1.7, 0.5, 1), opacity 0.1s ease-out;
}

/* the logo gives a small wobble as the sticker lands on it */
.plugin-square img {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plugin-square:hover img,
.plugin-square:focus-visible img {
    transform: rotate(calc(var(--tilt-logo, 1.5deg))) scale(1.04);
}

.plugin-square:nth-child(even):hover img,
.plugin-square:nth-child(even):focus-visible img {
    --tilt-logo: -1.5deg;
}

@media (prefers-reduced-motion: reduce) {
    .plugin-square img,
    .plugin-square .plugin-square-info .plugin-square-tagline {
        transition: opacity 0.15s;
    }

    .plugin-square:hover img,
    .plugin-square:focus-visible img {
        transform: none;
    }

    .plugin-square .plugin-square-info .plugin-square-tagline,
    .plugin-square:hover .plugin-square-info .plugin-square-tagline,
    .plugin-square:focus-visible .plugin-square-info .plugin-square-tagline {
        transform: translate(-50%, 0) rotate(var(--tilt));
    }
}

@media (max-width:650px) {
    .plugin-square .plugin-square-info .plugin-square-name { font-size: 1.1em; }
    .plugin-square .plugin-square-info .plugin-square-tagline { font-size: 0.7em; }
}

#plugin-grid-hovers {
    position: absolute;
    top: 0;
    left: 0;
}

.plugin-square-hover {
    background: black;
    border: 2px solid white;
    color: white;
    display: block;
    padding: 6px 10px;
    font-size: 1.2em;
    font-variation-settings: "wght" 350;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

#content .plugin-square-hover h4 {
    color: white;
    font-variation-settings: "wght" 750;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    margin-bottom: 2px;
}

#content .plugin-square-hover p {
    margin-bottom: 0;
}

.plugin-square-hover.visible {
    opacity: 1;
    visibility: visible;
}

#minidaw-wrapper {
    height: 860px;
    width: 100%;
    overflow: hidden;
    user-select: none;
}

#minidaw {
    background: #ddd;
    height: 860px;
    margin: 0 -21px;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.25);

    background-size: 20px 20px;
    background-image:
        linear-gradient(to right, #ccc 1px, transparent 1px),
        linear-gradient(to bottom, #ccc 1px, transparent 1px);
    
    overflow: hidden;
}

@media (max-width: 800px) {
    #minidaw-wrapper {
        display: none;
    }
}

@keyframes bounce {
    0% { transform: translate(0px, 0px); }
    10% { transform: translate(-6px, -50px); }
    20% { transform: translate(0px, 0px); }
}

#minidaw .plugin-screenshot {
    position: absolute;
    top: 10px;
    left: 10px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    /* animation: bounce 10s 1; */
}

#minidaw.clicked .plugin-screenshot {
    animation: none;
}

#minidaw .plugin-screenshot img {
    position: absolute;
    top: -20px;
    left: -20px;
    pointer-events: none;
}

#minidaw .plugin-screenshot a {
    position: absolute;
    top: 21px;
    left: 0px;
}

#minidaw .categories {
    position: absolute;
    top: 30px;
    right: 60px;
    text-align: right;
}

#minidaw h4.category {
    font-size: 1.75em;
    font-variation-settings: "wght" 750, "opsz" 36;
    margin-bottom: 1px;
}

#content #minidaw h4.category a {
    text-decoration: none !important;
    background: #777;
    padding: 2px 8px;
    display: inline-block;
    color: white;
}

#content #minidaw h4.category.active a {
    background-color: #111;
}

#minidaw .instructions {
    position: absolute;
    left: 60px;
    bottom: 30px;
    color: #555;
    font-variation-settings: "ital" 1, "wght" 400, "opsz" 12;
}

.whats-new {
    max-width: var(--maxwidth);
    padding: 20px;
    margin: auto auto;
    /* text-align: center; */
    border-bottom: 1px solid #eee;
}

.whats-new-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}

#content .whats-new .post {
    display: block;
    text-decoration: none;
    /* the titles are nowrap, so without this each column refuses to shrink
       past the width of its own title and the three stop tracking each other
       as the window narrows; the ellipsis takes over instead */
    min-width: 0;
}

#content .whats-new .post:last-of-type {
    border-right: none;
}

@media (max-width: 600px) {
    .whats-new-inner {
        grid-template-columns: auto;
        grid-template-rows: repeat(3, 1fr);
        row-gap: 20px;
    }
}

#content .whats-new .post h5 {
    color: #555;
    margin-bottom: 0px;
    font-size: 0.8em;
    font-variation-settings: "wght" 400, "opsz" 12, "ital" 1;
}

#content .whats-new .post h3 {
    color: royalblue;
    margin-top: 4px;
    margin-bottom: 10px;
    font-size: 1.75em;
    font-variation-settings: "wght" 800, "opsz" 36;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#content .whats-new .post:hover {
    /* background: #eee; */
    /* border: 1px solid #ddd; */
    text-decoration: underline;
}

#content .whats-new .post p {
    color: #333;
    margin-top: 10px;
}

#content .whats-new .post .img-wrapper {
    background-color: #eee;
    max-width: 540px;
    max-height: 540px;
    min-height: 100px;
}

#content .whats-new .post img {
    width: 100%;
    display: block;
}

.whats-new-videos {
    text-align: center;
    max-width: var(--maxwidth);
    margin: auto auto;
    margin-top: 22px;
    margin-bottom: 30px;
    padding: 0 20px;
}

.whats-new-grid.videos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* padding: 10px; */
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    /* max-width: 800px; */
}

@media (max-width:850px) {
    .whats-new-grid.videos {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:650px) {
    .whats-new-grid.videos {
        grid-template-columns: 1fr;
    }
}

.whats-new-grid.videos .post {
    /* height: 100%; */
    min-height: 400px;
    display: block;
    background-size: cover;
    overflow: hidden;
    text-decoration: none !important;
}

.whats-new-grid .video {
    /* height: 300px; */
    /* padding: 10px; */
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
}

.whats-new-grid .video iframe {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.whats-new-grid .video a {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: block;
}

.whats-new-grid .video a img {
    width: 100%;
    height: 100%;
}

.whats-new-grid .video a .play-button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0,0,0,0);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
    line-height: 100px;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 0 6px rgba(0,0,0,0.5);
}

/* .whats-new-grid .video::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0;
    padding-bottom: calc(100% * .75);
} */

#content h2.section-header {
    text-transform: uppercase;
    letter-spacing: 10px;
    color: #555;
    margin-bottom: 0;
    padding: 20px;
    text-align: center;
    font-size: 1.2rem;
}

#content h2.section-header a {
    text-decoration: none;
}

#content #whats-new h2.section-header {
    letter-spacing: 4px;
}

#testimonials {
    border-top: 1px solid #eee;
    margin-bottom: 40px;
}

#testimonials .testimonial-list {
    display: flex;
    column-gap: 20px;
}

@media (max-width: 1200px) {
    #testimonials .testimonial:nth-last-of-type(-n+1) {
        display: none;
    }
}

@media (max-width: 900px) {
    #testimonials .testimonial:nth-last-of-type(-n+2) {
        display: none;
    }
}

@media (max-width: 660px) {
    #testimonials .testimonial-list {
        flex-direction: column;
    }

    #testimonials .testimonial {
        margin: 1px 0px !important;
    }

    #testimonials .testimonial:first-of-type {
        margin: 0px 0px 1px !important;
    }
}

#testimonials .testimonial {
    font-size: 0.9em;
    /* padding: 10px; */
    margin: 0px 1px;
    background: white;
    min-width: 180px;
}

#testimonials .testimonial .quotation {
    display: inline-block;
    margin-bottom: -10px;
}

#testimonials .testimonial strong {
    display: block;
    text-decoration: none;
    text-align: right;
    font-variation-settings: "wght" 700;
}

#testimonials .testimonial strong span {
    font-variation-settings: "wght" 400;
    color: #ccc;
    margin-right: 3px;
}

#testimonials .testimonial a.testifier:hover {
    color: deeppink;
}

#testimonials .testimonial a.testifier span {
    color: #ccc;
    margin-right: 5px;
}

#testimonials .testimonial .bio {
    display: inline-block;
    width: 100%;
}

#testimonials .testimonial .bio p {
    margin-bottom: 0px !important;
    font-variation-settings: "wght" 300, "ital" 1;
    font-size: 0.9em;
    color: #555;
    text-align: right;
    padding-left: 10px;
}