/* Changement spécifique au projet */

body {
    margin: 0;
    font-family:'Lato', sans-serif;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('../images/tarot/background.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.logo svg path {
  fill: #333333;
  transition: fill 0.3s ease;
}

.burger span {
    background-color: #333333;
}

.nav-links li:not(:nth-child(4)) a {
    color: #333333;
}

.btn-tertiary {
    background-color: #333333;
}

.btn-tertiary:hover,
.btn-tertiary:active {
    background-color: #1A1A1A;
}

footer {
    border-top: 2px solid #3333332e;
}

footer div p {
    color: #333333;
}

h1 {
    color: #333333;
}

p > span {
    color: #333333;
}

/* Introduction du projet */

.introduction {
    display: grid;
    align-items: end;
    grid-template-columns: 7fr 5fr;
    gap: 24px;
}

.introduction > div {
    grid-column: span 1;
}

.intro-text{
    padding: 0px 10% 56px 0px;
}

.image-full-height {
    display: flex;
    justify-content: right;
}

.image-full-height img:first-of-type {
    width: 100%;
    height: auto;
    padding-left: 15%;
    z-index: 100;
}

/* Moodboard */

.moodboard-section {
    background-image: url('../images/tarot/deco-one.webp');
    background-position: left -14% bottom 40%;
    background-size: 700px auto;
    background-repeat: no-repeat;
}

.moodboard > div:first-of-type {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 24px;
}

.moodboard > div:first-of-type > img:first-of-type {
    grid-column: span 3;
}

.moodboard > div:first-of-type > div {
    grid-column: span 6;
}

.moodboard > div:first-of-type > img:last-of-type {
    grid-column: span 3;
}

.description > div > h2 {
    text-align: center;
}

.description > div > p {
    text-align: center;
}

/* Illustration & System des personnages */

.character-section {
    background-image: url('../images/tarot/deco-two.webp');
    background-position: right -13% bottom 20%;
    background-size: 700px auto;
    background-repeat: no-repeat;
}

.character > div:first-of-type {
    display: grid;
    align-items: center;
    grid-template-columns: 8fr 4fr;
    gap: 24px;
}

.character > div:nth-of-type(2) {
    padding: 40px 0px;
}

.character > div:nth-of-type(3) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
    gap: 40px;
    padding-bottom: 40px;
}

.character > div:nth-of-type(3) > div {
    grid-column: span 6;
}

.character > div:nth-of-type(3) > div:last-of-type {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.character > div:nth-of-type(3) > div:first-of-type > img:first-of-type {
    padding-bottom: 40px;
}

.character > div:nth-of-type(3) > div:last-of-type > p {
    padding-bottom: 32px;
}

/* Couleurs */

.color-section {
    background-image: url('../images/tarot/deco-two.webp');
    background-position: left -30% bottom 20%;
    background-size: 700px auto;
    background-repeat: no-repeat;
}

.color > div:first-of-type {
    display: grid;
    align-items: center;
    grid-template-columns: 5fr 7fr;
    gap: 24px;
    padding-bottom: 20px;
}

.color > div:first-of-type > div:first-of-type {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 4% 0px 0px;
}

.color > div:nth-of-type(3) {
    display: grid;
    align-items: center;
    grid-template-columns: 4fr 4fr 4fr;
    gap: 24px;
    padding-top: 20px;
}

/* Generation des cartes */

.cards-section {
    background-image: url('../images/tarot/deco-one.webp');
    background-position: right -20% bottom 50%;
    background-size: 700px auto;
    background-repeat: no-repeat;
}

.cards > div:first-of-type {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 24px;
}

.cards > div:first-of-type > img:first-of-type {
    grid-column: span 2;
}

.cards > div:first-of-type > div {
    grid-column: span 8;
}

.cards > div:first-of-type > img:last-of-type {
    grid-column: span 2;
}

/* Other section */

.other-project-section {
    background-image: url('../images/tarot/deco-two.webp');
    background-position: left -20% top 140%;
    background-size: 700px auto;
    background-repeat: no-repeat;
}

/* RESPONSIVE */

@media (max-width: 960px) {
    .image-full-height img:first-of-type {
        padding-left: 2%;
    }

    .color > div:first-of-type {
        align-items: end;
    }
}

@media (max-width: 720px) {
    .width {
        padding: 56px 12px;
    }
    
    .div-none-mobile {
        display: none;
    }

    .introduction,
    .moodboard > div:first-of-type,
    .character > div:first-of-type,
    .character > div:nth-of-type(2),
    .character > div:nth-of-type(3),
    .color > div:first-of-type,
    .color > div:nth-of-type(3),
    .cards > div:first-of-type {
        grid-template-columns: 1fr;
    }

    .intro-text {
        padding: 0px 0px 56px 0px;
    }

    .moodboard-section,
    .character-section,
    .color-section,
    .cards-section,
    .other-project-section {
        background-image: none;
    }

    .character > div:nth-of-type(3) {
        display: flex;
        flex-direction: column-reverse;
        gap: 24px;
        padding-bottom: 24px;
    }

    .character > div:nth-of-type(3) > div:first-of-type > img:first-of-type {
        padding-bottom: 24px;
    }

    .color > div:first-of-type > div:first-of-type {
        padding: 0px 0px 36px 0px;
    }
}

@media (max-width: 540px) {
    .width {
        padding: 40px 12px;
    }

    .color > div:first-of-type > div:first-of-type {
        padding: 0px 0px 20px 0px;
    }
}

@media (max-width: 376px) {
    .width {
        padding: 24px 12px;
    }

    .intro-text {
        padding: 0px 0px 40px 0px;
    }
}