html {
    background: #48416F;
    background-image: url('../img/background.jpg');

    color: #EEED;
    text-align: center;
    font-family: calibri;
}

.night {
    background-image: url("../moyen/img/night.jpg");
}



.hard {
    background-image: url("../img/hard.jpg");
}


a {
    color: #4CCD;
    text-underline-offset: 4px;
}


.meta {
    width: 280px;
    margin: auto;

    font-family: arial;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;

    border-bottom: 1px solid #EEED;
    text-align: left;
    margin-top: 20px;
    padding-bottom: 3px;
}

.level {
    float: right;
}





.im {
    margin-top: 10px;
}

.im img {
    width: 280px;
}

.category {
    margin-top: 40px;
    margin-bottom: 14px;

    color: #EEEF;
    font-size: 15px;
    font-weight: bold;
}

.aide {
    font-size:  13px;
    margin-top: 50px;
}







#rep {
    outline: 0;
    padding: 3px;
    
}

button {
    padding: 3px 6px;
}



@media (max-width: 320px) {
    .im img,
    .meta {
        width: 90%;
    }
}


@media (min-width: 1200px) {
    html {
        background-size:cover;
    }
}







.parchemin {
    position: relative;
    width: 500px;
    min-height: 260px;
    
    box-sizing: border-box;
    padding: 34px 46px;
    margin: 20px auto 40px;

    background:
        radial-gradient(ellipse at 12% 18%, rgba(120, 92, 55, 0.28), transparent 42%),
        radial-gradient(ellipse at 88% 78%, rgba(120, 92, 55, 0.22), transparent 46%),
        radial-gradient(ellipse at 55% 8%,  rgba(90, 66, 36, 0.18), transparent 35%),
        linear-gradient(135deg, #efe3c6 0%, #e5d5a9 45%, #eee0c0 100%);

    color: #4a3520;
    font-size: 17px;
    line-height: 1.7;
    text-align: justify;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;

    box-shadow:
        inset 0 0 0 2px  #8b6f47,
        inset 0 0 0 8px  #eee0c0,
        inset 0 0 0 10px #8b6f47,
        inset 0 0 45px rgba(90, 62, 27, 0.28),
        0 14px 22px rgba(0, 0, 0, 0.4);
}

.parchemin p {
    margin: 0;
}

.parchemin::before {
    content: "⋆ ✦ ⚜ ✦ ⋆";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: #8b6f47;
    font-size: 15px;
    letter-spacing: 2px;
}

.parchemin::after {
    content: "⋆ ✦ ☽☾ ✦ ⋆";
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: #8b6f47;
    font-size: 15px;
}

.parchemin p:not(.noletter)::first-letter {
    font-family: Georgia, serif;
    font-size: 2.6em;
    font-weight: 700;
    color: #6e3b1f;
    float: left;
    line-height: 0.8;
    padding-right: 6px;
    padding-top: 4px;
}


.parchemin div {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: #6e3b1f;
    padding: 10px 0 2px 0;
    padding-top: 4px;
}

.noletter {
    line-height: 1.4;
    font-size: 14px;
}

.parchemin p a {
    color:  #6e3baa;
}






.jouer-btn {
    font: bold 20px Candara, serif;
    color: #6e3b1f;
    background: #eee0c0;
    border: 2px solid #8b6f47;
    padding: 5px 12px;
    border-radius: 8px;
    letter-spacing: -0.5px;
}

.jouer-btn:hover {
    cursor:pointer;
}


.tip {
    font-weight: bold;
    font-size: 13px;
    margin-top: 40px;
}



@media (max-width: 560px) {
    .parchemin {
        width: 90%;
        min-height: 260px;
        height: auto;
        padding: 30px 24px;
        overflow: visible;
    }

    .jouer-btn {
        margin-bottom: 40px;
    }
    
    .night, .hard {
        background-image: url("../img/m.jpg");
        background-size: cover;
    }
}


@media (min-width: 1600px) {
    .im img {
        width: 380px;
    }

    .meta {
        width: 380px;
    }

    .category {
        font-size: 19px;
    }

    #rep,
    button {
        font-size: 18px;
    }

    .aide {
        font-size: 16px;
    }

    .tip {
        font-size: 16px;
    }
}


@media (min-width: 2200px) {
    .im img {
        width: 460px;
    }

    .meta {
        width: 460px;
    }

    .category {
        font-size: 22px;
    }

    #rep,
    button {
        font-size: 21px;
    }

    .aide {
        font-size: 18px;
    }

    .tip {
        font-size: 18px;
    }
}