:root {
    /*couleur principal du body*/
    --marron-clair: #A79D84;
    --marron-sombre: #2B0F0F;
    /*couleur utilisé pour le contour actualité, couleur titre */
    --marron-clair-titre: #E4E0D6;
    /*contour nav bar*/
    --marron-sombre-contour : #635531;
    /*couleur point actualité*/
    --marron-sombre-actu: #2A0F0F;
    /*couleur polaroid*/
    --blanc-polaroid: #FFFFFF;
    /*paragraph polaroid*/
    --noir-titre-polaroid: #000000;
}   
body {
    overflow-x: hidden;
    background-color: var(--marron-clair);
    width: 100%;
}
header, h1, h2, h3, h4, button, a {
    font-family: 'Italianno', cursive;
}
h1 {
    font-size: 56px;
}
h2 {
    font-size: 46px;
}
h3 {
    font-size: 30px;
}
h4 {
    font-size: 25px;
}
button {
    width: 215px;
    height: 61px;
}
a {
    text-decoration: none;
}
p {
    font-family: 'Kiwi Maru', serif;
}
a:hover {
    text-decoration: underline;
    color: var(--marron-clair-titre);
}
a:focus {
    color: var(--marron-clair-titre);
}

main {
    margin-bottom: 150px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: #000;
  color: #fff;
  font-weight: bold;
  text-decoration: underline;
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: -6px;
}

main:focus {
  outline: none; /* le focus programmatique sur main n'a pas besoin d'être visible */
}

@media screen and (max-width: 1000px) {
    main {
        margin-bottom: 20px;
    }
    footer{
        padding-bottom: 90px;
    }
}