/* ========================================================= */
/* SAFE WEBSITE-WIDE RESPONSIVE CSS */
/* Put this in: web/static/css/responsive.css */
/* ========================================================= */

/* Basic sizing only */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
}

body {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
}

/* Stop media from overflowing */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* Stop forms from overflowing */
input,
select,
textarea,
button {
    max-width: 100%;
    font-family: inherit;
}

/* General mobile safety */
@media (max-width: 700px) {
    input,
    select,
    textarea {
        max-width: 100%;
    }

    button {
        min-height: 42px;
    }
}