@font-face {
    font-family: 'Zodiak';
    src: url(./assets/font/Zodiak-Regular.otf);
    font-display: swap;
}
:root{
    --c-primary : rgba(235, 226, 204, 0.77);
    --f-primary : 'Zodiak', serif;
}

*{
    font-family: var(--f-primary);
}
body{
    height: 100vh;
    max-height: 100%;
    background-image: url(./assets/bg-louis-felix-communeau.webp);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    overflow: hidden;
}

section.lfc_links_container{
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 50%;
    margin-left: auto;
    align-items: center;
    padding: 0 5%;
}
a.lfc_button{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 40px;
    border: 2px solid var(--c-primary);
    border-radius: 50px;
    width: inherit;
    max-width: 40%;
    color: var(--c-primary);
    text-decoration: none;
    background-color: rgba(235, 226, 204, 0.10);
    word-break: break-all;
}
a.lfc_button:hover{
    background-color: var(--c-primary);
    color: black;
    border-color: transparent;
}
.lfc_button__icon{
    max-width: 24px;
    width: 100%;
    stroke: #EBE2CC;
    stroke-opacity: 0.77;
    height: auto;
}
a.lfc_button:hover .lfc_button__icon > *{
    stroke: black !important;
}

@media (max-width: 1470px){
    section.lfc_links_container{
        align-items: flex-end;
        padding: 0 10% 0 0;
    }
}
@media (max-width: 1300px){
    body{
        background-position: 30% top;
    }
    section.lfc_links_container{
        align-items: center;
        padding: 0;
    }
}
@media (max-width: 1024px) {
    span.lfc_button__text {
        word-break: break-word;
    }
    a.lfc_button {
        width: 100%;
        max-width: 70%;
    }
}
@media (max-width: 768px) {
    body {
        max-height: 100%;
        background-position: 40%;
    }
    section.lfc_links_container{
        width: 80%;
        padding: 0 10% 0 0;
        gap: 30px;
    }
    a.lfc_button {
        max-width: 100%;
        padding: 10px 20px;
        border-width: 1px;
    }
}