@import url(fonts.css);

:root {
    --dark-blue: #050a30;
    --light-dark-blue: #102a4e; 
    --light-blue: #3aa9c5;
    --color-white: #e9e9eb;
    --yellow: #ffc973;
    --red: #ef4b4c;
  }
  
* {
    margin: 0;
    padding: 0;
}

body{
    background-color: #050a30;
    color: #e9e9eb;
    font-family: 'Glacial Indifference';
}


.bg-image-1{
    color: #e9e9eb;
    padding-top: 5em;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 0;
    background-image: url(https://static.igem.wiki/teams/4294/wiki/description/description-page-bg.gif);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: cover;
    text-align: center;
    justify-content: center;
}

/* Inspirarion */
.container_1{
    background: #102a4e;
    padding: 50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    width: 100%;
    transform: translate(0%, 0%);
}

.container_1 h1{
    font-family: 'Glacial Indifference Bold';
    font-size: 48px;
    text-align: center;
}

.container_1 p{
    font-size: 25px;
    text-align: justify;
}

.network_img{
    float: left;
    height: 290px;
    width: 300px;
    padding: 1px 20px 10px 1px;
}

.bg-image-2{
    color: #e9e9eb;
    padding-top: 0;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 5em;
    background-image: url(https://static.igem.wiki/teams/4294/wiki/description/description-page-bg.gif);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: cover;
    text-align: center;
    justify-content: center;
}


/* Antidaneio */
.container_2{
    background: #102a4e;
    padding: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    width: 100%;
    transform: translate(0%, 0%);
}

.container_2 p{
    font-size: 25px;
    text-align: justify;
}

.antidaneio_img{
    float: center;
    padding: 0;
    width: 73%;
}

/* <!-- Perceptron --> */

.bg-image-3{
    color: #e9e9eb;
    padding-top: 5em;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 3em;
    background-image: url(https://static.igem.wiki/teams/4294/wiki/description/description-page-bg.gif);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: cover;
    text-align: center;
    justify-content: center;
}

.container_3{
    background: #102a4e;
    padding: 50px;
    border-radius: 50px;
    width: 100%;
    transform: translate(0%, -10%);
}

.container_3 h1{
    font-family: 'Glacial Indifference Bold';
    font-size: 48px;
    text-align: center;
}

.container_3 p{
    font-size: 25px;
    text-align: justify;
}

.perceptron_gif{
    float: right;
    width: 55%;
    padding-top: 5em;
    padding-bottom: 5em;
}

/* <!-- Quorum Sensing --> */

.bg-image-4{
    color: #e9e9eb;
    padding-top: 5em;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 3em;
    background-image: url(https://static.igem.wiki/teams/4294/wiki/description/description-page-bg.gif);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: cover;
    text-align: center;
    justify-content: center;
}

.container_4{
    background: #102a4e;
    padding: 50px;
    border-radius: 50px;
    width: 100%;
    transform: translate(0%, 0%);
}

.container_4 h1{
    font-family: 'Glacial Indifference Bold';
    font-size: 48px;
    text-align: center;
}

.container_4 p{
    font-size: 25px;
    text-align: justify;
}

.quorum_sensing_gif{
    float: center;
    width: 70%;
}


/* Our Project */
.bg-image-5{
    color: #e9e9eb;
    padding-top: 5em;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 0;
    background-image: url(https://static.igem.wiki/teams/4294/wiki/description/description-page-bg.gif);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: cover;
    text-align: center;
    justify-content: center;
}


.container_5{
    background: #102a4e;
    padding: 50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    width: 100%;
    transform: translate(0%, 0%);
}

.container_5 h1{
    font-family: 'Glacial Indifference Bold';
    font-size: 48px;
    text-align: center;
}

.container_5 p{
    font-size: 25px;
    text-align: justify;
}

.project_img{
    float: left;
    width: 55%;
    padding-top: 2em;
    padding-bottom: 5em;
}

.bg-image-6{
    color: #e9e9eb;
    padding-top: 0;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 0;
    background-image: url(https://static.igem.wiki/teams/4294/wiki/description/description-page-bg.gif);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: cover;
    text-align: center;
    justify-content: center;
}


.anchorOffset {
    display: block !important;
    position: relative !important;
    top: -100px !important;
    visibility: hidden !important;
  }

.buttons{
    align-items:flex-end;
    margin-left: 0px;
    margin-right: 0em;
    padding-top: 50px;
    display: flex;
    justify-content: space-around;
    background-color:#102a4e;
}

.button {
    width: 25%;
    text-align: center;
    cursor: pointer;
    background-color: #050a30;
    border-radius: 100px;
    border: solid 5px #e9e9eb;
    font-size: 25px;
    font-family: 'Glacial Indifference Bold';
    transition: all ease .3s;
  }

.button a {
    font-size: 35px;
    color: #e9e9eb;
    font-size: 1.375em;
    cursor: pointer;
    display: block;
    padding: 1em 0;
    transition: all 0.3s;  
}

.button a:hover{
    font-family: 'Glacial Indifference Bold';
    font-size: 35px;
    color: #102a4e;
}

.button:hover{
    background: url(https://static.igem.wiki/teams/4294/wiki/wet-lab/wet-bg-darker.gif);
    background-size: cover;
    background-repeat: no-repeat;
    transform: translate(0, -10px);
    box-shadow: 5px 5px  #61b872;
    border: 0px;
}

.container_6{
    background: #102a4e;
    padding: 50px;
    width: 100%;
    transform: translate(0%, 0%);
}

.container_6 p{
    font-size: 25px;
    text-align: justify;
}

.table_img{
    float: right;
    padding: 0;
    width: 52%;
    padding-left: 3em;
    padding-top: 1em;
}

.bg-image-7{
    color: #e9e9eb;
    padding-top: 0;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 0;
    background-image: url(https://static.igem.wiki/teams/4294/wiki/description/description-page-bg.gif);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: cover;
    text-align: center;
    justify-content: center;
}

.container_7{
    background: #102a4e;
    padding: 50px;
    width: 100%;
    transform: translate(0%, 0%);
}

.container_7 p{
    font-size: 25px;
    text-align: justify;
}

.pattern_1_img{
    width: 20%;
     border-radius: 20px;
}

.bg-image-8{
    color: #e9e9eb;
    padding-top: 0;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 0;
    background-image: url(https://static.igem.wiki/teams/4294/wiki/description/description-page-bg.gif);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: cover;
    text-align: center;
    justify-content: center;
}

.container_8{
    background: #102a4e;
    padding: 50px;
    width: 100%;
    transform: translate(0%, 0%);
}

.container_8 p{
    font-size: 25px;
    text-align: justify;
}
.pattern_2_img{
    width: 20%;
    float: right;
    padding: 50px;
}

.table_img{
    float: right;
    padding: 0;
    width: 52%;
    padding-left: 3em;
    padding-top: 1em;
}

.bg-image-9{
    color: #e9e9eb;
    padding-top: 0;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 5em0;
    background-image: url(https://static.igem.wiki/teams/4294/wiki/description/description-page-bg.gif);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: cover;
    text-align: center;
    justify-content: center;
}

.container_9{
    background: #102a4e;
    padding: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    width: 100%;
    transform: translate(0%, 0%);
}

.container_9 p{
    font-size: 25px;
    text-align: justify;
}

.perspectives_img{
    float: center;
    padding: 0;
    width: 40%;
}

.cc{
    width: 100%;
    height:100%;
    outline:none;
    padding-right: 0em;
    padding-left: 2em;
    display:flex;
    flex-wrap: wrap;
    padding-top:3em;
    padding-bottom: 0;
    margin-right: auto;
    margin-left: auto;
    background-color:#102a4e;
    }
    
    .left-side{
        color:var(--color-white);
        margin-left: 0em;
        padding-right: 1em;
        padding-left: 0em;
        padding-bottom: 1em;
        width: 15%;
        font-size:25px;
        justify-items: center;
    }
    
    .left-side h2{
        text-align: center;
    }
    
    .right-side{
        color:var(--color-white);
        margin-left: 0em;
        padding-right: 0px;
        padding-left: 1em;
        width:80%;
        align-content: center;
    }
    
    
    .index-bar{
        position: -webkit-sticky;
        position: sticky;
        padding-bottom: 0px;
        margin-top: 1em;
        top:150px;
        bottom:200px;
        justify-content: center;
    }
    
    .lateral-index{
        background-color: var(--dark-blue);
        transition: all 0.2s ease;
        list-style-type: none;
        display:inline-block;
        border-radius: 0.4em !important;
        margin-left: 0;
        padding: 1em 1em 1em 2.6em !important;
        margin-top:1em;
        justify-content: center;
    }
    
    .index-bar ul li {
        padding-bottom: 1em;
        padding-top:0em;
        position: relative;
      }
    
    
    /* navigation bar text decoration */    
    .index-bar ul li a {
        /*display: flex; */ 
        font-size: 25px;
        color: var(--color-white);
        text-decoration: none;
        padding-bottom: 10px;
        transition: all 0.3s;  
      }
      
    .index-bar ul li a:hover {
        color: var(--yellow);
      }
    
    /* this the after effect with the yellow line */
    
    .index-bar ul li a::after {
        content: '';
        width: 0%;
        height: 2px;
        background-color: #ffc973;
        display: block;
        margin: auto;
        transition: 0.5s;
      }
        
    .index-bar ul li a:hover::after {
        width: 0%;
        }
    
    
    .anchorOffset {
        display: block !important;
        position: relative !important;
        top: -100px !important;
        visibility: hidden !important;
      }


    
.collapsible{
    padding-top:30px;
    transform: translate(0%, 0%);
}


.coll-up{
    display:flex;
}


.collapsible label {
    padding:20px 20px;
    position:relative;
    z-index:1;
    font-weight:600;
    padding:20px 20px;
    text-align: left;
    transition: all 0.5s linear;
    background-color:#050a30;
    border-radius:20px;
    display:flex;
    position:relative;
    color:#e9e9eb;
    cursor:pointer;
    font-size: 30px;
}

.collapsible img{
    position:relative;
    
}


.collapsible label:hover{
    color:var(--yellow);
}

.collapsible-content{
    overflow:hidden;
    max-height:0px;
    padding-bottom:25px;
    overflow:hidden;
    top:-100%;
    opacity:0;
    transition: max-height 0.5s ease-out;
    transition: all 0.5s ease;
    font-size:20px;
}

.collapsible input{
    display:none;
}

.collapsible input:checked ~ .collapsible-content{
    max-height:3000px;
    padding:15px;
    border-radius: 20px;
    background-color:#102a4e;
    opacity:1;
    text-align: left;
    top:0;
}

.collapsible-content cite a {
     padding: 10px 10px;
     color:#e9e9eb;
     display:block;
}

@media(max-width: 600px) {
    .cc{
        padding-right: 0em;
        padding-left: 0em;
        padding-top: 0em;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
    }

    .left-side {
        opacity: 0;
    }

    .right-side{
        padding-left: 0em;
        width: 100%;
    }

    .bg-image-1{
        padding-top: 1.5em;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 0;
    }

    .container_1{
        padding: 15px;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
    }
    
    .container_1 h1{
        font-size: 30px;
    }
    
    .container_1 p{
        font-size: 14px;
    }

    .bg-image-2{
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 1.5em;
    }
    
    .container_2{
        padding: 15px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    
    .container_2 p{
        font-size: 14px;
    }
    
    .antidaneio_img{
        float: center;
        padding: 0;
        width: 100%;
    }

    .bg-image-3{
        padding-top: 5em;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 0;
    }
    
    .container_3{
        padding: 15px;
        border-radius: 50px;
        transform: translate(0%, -10%);
    }
    
    .container_3 h1{
        font-size: 30px;
        text-align: center;
    }
    
    .container_3 p{
        font-size: 14px;
    }
    
    .perceptron_gif{
        float: none;
        width: 100%;
        padding-top: 0em;
        padding-bottom: 2em;
    }

    .bg-image-4{
        padding-top: 0em;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 0;
    }
    
    .container_4{
        padding: 15px;
        border-radius: 50px;
    }
    
    .container_4 h1{
        font-size: 30px;
    }
    
    .container_4 p{
        font-size: 14px;
    }
    
    .quorum_sensing_gif{
        float: center;
        width: 100%;
    }

    .bg-image-5{
        padding-top: 1.5em;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 0;
    }
    
    
    .container_5{
        padding: 15px;
    }
    
    .container_5 h1{
        font-size: 30px;
    }
    
    .container_5 p{
        font-size: 14px;
    }
    
    .project_img{
        float: none;
        width: 100%;
        padding-top: 0em;
        padding-bottom: 2em;
    }

    .button {
        width: 45%;
        font-size: 20px;
      }

    .button a:hover{
        font-size: 25px;
    }

    .bg-image-6{
        padding-top: 0;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 0;
    }
    
    .container_6{
        padding: 15px;
    }
    
    .container_6 p{
        font-size: 14px;
    }
    
    .table_img{
        float: none;
        width: 100%;
        padding-left: 0em;
        padding-top: 1em;
    }

    .bg-image-7{
        padding-top: 0;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 0;
    }
    
    .container_7{
        padding: 15px;
    }
    
    .container_7 p{
        font-size: 14px;
    }
    
    .pattern_1_img{
        width: 50%;
    }

    .bg-image-8{
        padding-top: 0;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 0;
    }
    
    .container_8{
        padding: 15px;
    }
    
    .container_8 p{
        font-size: 14px;
    }
    .pattern_2_img{
        width: 100%;
        float: none;
        padding: 25px;
    }
    
    .bg-image-9{
        padding-top: 0;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 5em;
    }
    
    .container_9{
        padding: 15px;
    }
    
    .container_9 p{
        font-size: 14px;
    }
    
    .perspectives_img{
        float: center;
        padding: 0;
        width: 100%;
    }
}