@font-face 
{
  font-family: 'Inter';
  src: url('../fonts/inter_regular.ttf');
  font-weight: 400;
}


*
{
    font-family: 'Inter', Arial;
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    position: relative;
    border: none;
    outline: none;
    box-shadow: none;
}

a
{
    text-decoration: none;
    color:black;
}

p
{
    margin:0.5vw 0;
}

html
{
    font-size: 16px;
}

body
{
    min-height:100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    body > header
    {
        width: 100%;

        display:flex;
        flex-direction: row;
        align-items: center;
    }

        body > header > div
        {
            flex-grow: 1;
            flex-basis: 0;
            margin:0 10px;
        }

        body > header > div:first-child
        {
            text-align: right;
        }

        body > header img
        {
            width:10vw;
        }

    .title
    {
        font-size:clamp(1rem, 2vw, 2rem);
        font-weight:300;
        color:var(--main-bg-color);
    }

    #hbar
    {
        height:2px;
        background:linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 100%);
        width:70%;
        margin-bottom:5px;
        opacity:1;
        transition: opacity 5s;
    }

    #content
    {
        width: 100%;
        padding:0 1vw;
        flex-grow: 1;

        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

        .halfBloc
        {
            width:50%;
        }

        #cv
        {
            padding-left: 2vw;
        }

            #noPDFReader
            {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                height:100%;
            }

            .button
            {
                background-color: #6eaf0c;
                border-radius: 6px;
                padding: 10px;
                margin-top:10px;
                font-weight: bold;
            }

        #motiv
        {
            font-size:clamp(0.7rem, 2vw, 1rem);
            text-align: justify;

            display:flex;
            flex-direction: column;
            justify-content:center;
        }

    footer
    {
        padding:20px 0 15px 0;
        text-align: center;
        width:20vw;
    }

    #copyright
    {
        opacity: 1;
        transition: opacity 500ms;

        cursor:pointer;
    }
  
        #copyright.hide,
        #hbar.hide
        {
            opacity:0;
        }

    #beaver
    {
        font-size: 0.8rem;
        color:darkgray;
        font-style: italic;

        position: absolute;
        right:5px;
        bottom: 2px;
    }

    .important
    {
        font-size: 1.2rem;
    }

/* RESPONSIVE */
@media only screen and (max-device-width : 780px)
{
    #content
    {
        flex-direction: column;
    }

    .halfBloc
    {
        width:100%;
    }

    p
    {
        margin:2vw;
    }

    #cv
    {
        margin-top:1vw;
        padding-left: 0;
        aspect-ratio: 210/297;
    }

    #beaver
    {
        margin-top:1vw;
        position: relative;
    }

    footer
    {
        width:80%;
    }
}

@media only screen and (max-device-width : 1080px)
{
    p
    {
        margin:1vw;
    }
}