/**** Last modification: 04/07/2022 - 17:21 ****/
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 200;
    src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(font1.ttf) format('truetype');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(font2.ttf) format('truetype');
}
@keyframes logo_key {
    0%{
        opacity: 0;
        top: 400px;
    }
    50%{
        opacity: 20%;
    }
    100%{
        opacity: 90%;
        top: 10px;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-weight: 300;
}
html{
    background: rgba(91, 161, 124, 0.75);
}
body {
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    font-weight: 300;
}
#logo{
    position: relative;
    animation-name: logo_key;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    z-index: 2;
}

.wrapper {
    position: absolute;
    overflow: hidden;
}

.container {
    top: 0;
    width: 50%;
    min-width: 420px;
    margin: 0 auto;
    padding: 20px 0;
    height: 450px;
    text-align: center;
}

@media (min-width: 300px) and (max-width: 399px) {
    .wrapper {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #out_span {
        font-size: 18px;
    }
    #logo{
        top: 10px;
        width:100px;
    }
}

@media (min-width: 400px) and (max-width: 799px) {
    .wrapper {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #out_span {
        font-size: 20px;
    }

    #logo {
        top: 10px;
        width: 120px;
    }
}

@media (min-width: 800px) {
    .wrapper {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #out_span {
        font-size: 22px;
    }
    #logo{
        top: 10px;
        width:160px;
    }
}