/* ===================================
    01. Google font
====================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

/* ===================================
    02. Reset
====================================== */

html { height: 100%; }
body {font-family: 'Manrope', sans-serif; color: #ffffff; height: 100%; background: #f4f5f9; margin: 0; padding: 10% 0 0 0; height: 100%; box-sizing: border-box; }
.documentation-main {width: 1200px; margin: 0 auto; text-align: center; padding: 0 15px; box-sizing: border-box;}
.documentation-main img {margin: 0 10px}
h1 {font-family: 'Manrope', sans-serif; font-size: 40px; width: 70%; margin: 0 auto; line-height: 32px; font-weight: 800; color: #232323; margin-bottom: 2%; letter-spacing: -1px}
p {width: 55%; margin: 0 auto; color: #717580; margin-bottom: 7%; font-size: 18px; line-height: 32px;}
.logo { margin-bottom: 65px; display: inline-block;}

@media (max-width: 1210px) {
    body { padding: 8% 0; }
    .documentation-main {width: 992px; }   
    h1 {width: 50%;}
    p {width: 62%;}
    .documentation-main a img{ width: 44%; }
    .documentation-main a.logo img{ width: 200px;}
}

@media (max-width: 1000px) {
    .documentation-main {width: 760px;}   
    h1 {width: 60%;}
    p {width: 77%;}
    .documentation-main a img{ width: 40%; }
    .documentation-main a.logo img{ width: 175px;}
}

@media (max-width: 767px) {
    .documentation-main {width: 100%;}   
    .logo {margin-bottom: 45px; }
    h1 {width: 100%; font-size: 24px; line-height: 34px; margin-bottom: 4%;}
    p {width: 100%; font-weight: 400;}
    .documentation-main a img{ width: 90%; }
    .documentation-main a.logo img{ width: 175px;}
    .documentation-main img {margin: 0}
}

@media (max-width: 640px) {
    .documentation-main {width: 100%;}   

    .documentation-main a img{ width: 100%; }
    .documentation-main img {margin: 0}
}