styles.css

* {
    box-sizing: border-box;
  }
  html{
    scroll-behavior: smooth;
  }
  
  body{
    margin:0px;
  }
.back {
   position:fixed;
   right: 1.5vw;
   top: 0px;
   height: 100vh;
   z-index: -2;
}
.inner-div{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
}
#just-dna-seq::before{
    content: url("./images/mini_logo_1.png");
    position: absolute;
    right: -160px;
    top: 3px;
    display: inline-block;
    z-index: 0;
}
.textt-1{
    z-index: 1;
}
img.old_couple{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.block{
    margin-left: -120px;
    z-index: 0;
    width: 83vw;
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
}
h3.big-text{
    text-align: center;
    margin-left: 7%;
    border: 3px solid rgb(149, 166, 238);
    border-left: 0px;
    font-size: 3em;
    border-right: 0px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 3em;
    margin-bottom: 3em;
}
.textt{
    width: 35%;
    z-index: 2;
    padding-left: 10px;
    height: fit-content;
    text-align: right;
    border: 3px solid rgb(149, 166, 238);
    border-left: 0px;
    padding-right: 10px;
    background-color: rgba(255, 255, 255, 0.349);
    margin-top: 20px;

}
.inner-div.inner-div0{
    align-items: flex-end;
}
.inner-div2 img.doctor{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    width: 50%;
    z-index: 8;
}
.textt-1{
    border: 3px solid rgb(149, 166, 238);
    border-right: 0px;
    height:fit-content;
    background-color: rgba(255, 255, 255, 0.349);
    margin-top: 30px;
    width: 40%;
    padding-left: 10px;
}
.textt-2{
    margin-top: 30px;
    width: 35%;
    text-align: right;
    z-index: 1;
    border: 3px solid rgb(149, 166, 238);
    border-left: 0px;
    padding-right: 20px;
    padding-left: 10px;
    padding-bottom: 40px;
    height: fit-content
}
.inner-div1, .inner-div2{
    margin-top: 40px;
}

.lane{
    width: 151%;
    height: 100px;
    align-items: center;
    text-align: center;
    background-color: #4364be;
    margin-left: -190px;
}
.empty{
    width: 32%;
}
.old_couple{
    right: auto;
}
p.boldd{
    font-weight: 500;
}
.block img{
    width: 47%;
}
.block img.vertical{
    width: 50%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.check-it p{
font-size: 22px;
}
.check-it p.small{
    font-size: 20px;
}
a.header-element{
    display:block;
    color: white;
    font-size: 1.3em;
    font-weight: 600;
}
a.header-element:before{
    content:"";
    display: inline-block;
    width: 0%;
    height: 3px;
    background-color: white;
    transition: width 0.5s;
}
a.header-element:hover a.header-element:before{
    width: 100%;
}
.small-container{
    display:flex;
    height: 80px;
    justify-content:space-around;
    align-items:center;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
}
h2#why.why{
    margin-top: 1.5em;
}
h1{
    z-index: 1;
    position: relative;
}
.description{
    margin-top: 2.5vw;
    font-size: 1.2vw;
    color:#656769;
}
.other-ol li:not(:last-child) { 
    margin-bottom: 30px;  
 }
.other-ol{
    margin-top: 40px;
    font-weight: 500;
    width: 80%;
    margin-bottom: 40px;
    font-size: 1.2vw;
    margin-right: auto;
    margin-left: auto;
}

.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 16%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
   overflow-x: hidden; /* Disable horizontal scroll */
   background: rgb(95,126,158);
background: -moz-linear-gradient(0deg, rgba(95,126,158,1) 0%, rgba(123,166,199,1) 50%, rgba(153,198,244,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(95,126,158,1) 0%, rgba(123,166,199,1) 50%, rgba(153,198,244,1) 100%);
background: linear-gradient(0deg, rgba(95,126,158,1) 0%, rgba(123,166,199,1) 50%, rgba(153,198,244,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5f7e9e",endColorstr="#99c6f4",GradientType=1);
  padding-top: 30px;
  padding-left: 10px;
  box-shadow: rgba(104, 104, 158, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

/* The navigation menu links */
.sidenav a, .topnav a {
  padding: 6px 8px 10px 16px;
  text-decoration: none;
  font-size: 25px;
  font-weight: 600;
  color: #324d66;
  display: block;
}
.login{
    background-color: rgb(196, 215, 255);
    width: 90%;
    height: 70px;
    align-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    transition: background-color .3s ease;
    font-size: 20px;
    border-bottom: 4px solid white;
}
.sidenav p.details, .topnav p.details{
    font-weight: 300;
    font-size: 17px;
    margin-bottom:0px;
    margin-top: 0px;
}
.login:hover{
    background-color: #419aee;
}
.sidenav p,  .topnav p{
font-size: 25px;
color: rgb(255, 255, 255);
font-weight: 500;
text-align: center;
margin-top: 60px;
}
/* Style the navigation menu */
.topnav {
    overflow: hidden;
    position: relative;
    background: rgb(95,126,158);
background: -moz-linear-gradient(0deg, rgba(95,126,158,1) 0%, rgba(123,166,199,1) 50%, rgba(153,198,244,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(95,126,158,1) 0%, rgba(123,166,199,1) 50%, rgba(153,198,244,1) 100%);
background: linear-gradient(0deg, rgba(95,126,158,1) 0%, rgba(123,166,199,1) 50%, rgba(153,198,244,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5f7e9e",endColorstr="#99c6f4",GradientType=1);
  }
.topnav a.main-links{
    font-size: 27px;
    border-bottom: #eeeaff 2px solid;
 
}
div.intro p.description{
    text-align: center;
}
.small-paragraph{
    text-align: center;
}
  /* Hide the links inside the navigation menu (except for logo/home) */
  .topnav #myLinks {
    display: none;
  }
  p.details:last-child{
    margin-bottom: 40px;
  }
  p.details:first{
    margin-top: 40px;
  }
  .topnav div.login{
width: 40%;
  }
  /* Style navigation menu links */
  .topnav a {
    color: rgb(255, 255, 255);
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  
  /* Style the hamburger menu */
  .topnav a.icon1 {
    background: rgb(64, 73, 94);
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav{
    display: none;
  }
  /* Add a grey background color on mouse-over */
  .topnav a:hover {
    background-color: #ddd;
    color: black !important;
  }
  
  /* Style the active link (or home/logo) */
  .active {
    background: rgb(95,126,158);

    color: white;
  }
.sidenav li a, .topnav li a{
    font-size: 24px;
    font-weight: 400;
    padding-top: 0px;
}
.sidenav li, .topnav li{
    display: block;
}

a.main-links{
    color:#2f444b;
    font-weight: 500;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .topnav a:hover  {
    color: rgb(211, 226, 255);
}

.inframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
  .sidenav .gitcoin p, .sidenav .gitcoin-a{
    margin-top: 0px;
    width: 100%;
    font-size: 18px;
    color:rgb(191, 189, 224)
  }
  .gitcoin{
    background: rgb(63, 64, 86);
    margin-left: auto;
    margin-right: auto;
    width: 110%;
    margin-left: -10px;
    height: 50px;
    align-content: center;
    text-align: center;
    margin-bottom: 20px;
  }
  .gitcoin.gitcoin2{
    width: 100%;
    margin-left: 0px;
    margin-top: 40px;
  }
/* Style page content */
.main {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
u{
    color:#91a0ff;
}
u:hover{
    color:#cad4ff;
}

h1{
    margin-top: 30px;
    font-size: 5vw;
    font-weight: 600;
    font-family: "Rajdhani", sans-serif;
    margin-bottom: 4vw;
    color:#4f69b1;
    text-align: right;
    border-bottom:rgb(104, 124, 219) solid 3px;
}
.container{
    margin-right:17vw;
    margin-left: 17vw;
}

body{
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    color:#35574e;
    overflow-x: hidden;
}

p{
    font-size: 1.2vw;
    font-weight: 300;
}
h2{
    font-size: 1.7vw;
    font-weight: 300;
    margin-bottom:  0.5vw;
    margin-top: 7vw;
}
h2{
display: block;
border-top: solid 4px rgb(99, 164, 248);
border-bottom: solid 4px rgb(99, 164, 248);
width: fit-content;
padding-left: 10px;
padding-right: 10px;
font-size: 2.7vw;
font-family: "Rajdhani", sans-serif;
font-weight: 500 !important;
}
#toTop{
    z-index: 100;
    height: 70px;
    width: 70px;
    background-color: #1b6db9;
    border-radius: 10px;
    position: fixed;
    right: 2.35%;
    bottom: 10%;
    display:none;	
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: background-color 0.5s;
}
#toTop:hover{
    background-color: #419aee;
}
.arrow{
    position: absolute;
    bottom: 10%;
    z-index: 10;
}
.bodypart{
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid white;
    right: 20px;
    top:20%;
}
.btnExit{
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: btnExit;
}

@keyframes btnExit {
from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: scale3d(0.8, 0.8, 0.8);
    }
    }


.btnEntrance{
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: btnEntrance;
}

@keyframes btnEntrance {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 1;
    }
    }
.line{
    right: 31px;
    bottom: 18px;
    background: white;
    width: 8px;
    height: 33px;
}
h2.how{
    margin-top: 50px;
}
.check-it{
    width: 45%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    margin-bottom: 30px;
}
.check-it p{
    color:#eba742;
    font-weight: 400;
    font-size: 30px;
}
p.small{
    font-size: 0.8em;
    font-weight: 400;
    color:#5c7c96;
}
.white{
    background-color: rgba(255, 255, 255, 0.9);
}
.sections{
    text-align: left;
}
.gith{
    padding-top: 0.8vw;
    font-weight: 400;
}
.gith1 a{
    color:#cfa42e
}
.gith2 a{
    color:#50b93a
}
.gith3 a{
    color:#51b7be
}
.gith4 a{
    color:#8ebb39
}
.gith5 a{
    color:#4364be
}

.contact-info{
    margin-right: 16vw;
    margin-left: -2vw;
}
.contacts{
    margin-top: 3vw;

}
.square-transition {
    opacity: 1;
    transform: none;
}
.sections{
    visibility: hidden;
}
.qr{
    display:block;
    margin-right: auto;
    margin-left: auto;
    width: 20vw;
}

@keyframes wipe-enter {
	0% {
        opacity: 0;
		transform: scale(0, 0);
	}
	50% {
		transform: scale(1, .025);
	}
    75%{
        opacity: 1;
    }
}

@keyframes slidein {
    from {
       opacity:0;
      transform: translate(0, 4em);
    }
  
    to {
        opacity: 1;
      transform: translate(0, 0);
    }
  }
@media (prefers-reduced-motion: no-preference) {
    .square-animation {
        visibility: visible;
      animation: slidein 1.2s 1;
    }
  }


footer{
    background-color: rgba(255, 255, 255, 0.7);
    height: 100px;
    padding-top: 50px;
    margin-top: 4vw;
    margin-bottom: 0px;
}
.footer-container{
    margin-right:11vw;
    margin-left: 11vw;
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}
.footer-container li{
    display:inline;
    font-size: 1.2vw;
}


.test{
    width: 100px;
    height: 100px;
    background-color: #54a2c7;
}
a{
    text-decoration: none;
    color: #54a2c7;
}
.link1{
    color:#d8b145;
}

.link2{
    color:#7ace6a;
}

.link3{
    color:#57dae4;
}

.link4{
    color:#a0cf47;
}

.link5{
    color:#577de4;
}

.link1:hover{
    color:#ffcb5a;
}

.link2:hover{
    color:#64e64a;
}

.link3:hover{
    color:#88eef5;
}

.link4:hover{
    color:#aee44a;
}

.link5:hover{
    color:rgb(137, 168, 255);
}
.why{
    color:#85a5ff;
    font-weight: 400;
    width: 40%;
}
.how{
    color:#85a5ff;
    font-weight: 400;
    color:#57dae4;
    color:#aee44a;
    color:#ffcb5a;
    color:#85a5ff;
}


.work{
    color:#85a5ff;
    font-weight: 400;
    margin-bottom: 2.5vw;
}
.white-intro{
    padding-bottom: 3vw;
    border-radius: 40px;
    text-align: left;
}
.white-why{
    padding: 2vw 2vw 2vw 0;
    border-radius: 40px;
    line-height: 1.3;
    border-radius: 40px;
}
.image{
    display: block;
    margin-right: auto;
    margin-left:auto;
    width: 50vw;
}
.report{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 35vw;
    margin-top:50px;
}
.icon{
    width: 10vw;
}

.white-how{
    line-height: 1.3;
    border-radius: 40px;
    padding: 2vw 2vw 2vw 0;
}
.outer{
    line-height: 2;
}
.intro ul{
    font-size: 1.2vw;
    font-weight: 300;
}

.contacts ul{
        font-size: 1.2vw;
        font-weight: 300;
        list-style-type: circle;
}

.contacts li{
    margin-top: 1vw;
}

.sections{
    background-color: white;
    margin-top: 8vw;
    border-radius: 10px;
    line-height: 1.23;
}
.sections1{
    margin-right: -2vw;
    margin-left:6vw;
    border:#d8b145 solid 0.5vw;

}

.sections2{
    margin-left:-2vw;
    margin-right: 6vw;
    border:#7ace6a solid 0.5vw;
}
.sections3{
    margin-right: -2vw;
    margin-left:6vw;
    border:#57dae4 solid 0.5vw;
}
.sections4{
    margin-left:-2vw;
    margin-right: 6vw;
    border:#a0cf47 solid 0.5vw;
}
.sections5{
    margin-right: -2vw;
    margin-left:6vw;
    border:#577de4 solid 0.5vw;
}
.section22{
    border:#57dae4 solid 0.5vw;
}

.sections section{
    margin-top:1vw;
    margin-bottom:1vw;
}
table th{
    font-size: 1.1vw;
    font-weight: 300;
}
th{
    padding: 20px;
}
.tables{
    margin-bottom: 15vw;
}
.support1{
    margin-top: 5vw;
}
.small-conteiner{
    display: flex;
    width:80%;
    margin: auto;
    margin-bottom: 3vw;
    align-items: center;
}
.small-conteiner p{
    font-weight: 400;
    color: rgb(128, 151, 149);
}
.small-conteiner a{
    color: rgb(35, 184, 171);
}
.support{
    font-size: 3rem; 
    font-weight: 400; 
    color:rgb(59, 209, 209);
    text-align: center;
}
.support-section{
    border: 5px solid rgb(65, 212, 175);
    margin-top: 3vw;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (max-width: 1800px) and (min-width: 1001px){

    .small-conteiner img{
        width: 20vw;
        margin-left: 1vw;
    }
    .qr{
        width: 30vw;
    }
    .support{
        margin-top: 2vw;
        font-size: 2.5rem; 
    }
    .support1{
        margin-top: 5vw;
    }
    .back{
        right: 0vw;
        height: 67vw;
        width: 40vw;
    }
    div.intro p#report.description{
        font-size: 2vw;
    }
    footer{
        margin-top: 8vw;
    }
    .report{
        width: 45vw;
    }
    section{
        font-size: 1.5vw;
    }
    .icon{
        width: 15vw;
    }
    p{
        font-size: 1.5vw;
    }
    li{
        font-size: 1.5vw;
    }
    .footer-container li{
        font-size: 1.7vw;
    }
    h1{
        font-family: "Rajdhani", sans-serif;
        font-size: 5vw;
        text-align: center;
        font-weight: 600;
    }
    p.description{
        font-size: 2vw;;
    }
    h2{
        font-size: 2.7vw;
        font-family: "Rajdhani", sans-serif;
        font-weight: 500 !important;
    }
    .contact-info{
        margin-right: 20vw;
        margin-left: -9vw;
    }
    .footer-container{
        margin-left: 3vw;
        margin-right: 3vw;
    }

}

@media only screen and (max-width: 1600px) and (min-width: 1001px){
    #just-dna-seq::before{
        right: -100px;
        top: 0px;
    }

    .main{
        margin-left: 0px;
    }
    .topnav{
        display: block;
      }
      .sidenav{
        display: none;
      }
      h3.big-text{
        text-align: center;
        margin-top: 4em;
        margin-bottom: 4em;
      }
    .back{
        visibility: hidden;
    }
    .block{
        margin-left: 0px;
    }
    .report{
        width: 60vw;
    }
    .contact-info{
        margin-right: 0vw;
        margin-left: 0vw;
    }
    .footer-container{
        margin-left: 10vw;
        margin-right: 10vw;
    }
    .not{
        border-radius: 5px;
        margin-right:-8vw;
        margin-left: -8vw;
        
    }
    p{
        font-size: 2vw;
    }
    section{
        font-size: 2vw;
    }
    li{
        font-size: 2vw;
    }
    .footer-container li{
        font-size: 2vw;
    }
    .footer-container{
        margin-left: 1vw;
        margin-right:1vw;
    }
    .image{
        width: 65vw;
    }
    .sections1{
        margin-right: -2vw;
        margin-left:-2vw;
    }
    
    .sections2{
        margin-right: -4vw;
        margin-left:-4vw;
    }
    .sections3{
        margin-right: -6vw;
        margin-left:-6vw;
    }
    .sections4{
        margin-right: -8vw;
        margin-left:-8vw;
    }
    .sections5{
        margin-right: -10vw;
        margin-left:-10vw;
    }
    .section22{
        margin-right: -12vw;
        margin-left:-12vw;
    }
    .section11{
        margin-right: -14vw;
        margin-left:-14vw;
    }
    h1{
        text-align: center;
    }
    .other-ol{
        width: 100%;
    }
}

@media only screen and (max-width: 1000px) {
    #just-dna-seq::before{
        right: -70px;
        top: 0px;
    }
    .inner-div1, .inner-div2{
        margin-top: 0px;
    }
    .block{
        margin-left: -80px;
    }
    .inner-div0{
        flex-direction: column;
    }
    .inner-div{
        flex-direction: column;
    }
    .inner-div.inner-div2{
        flex-direction: column-reverse;
    }
    .textt, .textt-1, .textt-2{
        width: 100%;
    }
    .block img, 
    .block img.vertical, .inner-div2 img.doctor {
        width: 100%;
    }
    .inner-div2 img.doctor {
        margin-top: 20px;
    }
    img.old_couple {
        margin-top: 20px;
    }
    .inner-div1{
        flex-direction: column;
    }
    .inner-div2{
        flex-direction: column;
    }
    .check-it{
        width: 100%;
    }
    .topnav div.login{
        width: 60%;
          }
    h1{
        text-align: center;
    }
    .other-ol{
        font-size: 3vw;
        width: 100%;
    }
    .topnav{
        display: block;
      }
      .main{
        margin-left: 0px;
    }
      .sidenav{
        display: none;
      }
    p.support{
        font-size: 4vw;;
    }
    .small-conteiner img{
        width: 30vw;
        margin-left: 1vw;
    }

    .support1{
        margin-top: 10vw;
    }
    .qr{
        width: 40vw;
        margin-bottom: 15vw;
    }
    .support{
        font-size: 1.5rem; 
    }
    .description{
        font-size: 3vw;
    }
    h1{
        margin-top: 50px;
        font-size: 8vw;
        margin-bottom: 3vw;
    }
    .report{
        width: 80vw;
    }
    .white-intro, .white-how, .white-why{
        border-radius: 5px;
        margin-right:-5vw;
        margin-left: -5vw;
    }
    .not{
        margin-right:-8vw;
        margin-left: -8vw;
    }
    p{
        font-size: 3vw;
    }
    h2{
        font-size: 5vw;
    }
    .intro ul{
        font-size: 3vw;
        padding-inline-start: 6vw;
        }
    .white-intro{
        padding-left: 3vw;
        padding-right: 3vw;
        }
    .outer{
        margin-left: 2vw;
        margin-right: 2vw;
        line-height: 2;
        }
    .white-why, .white-how{
        padding: 3vw 3vw 5vw 5vw;
    }
    .image{
        width: 70vw;
    }
    .sections{
        border-radius: 5px;
    }
    .sections1{
        margin-right: 0vw;
        margin-left:0vw;
        border:#d8b145 solid 1vw;
    }

    .sections2{
        margin-left: -2vw;
        margin-right: -2vw;
        border:#7ace6a solid 1vw;
    }
    .sections3{
        margin-right: -4vw;
        margin-left:-4vw;
        border:#57dae4 solid 1vw;
    }
    .sections4{
        margin-left:-6vw;
        margin-right: -6vw;
        border:#a0cf47 solid 1vw;
    }
    .sections5{
        margin-right: -8vw;
        margin-left:-8vw;
        border:#577de4 solid 1vw;
    }
    h3.big-text{
        font-size: 4vw;
    
    }
    .section22{
        border:#57dae4 solid 1vw;
        margin-right: -10vw;
        margin-left:-10vw;
    }


    .section11{
        margin-right: -12vw;
        margin-left:-12vw;
    }
    .icon{
        width: 23vw;
    }
    th{
        padding: 5px;
    }
    section{
        font-size: 2.7vw;
    }
    .back{
        right: 0vw;
        height: 30vw;
        position: absolute;
    }
    .footer-container li{
        font-size: 3.2vw;
    }
    .contacts ul{
        font-size: 3vw;
    }
    .footer-container li{
        display:initial;
    }
    .contact-info{
        margin-right: -3vw;
        margin-left: -3vw;
    }
    .footer-container{
        flex-direction: column;
        justify-content:center;
        margin-left: 0;
        margin-right: 0;
    }
    .footer-container li{
        text-align: center;
        display: block;
        margin-bottom: 10vw;
        font-size: 5vw;
    }
    .footer-container a:first-child{
        margin-top:10vw;
    } 
    a.header-element{
        font-size: 0.8em;
    }
    .small-container{
        width: 90%;
    }
    .footer-container a:last-child{
        margin-bottom:10vw;
    } 
    footer{
        margin-top: 0vw;
        height: 80px;
    }
    .support-section{
        margin-right:auto;
        margin-left: auto;
        width: 90%;
        border: 3px solid rgb(37, 185, 166);
    }
    .small-conteiner{
        width: 90%;
        align-items: center;
    }
    h2.why.why-2{
        width: 100%;
    }
}
@media only screen and (max-width: 700px) {
    #just-dna-seq::before{
        content: url(./images/mini_logo_small.png);
        right: -50px;
        top: 0px;
    }
}
@media only screen and (max-width: 600px) {
    .block{
        margin-left: -60px;
    }
    #just-dna-seq::before{
        right: -60px;
        top: -10px;
    }
}
@media only screen and (max-width: 400px) {
    #just-dna-seq::before{
        top: -10px;
        right: -70px;
    }
    .block{
        margin-left: -40px;
    }
}