.hero
    img
        transform: scale(0.8)

.site-name.can-hide
    display: none

.footnote
    font-size: 0.8rem

.newsletter-input
    display: inline-block;
    width: 18rem;
    font-size: 1rem;
    color: $ml2;
    background-color: #fff;
    padding: 0.5rem 1rem;
    margin: 0.1rem;
    border-radius: 4px;
    transition: background-color 0.1s ease;
    box-sizing: border-box;
    border: 1px solid #ddd;

.videoframe
    max-width: 100%;
    margin-top: 15px;
    margin-bottom: 25px;

.newsletter-button
    display: inline-block;
    width: 10rem;
    font-size: 1rem;
    color: $ml2;
    background-color: #fff;
    padding: 0.5rem 1.5rem;
    margin: 0.2rem;
    border-radius: 4px;
    transition: background-color 0.1s ease;
    box-sizing: border-box;
    border: 1px solid #ccc;
    cursor pointer;

    &:hover
        background-color: darken(#fff, 5%);

@media (max-width: 500px)
    main.page
        padding-bottom: 1rem !important;
        .theme-default-content:not(.custom)
            padding-bottom: 0.5rem !important;
        .page-nav p.inner
            margin-bottom: 0!important;
    .videoframe
        max-width: 100%;
    iframe, video
        max-width: 100%;
        width: 100%;
        min-width: calc(100vw - 3rem);
        min-height: 35vh;
    pre
        max-width: 90vw;
    ol, li
        .extra-class, div[class*="language-"]
            left: -1.25rem;
            position: relative;
            width: 100vw;
    .links ul.suggestions
        list-style: none !important;
        min-width: 0;
        padding-inline-start: 0 !important;
        padding: 0.4rem !important;
        width: calc(100vw - 0.8rem - 4px) !important;
        position: fixed;
        top: 56px;
        right: initial !important;
        left: 0 !important;
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
