@import url('header.css');
@import url('footer.css');


@font-face {
    font-family: 'Taviraj';
    src: url('fonts/Taviraj-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Taviraj-Thin';
    src: url('fonts/Taviraj-Thin.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Questrial';
    src: url('fonts/Lora-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-ExtraLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Inter-Thin';
    src: url('fonts/Inter-Thin.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}



body {
    position: relative;
    background-color: #2B2725;
    margin: 0;
    padding: 0;
}


.wrapper{
/*    border: 1px solid;*/
    position: relative;
    margin: 0 auto;
    width: 1600px;
    height: 6354px;
    display: flex;
    flex-direction: column;
}
.footer-wrapper{
/*    position: absolute;*/
    position: relative;
    margin: 0 auto;
    width: 1600px;
    height: 100%;
}
.main {
    height: 100%;
}

.back{
    position: relative;
}

.circle {
    position: absolute;
    border: 1px solid #4D4A49;
    border-radius: 50%;
    width: 574px;
    height: 574px;
    z-index: -1;
}

.circle-1 {
    width: 611px;
    height: 611px;
    top: 954px;
    left: 381px;
}

.circle-2 {
    top: 4310px;
    left: 395px;
}

.circle-3 {
    top: 2855px;
    left: 216px;
}

.stripe {
    position: absolute;
    width: 1px;
    border-left: 1px solid #4D4A49;
    z-index: -1;
}

.stripe-1 {
    height: 5427px;
    top: 740px;
    left: 791px;
}

.stripe-2 {
    height: 3764px;
    top: 762px;
    left: 682px;
}

.stripe-3 {
    height: 5060px;
    top: 825px;
    left: 811px;
}


@media screen and (max-width: 1600px){
    .wrapper, .footer-wrapper {
        width: 1220px;
    }
    .back {
        left: -15.5%;
    }
    .header{
        left: 0.90%;
    }
    .footer-menu{
        left: 17.65%;
    }
}

@media screen and (max-width: 1250px){
    .wrapper{
        width: 1000px;
        height: 5272px;
    }
    .footer-wrapper{
        width: 1000px;
    }
    .header{
        left: 20px;
    }
    .footer-menu{
        left: 160px;
    }
    .back{
        left: 0%;
    }
    .circle{
        width: 470px;
        height: 470px;
    }
    .circle-1 {
        top: 733px;
        left: 190px;
    }
    .circle-2 {
        top: 3471px;
        left: 147px;
    }
    .circle-3 {
        top: 2180px;
        left: 17px;
    }
    .stripe-1 {
        height: 4260px;
        top: 606px;
        left: 490px;
    }
    .stripe-2 {
        height: 4329px;
        top: 628px;
        left: 381px;
    }
    .stripe-3 {
        height: 2324px;
        top: 1189px;
        left: 510px;
    }
}

@media screen and (max-width: 1020px){
    .wrapper{
        width: 640px;
        height: 4064px;
    }
    .footer-wrapper{
        width: 640px;
    }
    .footer-menu{
        left: 20px;
    }
    .circle{
        width: 290px;
        height: 290px;
    }
    .circle-1 {
        top: 473px;
        left: 133px;
    }
    .circle-2 {
        top: 2423px;
        left: 121px;
    }
    .circle-3 {
        top: 1566px;
        left: 20px;
    }
    .stripe-1 {
        height: 3500px;
        top: 552px;
        left: 309px;
    }
    .stripe-2 {
        height: 2890px;
        top: 756px;
        left: 329px;
    }
    .stripe-3 {
        display: none;
    }
}


@media screen and (max-width: 660px){
    .wrapper{
        max-width: 410px;
        width: 95%;
        height: 5200px;
        margin: 0 auto;
    }
    .footer-wrapper{
        width: 310px;
    }
    .header, .footer-menu{
        left: auto;
    }
    .back{
        display: none;
    }
}