@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap');

:root {
    --bg: #fff;
    --clr-primary: #f26b63;
    --clr-secondary: #00b9e4;
    font-family: 'Dosis', sans-serif;
    font-size: 3rem;
}

body {
    min-height: 100vh;
    background-color: var(--bg);
    /*
    background-image: url("img/Symbole.svg");
    background-repeat: no-repeat;
    background-position: 103% 47%;
    background-size: 500% 950%;
    */
}

.container {
    padding: clamp(10vw, 7%, 20vw);
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

#logo {
    width: 520px;
    aspect-ratio: 5/2;
    background-image: url("img/Logo-WIP-Factory-notext.svg");
    background-repeat: no-repeat;
    background-size: contain;
    /* margin: 5vw 5vw 0 auto; */
    display: block;
    transform: translate(5vw, 5vw);
}
.content {
    width: min(90%, 1200px);
    margin-inline: auto;
    text-align: right;

    & h1,
    & p {
        margin-block: 0;
    }
    
}

.contact {
    position: fixed;
    bottom: 0;
    left: clamp(10vw, 7%, 20vw);
    width: 120px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    &::before {
        z-index: 0;
        content: '';
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: 100%;
        background-color: var(--clr-secondary);
        position: absolute;
        top: 50%;
        left: 0;
    }

    & i {
        position: relative;
        z-index: 1;
        font-size: .6rem;
        color: #fff;
    }
}