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

*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body{
    margin: 0;
    padding: 0;
    min-height:100dvh;
}

body {
    font-family: "Sen", sans-serif;
    font-size:1.5rem;
    color:#ffffff;
    letter-spacing:2px;
    margin: 0;
    padding: 0;
    background:url(background-desktop-optimized.jpg) center no-repeat;
    background-size:cover;
    position:relative;
    z-index:0;
}

@media (orientation: portrait) {
    body {
        background:url(background-mobile-optimized.jpg) center no-repeat;
        background-size:cover;
        position:relative;
    }
}

body:after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.5);
    z-index:-1;
}

.wrapper{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    padding:3rem 2rem;
    width:100dvw;
    height:100dvh;
    position:relative;
    z-index:1;
}

.top{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    width:100%;
}

.top .logo{
    width:100%;
    max-width:650px;
}

.bottom{
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    padding-right:3rem;
    padding-bottom:2rem;
    width:100%;
}

.bottom p{
    color:#ffffff;
    text-align:right;
    margin:0;
    padding:0;
    display:inline-block;
}

.bottom a{
    color:#ffffff;
    text-decoration:none;
}

.bottom .big{
    font-size:4.5rem;
    letter-spacing:3px;
    position:relative;
    padding:1rem 0 0 0;
    margin:1rem 0 0 0;
    display:inline-block;
}
.bottom .big:after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:url(line.png) top center no-repeat;
    background-size:100% 15%;
}

@media (max-width:1280px){
    body {
        font-size:1.5rem;
    }
    .top .logo{
        width:100%;
        max-width:450px;
    }
    .bottom{
        padding-right:1rem;
        padding-bottom:0;
    }
    .bottom .big{
        font-size:3rem;
        letter-spacing:3px;
    }
}

@media (max-width:980px){
    body {
        font-size:1.7rem;
    }
    .top .logo{
        width:100%;
        max-width:350px;
    }
    .bottom .big{
        font-size:2.5rem;
        letter-spacing:3px;
    }
}

@media (max-width:980px){
    body {
        font-size:1rem;
        letter-spacing:0px;
    }
    .wrapper{
        padding:2rem;
    }
    .top .logo{
        width:100%;
        max-width:280px;
    }
    .bottom{
        padding-right:0;
        padding-bottom:0;
    }
    .bottom .big{
        font-size:1.8rem;
        letter-spacing:1px;
    }
}