body{
    margin: 0;
    overflow-x: hidden;
    background-color: #f4efd1;
    border: 0;
    box-sizing: border-box;
}

section{
    font-size: 1.5rem;
}

menu{
    position: absolute;
    left: 5%;
    top: 0;
    bottom: 0;
}

section{
    min-height: 73.125rem;
    display: flex;
    box-sizing: border-box;
    position: relative;
    height: max-content;
}
@media(max-width: 767px) and (orientation: portrait){
    section{
        height: 220rem;
        font-size: 4rem;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    section{
        height: 150rem;
        font-size: 3rem;
    }
}
#heading{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/home-page-tiny.png");
    background-position: top;
    background-size: cover;
    text-align: center;
    justify-content: center;
    height: 56.25rem;
}

#circle1{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/circle-tiny.png");
    background-position: center;
    background-size: cover;
    text-align: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 20vw;
    height: 20vw;
    opacity: 50%;
}
@media(max-width: 767px) and (orientation: portrait){
    #circle1{
    width: 40vw;
    height: 40vw;   
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #circle1{
    width: 30vw;
    height: 30vw;   
}
}
#rester{
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    left: 0;
    right: 0;
    position: absolute;
    margin-top: 13.625rem;

}
@media(max-width: 767px){
    #heading{
        height: 215.3061rem;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
    #heading{
        height: 143.9024rem;
    }
}
@media(max-width: 767px){
    #logo{
        top: 70rem;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
    #logo{
        top: 65rem;
    }
}
#logo{
    opacity: 60%;
    max-width: 100%;
    max-height: 100%;
}
@media(max-width: 767px){
    #logo{
        margin-top: 60rem;
    }
}


.health_words{
    width: 40rem;
    background-color: #598364;
    color: white;
    font-weight: 200;
    opacity: 0.7;
    padding: 2rem;
}
#health_words1{
    margin-left: 8rem;
    margin-top: 1.6875rem;
    position: absolute;
    border-radius: 1rem 2rem 1rem 2rem;
}
#health_words2{
    margin-left: 40rem;
    margin-top: 20.8125rem;
    position: absolute;
    border-radius: 2rem 1rem 2rem 1rem;
}
#health_words3{
    margin-left: 20rem;
    margin-top: 40.125rem;
    position: absolute;
    border-radius: 1rem 2rem 1rem 2rem;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
    #data{
        height: 150rem;
        padding: 1rem;
    }
    #health_words1{
        left: -5rem;
        top: 5rem;
        width: 70rem;
        padding: 4rem;
    }
    #health_words2{
        left: -32rem;
        top: 15rem;
        width: 65rem;
        padding: 4rem;
    }
    #health_words3{
        left: -18rem;
        top: 20rem;
        width: 70rem;  
        padding: 4rem;      
    }
}

@media (max-width: 767px) and (orientation: portrait){
    #data{
        height: 220rem;
    }
    #health_words1{
        left: 3rem;
        top: 10rem;
        width: 80rem;
        padding: 8rem;
    }
    #health_words2{
        left: -30rem;
        top: 40rem;
        width: 80rem;
        padding: 8rem;
    }
    #health_words3{
        left: -5rem;
        top: 59rem;
        width: 80rem;  
        padding: 8rem;      
    }
}

#masks{
    background-color: #598364;
    height: 56.25rem;
}

#mask1{
    top: 13.8125rem;
    display: block;
    position: absolute;
    width: 60.25rem;
}
#mask2{
    position: absolute;
    display: block;
    color: white;
    top: 5rem;
    left: 5rem;
    width: 30rem;
}
#mask3{
    position: absolute;
    display: block;
    color: white;
    top: 8rem;
    max-width: 26.042rem;
    right: 20rem;
    width: 30rem;
}
#mask4{
    position: absolute;
    display: block;
    color: white;
    top: 33.0625rem;
    max-width: 26.042rem;
    right: 12rem;
    width: 30rem;
}

@media(max-width: 767px) and (orientation: portrait){
    #masks{
        height: 220rem;
    }
    #mask1{
        top: 4.5rem;
        display: flex;
        width: 60rem;
        left: 16rem;
        min-width: auto;
    }
    #mask2{
        display: block;
        color: white;
        top: 42.625rem;
        width: 80rem;
        left: 10rem;
    }
    #mask3{
    position: absolute;
    display: block;
    color: white;
    top: 42.625rem;
    max-width: 26.0417rem;
    right: 22rem;
    width: 70rem;
}
#mask4{
    position: absolute;
    display: block;
    color: white;
    top: 125.375rem;
    max-width: 60.0417rem;
    right: 22rem;
    width: 80rem;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
    #masks{
        height: 150rem;
    }
    #mask1{
        top: 33rem;
        display: flex;
        width: 42rem;
        left: 16rem;
        min-width: auto;
    }
    #mask2{
        display: block;
        color: white;
        top: 10.625rem;
        width:60rem;
        left: 10rem;
    }
    #mask3{
    position: absolute;
    display: block;
    color: white;
    top: 70.625rem;
    left: 7rem;
    
    width: 52rem;
}
#mask4{
    position: absolute;
    display: block;
    color: white;
    top: 68.375rem;
    max-width: 60.0417rem;
    right: 12rem;
    width: 30rem;
}
}
#routes{
    color: black;
    font-size: 3rem;
    min-height: 50rem;
}

#route1{
    width: 100rem;
    height: 50rem;
    background-image: url("https://static.igem.wiki/teams/4162/wiki/index/index/vc-background-tiny.png");
    background-position: center;
    background-size: cover;
    align-content: center;
    justify-content: center;
    position: absolute;
}
#route_word1{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 11.25rem;
    margin-right: 1.8229rem;
    margin-left: 1.8229rem;
    opacity: 70%;
}
#route_word2{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 22.25rem;
    margin-right: 1.8229rem;
    margin-left: 1.8229rem;
    opacity: 70%;
}
#route_word3{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 33.25rem;
    margin-right: 1.8229rem;
    margin-left: 1.8229rem;
    opacity: 70%;
    
}
.route_word p{
    text-align: center;
}
#route_word1{
    font-size: 6rem;
    font-weight: 800;
}
#route_word2{
    font-size: 4rem;
    font-weight: 600;
}
#route_word3{
    font-size: 6rem;
    font-weight: 800;
}
@media(max-width: 767px) and (orientation: portrait){
    #routes{
        height: 220rem;
    }
    #route1{
        height: 220rem;
        justify-content: center;
        align-items: center;
    }
    #route_word1 p{
        font-size: 15rem;
        font-weight: 600;
    }
    #route_word2 p{
        font-size: 7rem;
        font-weight: 400;
    }
    #route_word3 p{
        font-size: 15rem;
        font-weight: 600;
    }
#route_word1{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 25vh;
    margin-right: 1.8229rem;
    margin-left: 1.8229rem;
    opacity: 70%;
}
#route_word2{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 35vh;
    margin-top: 10rem;
    margin-right: 1.8229rem;
    margin-left: 1.8229rem;
    opacity: 70%;
}
#route_word3{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 55vh;
    margin-right: 1.8229rem;
    margin-left: 1.8229rem;
    opacity: 70%;
    
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
    #routes{
        height: 150rem;
        margin: 0;
    }
    #route1{
        height: 150rem;
        justify-content: center;
        align-items: center;
    }
    #route_word1 p{
        font-size: 15rem;
        font-weight: 600;
    }
    #route_word2 p{
        font-size: 7rem;
        font-weight: 400;
    }
    #route_word3 p{
        font-size: 15rem;
        font-weight: 600;
    }
#route_word1{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 25vh;
    margin-right: 0;
    margin-left: 0;
    opacity: 70%;
}
#route_word2{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 35vh;
    margin-top: 10rem;
    margin-right: 0;
    margin-left: 0;
    opacity: 70%;
}
#route_word3{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 55vh;
    margin-right: 0;
    margin-left: 0;
    opacity: 70%;
    
}
.route_word{
    width: 90rem;
    margin-left: 5rem;
}
}
.reasons_word{
    background-color: #598364;
    color: white;
    font-weight: 200;
    opacity: 0.7;
}
#reasons1{
    top: 9.3125rem;
    left: 5rem;
    position: absolute;
}
#reasons1 .reasons_word{
    left: 10rem;
    width: 40rem;
    padding: 2rem;
    border-radius: 3rem 1rem 3rem 1rem;
}
#reasons2{
    width: 30rem;
    min-width: 20.8333333rem;
    position: absolute;
    top: 28.8125rem;
    left: 5rem;
}
#reasons3{
    top: 38.625rem;
    left: 48rem;
    position: absolute;
}
#reasons3 .reasons_word{
    width: 40rem;
    padding: 1rem;
    border-radius: 1rem 3rem 1rem 3rem;
}
#reasons4{
    width: 40rem;
    min-width: 20.833333rem;
    position: absolute;
    top:2rem;
    left: 47rem;

}

@media(max-width: 767px) and (orientation: portrait){
    .reasons_word p{
        padding: 4rem;
    }
    #reasons1{
        top: 10rem;
        left: 6rem;
        position: absolute;
    }
    #reasons1 .reasons_word{
        margin-top: 5%;
        width: 90vw;
    }
    #reasons2{
        width: 60vw;
        min-width: auto;
        position: absolute;
        top: 51.9385rem;
        left: 5rem;
    }
    #reasons3{
        
        left: 6rem;
        top: 115.8462rem;
    }
    #reasons3 .reasons_word{
        width: 90rem;
    }
    #reasons4{
        width: 80rem;
        min-width: auto;
        position: absolute;
        top: 130.4872rem;
        left: 10rem;

    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .reasons_word{
        padding: 2rem;
    }
    #reasons1{
        top: 13rem;
        left: 3rem;
        position: absolute;
    }
    #reasons1 .reasons_word{
        width: 40rem;
    }
    #reasons2{
        width: 30rem;
        min-width: auto;
        position: absolute;
        top: 70.9385rem;
        left: 5rem;
    }
    #reasons3{
        
        left: 40rem;
        top: 77.625rem;
    }
    #reasons3 .reasons_word{
        width: 32rem;
    }
    #reasons4{
        width: 40rem;
        min-width: auto;
        position: absolute;
        top: 40.4872rem;
        left: 47rem;

    }
}
.women_men_word{
    background-color: #598364;
    color: white;
    font-weight: 200;
    opacity: 0.7;
}
#women_men1{
    top: 28.9231rem;
    left: 7rem;
    position: absolute;

}
#women_men2{
    width: 30vw;
    min-width: 20.8333333rem;
    position: absolute;
    top: 7rem;
    left: 15rem;
}
#women_men1 .women_men_word{
    padding: 2rem;
    width: 30vw;
    border-radius: 1rem 3rem 1rem 3rem;
}
#women_men3{
    width: 50rem;
    min-width: 20.83333rem;
    position: absolute;
    top: 23.625rem;
    left: 50rem;
    max-width: 29.6875rem;
}
#women_men4{
    top: 8rem;
    left: 47rem;
    width: 50rem;
    position: absolute;
}
#women_men4 .women_men_word{
    padding: 2rem;
    border-radius: 1rem 3rem 1rem 3rem;
}
#women_men5{
    top: 48.6875rem;
    left: 44rem;
    position: absolute;
}
#women_men5 .women_men_word{
    width: 35rem;
    padding: 2rem;
    border-radius: 3rem 1rem 3rem 1rem;
}

@media(max-width: 767px) and (orientation: portrait){
    .women_men_word{
        padding: 8rem;
    }
    .women_men_word p{
        padding: 8rem;
    }
    #women_men1{
        top: 8.3282rem;
        left: 8rem;
    }
    #women_men1 .women_men_word{
        width: 70rem;
        border-radius: 2rem 3rem 2rem 3rem;
    }

    #women_men2{
        width: 60rem;
        min-width: auto;
        position: absolute;
        top: 51.9385rem;
        left: 5rem;
    }
    #women_men3{
        width: 70rem;
        left: 20rem;
        top: 150.3077rem;
        min-width: auto;
        max-width: 200rem;
    }
    #women_men4{
        width: 90rem;
        position: absolute;
        top: 100.0564rem;
        left: 6rem;

    }
    #women_men4 .women_men_word{
        border-radius: 3rem 2rem 3rem 2rem;
    }
    #women_men5{
        left: 5rem;
        top: 138.5026rem;
    }
    #women_men5 .women_men_word{
        width: 90rem;
        border-radius: 3rem 2rem 3rem 2rem;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .women_men_word{
        padding: 4rem;
    }
    .women_men_word p{
        padding: 4rem;
    }
    #women_men1{
        top: 35.3282rem;
        left: 7rem;
    }
    #women_men1 .women_men_word{
        width: 37rem;
        border-radius: 2rem 3rem 2rem 3rem;
    }

    #women_men2{
        width: 30rem;
        min-width: auto;
        position: absolute;
        top: 6rem;
        left: 8rem;
    }
    #women_men3{
        width: 45rem;
        left: 43rem;
        top: 8rem;
        min-width: auto;
        max-width: 200rem;
    }
    #women_men4{
        width: 50rem;
        position: absolute;
        top: 38rem;
        left: 47rem;

    }
    #women_men4 .women_men_word{
        border-radius: 3rem 2rem 3rem 2rem;
    }
    #women_men5{
        left: 50rem;
        top: 96.5026rem;
    }
    #women_men5 .women_men_word{
        width: 42rem;
        border-radius: 3rem 2rem 3rem 2rem;
    }
}
#ideas{
    min-height: 60.125rem;
}
.ideas_word{
    background-color: #598364;
    color: white;
    font-weight: 200;
    opacity: 0.7;
}
#ideas1{
    width: 30rem;
    min-width: 20.833333rem;
    position: absolute;
    top: 7.8125rem;
    left: 11rem;
}
#ideas2{
    top: 36.875rem;
    left: 11rem;
    position: absolute;
}
#ideas2 .ideas_word{
    width: 33rem;
    padding: 2rem;
    border-radius: 1rem 3rem 1rem 3rem;
}
#ideas3{
    width: 40rem;
    min-width: 20.83333333rem;
    position: absolute;
    top: 34.5rem;
    left: 56rem;
    max-width: 29.6875rem;
}
#ideas4{
    top: 12.8125rem;
    right: 20rem;
    position: absolute;
}
#ideas4 .ideas_word{
    padding: 2rem;
    width: 27rem;
    border-radius: 3rem 2rem 3rem 2rem;
}
@media(max-width: 767px) and (orientation: portrait){
    .ideas_word{
        padding: 8rem;
    }
    #ideas1{
        top: 6.4923rem;
        left: 15rem;
        min-width: auto;
        width: 70rem;
    }
    #ideas2{
        width: 70rem;
        position: absolute;
        top: 54.2821rem;
        left: 17rem;
    }
    #ideas2 .ideas_word{
        width: 60rem;
        border-radius: 4rem 2rem 4rem 2rem;
    }
    #ideas3{
        left: 5rem;
        top: 92.8462rem;
        min-width: auto;
        max-width: 200rem;
        width: 75rem;
    }
    #ideas4{
        position: absolute;
        top: 150.9487rem;
        left: 10rem;

    }
    #ideas4 .ideas_word{
        width: 70rem;
        border-radius: 2rem 4rem 2rem 4rem;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .ideas_word{
        padding: 4rem;
    }    
    #ideas1{
        top: 15.4923rem;
        left: 17rem;
        min-width: auto;
        width: 30rem;
    }
    #ideas2{
        position: absolute;
        top: 36.2821rem;
        left: 15rem;
    }
    #ideas2 .ideas_word{
        width: 60rem;
        border-radius: 4rem 2rem 4rem 2rem;
    }
    #ideas3{
        left: 18rem;
        top: 52.5rem;
        min-width: auto;
        max-width: 200rem;
        width: 40rem;
    }
    #ideas4{
        position: absolute;
        top: 84rem;
        right: 10rem;

    }
    #ideas4 .ideas_word{
        width: 60rem;
        border-radius: 2rem 4rem 2rem 4rem;
    }
}
#pictures{
    background-color: #fcf6e6;
}
#conclusion{
    top: 2.8125rem;
    width: 70rem;
    color: #598364;
    margin-bottom: 1.5rem;
    opacity: 0.7;
    padding-top: 3.5rem;
}
@media(max-width: 767px) and (orientation: portrait){
    #conclusion{
        width: 85rem;
    }
}

#pictures{
    height: fit-content;
}
#ribozyme{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/ribozyme2500.jpg");
    background-position: center;
    background-size: contain;
    max-width: 100%;
    max-height: 100%;
    height: 33.75rem;
    background-repeat: no-repeat;
}

#tears{
    background-image: url("https://static.igem.wiki/teams/4162/wiki/tears2500.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 33.75rem;
}
@media (max-width: 767px) and (orientation: portrait){
    #ribozyme,
    #tears{
        height: 64.9231rem;
    }
}
#menues{
    height: fit-content;
    min-height: 0rem;
}
@media (max-width: 767px) and (orientation: portrait){
    #menus .iconsforindex{
        min-width: 30rem;
    }
    footer{
    font-size: 4rem;
}  
}
.iconsforindex{
    margin-top: 3rem;
}