/*
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_portfolio_gallery_filter
*/
/* 
    Created on : 19-nov.-2021, 12:32:12
    Author     : métier
*/


* {
    box-sizing: border-box;
}

body {
    background-color: PapayaWhip;
    padding: 20px;
    font-family: "Noto Sans", sans-serif;
    font-size: 1em;
}

/* Center website */
.main {
    max-width: 1000px;
    margin: auto;
}

h1 {
    font-size: 50px;
    word-break: normal;
    font-family: Megrim;
    color : tan;
}
hr {
    color : tan;
}
h2 {
    color: Sienna;
}


.row {
    margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    display: none; /* Hide all elements by default */
}

/* Clear floats after rows */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    background-color: white;
    padding: 10px;
}

aside#wysiwyg > h1{
    font-size: 27px;
    color:black;
    font-family: "Noto Sans", sans-serif;
}
aside#wysiwyg > h2{
    font-size: 24px;
    color:black;
    font-family: "Noto Sans", sans-serif;
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/* Style des boutons */
.btn {
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color: white;
    cursor: pointer;
}

.btn:hover {
    background-color: tan;
}

.btn.active {
    background-color: Sienna;
    color: white;
}

/* Style des images */
.main .row .content img {
    width : 100%;
    opacity: 1;
}
.main .row .content img:hover {
    opacity: .5;
}