@font-face{
    font-family : "Heebo";
    font-weight: 300;
    src : url('fonts/Heebo-Light.ttf');
}

@font-face{
    font-family : "Heebo";
    font-weight: 700;
    src : url('fonts/Heebo-Bold.ttf');
}

@font-face{
    font-family : "Heebo";
    font-weight: 900;
    src : url('fonts/Heebo-Black.ttf');
}

* { font-family: 'Heebo', sans-serif !important; }

html, body { margin: 0; padding: 0; width: 100%; background: rgb(245,245,245) }

header { width: 800px; margin: 40px auto 0 auto; text-align: center }
header h1 { font-size: 40px; font-weight: 700; margin: 0; color: #CD0B09; margin-bottom: 10px; }

section { width: calc(100% - 100px); max-width: 1600px; margin: 20px auto 100px auto }
section .reaction { position: relative; width: calc(100% - 200px); display: flex; padding: 15px; background: white; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1); transition: all .3s ease; border-radius: 6px; color: black; text-decoration: none }
section .reaction:hover { box-shadow: 3px 3px 20px 0 rgba(0,0,0,.2); }
section .reaction.right { float: right; }
section .reaction img { display: block; object-fit: scale-down; max-width: 180px; margin-right: 15px }
section .reaction .reaction_infos h1 { font-weight: 700; }
section .reaction .reaction_date { position: absolute; bottom: 10px; right: 15px; color: rgb(180,180,180) }
section .separator { clear: both; height: 20px; }

#back_button { position: absolute; font-size: 16px; top: 15px; left: 15px; font-weight: 900;  display: inline-block; background: #CD0B09; padding: 10px 15px; margin-top: 0; text-decoration: none; text-align: center; border-radius: 6px; color: white; }
#back_button:hover { background-color: #bf0a08 }
#back_button img { display: inline-block; margin-right: 10px; transform: rotate(180deg); width: 18px; margin-bottom: -4px; filter: invert(100%) }


@media (max-width: 1100px) {

    header { width: calc(100% - 80px); margin: 80px auto 0 auto; }
    header h1 { font-size: 40px; }

    section { width: calc(100% - 40px); }
    section .reaction { display: block; width: calc(100% - 20px); padding: 10px; text-align: center }
    section .reaction img { max-width: 100%; max-height: 200px; margin: 0 auto }
    section .reaction.right { float: none; }
    section p { padding-bottom: 20px; }

}