/*** The new CSS Reset - version 1.4.4 (last updated 22.12.2021) ***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
 *:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]){
    display:none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]){
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

body {
    font-family: 'Rubik', sans-serif;
}

.container {
    text-align: center;
    padding: 0 8px;
}

a {
    cursor: pointer;
}

svg {
    max-width: 100%;
    height: auto;
}

.ribbon {
    margin: 100px 0 32px;
}

.logo {
    margin: 0 0 80px;
}

.pictos-section {
    background: #E8F6FC;
    color: #0B3961;
    padding: 60px 8px 26px;
}

.pictos-section h1 {
    font-weight: 700;
    font-size: 1.375em;
    margin-bottom: 32px;
    text-align: center;
}

.pictos-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.picto-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 34px 34px;
    width: 100%;
}

@media(min-width: 640px) {
    .picto-item {
        width: 20%;
    }
}

@media(min-width: 1190px) {
    .picto-item {
        width: unset;
    }
}

.picto-item img:first-child {
    margin-bottom: 16px;
}

.hashtag {
    margin-top: 64px;
} 

footer {
    padding: 80px 8px;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.footer p {
    font-size: 1.8125em;
    color: #808080;
    margin-bottom: 20px;
    text-align: center;
}

@media(min-width: 768px) {
    .footer {
        flex-direction: row;
    }
    
    .footer p {
        margin: 0 20px 0 0;
    }
}