/* Typo */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,700;0,800;1,500;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Euphoria+Script&display=swap');

/* CONTENT */
body {
    background: url(images/ambre-et-max.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
}

#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10;
    overflow: scroll;
}

#wrapper {
    padding:5%;
}

/* HEADER */
h1 {
    margin:0;
    text-align: center;
    font-family: 'Euphoria Script', cursive;
    font-size:100px;
}

.sep {
    background-color:#fff;
    height: 1px;
    width:30%;
    margin:40px auto;
}

.sep.bis {
    margin-bottom: 0;
}

/* COEURS */
#hearts {
    text-align: center;
    margin-top:120px;
    margin-bottom:120px;
}

.heart {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:20px 30px;
    width:170px;
    height:170px;
    background: url(images/heart_3.png) no-repeat;
    background-size: 100% 100%;

    opacity: 0.85;
    transform:rotate(20deg);
    transition: all .8s ease-in-out;
}

.heart:hover {
    cursor: pointer;

    opacity: 1;
    transform:rotate(0deg);
}

.heart span {
    font-size: 17px;
}

/* CITATIONS */
#citations {
    position: relative;
}

#citations p {
    position: absolute;
    text-align: center;
    font-family: 'Euphoria Script', cursive;
    font-size: 50px;
    width:100%;
    opacity:0;
    transition: all .8s ease-in-out;
}

#citations p.active {
    opacity:1;
}