@import url("fonts.css");

*{
    margin: 0;
    padding: 0;
    font-family: 'Glacial Indifference';
    box-sizing: border-box;
}

.backup_dark{
    width: 100%;
    background: #050a30;
    color: #e9e9eb;
    padding: 2%;
}

.backup_light{
    width: 100%;
    background: #102a4e;
    color: #e9e9eb;
    padding: 2%;
}

.supergif{
    padding-top: 90px;
    position: relative;
    text-align: center;
    background-color: #102a4e;

}

.biology_to_cs{
    width: 100%;
    font-size: 0;
}

.what-section{
    width: 100%;
    background-position: center;
    background-color: #050a30;
    text-align: center;
    font-size: 35px;
    padding-top: 100px;
    padding-left: 100px;
    padding-right: 50px;
    padding-bottom: 200px;
}

.what-img{
    width: 35%;
    float: right;
}

.text-box-what{
    background-color: #102a4e;
    color: #e9e9eb;
    border-radius: 50px;
    width: 55%;
    text-align: justify;
    transition: .3s;
}

.text-box-what:hover{
    transform: translate(0, -20px);
}

.text-box-what p{
    font-size: 36px;
    padding: 3%;
}


.aim-section{
    width: 100%;
    background-position: center;
    background-color: #102a4e;
    text-align: center; 
    font-size: 35px;
    /* This padding meshes up the footer */
    padding-top: 100px;
    /*padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 100px; */
    position: relative;
}

.aim-img{
    width: 35%;
    float: left;
    position: relative;
}

.text-box-aim{
    background-color: #050a30;
    color: #e9e9eb;
    border-radius: 50px;
    width: 44%;
    text-align: justify;
    float: right;
    translate: -25% 5%;
    transition: .3s;
}

.text-box-aim:hover{
    transform: translate(0, -20px);
}

.text-box-aim p{
    font-size: 40px;
    padding: 4%;
    color: #e9e9eb;
}

.blibli-img{
    width: 40%;
}


/* Triple Section */


.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 7%;
}

/* WET LAB */

.box-wet{
    width: 500px;
    height: 500px;
    background-color: #102a4e;
    border-radius: 70px;
    box-sizing: border-box;
    overflow: hidden;
    transition: .3s;
    text-align: center;
    justify-content: center;
    transition: .3s;
}

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

.triple_logos_wet{
    width: 100px;
    height: 100px;
    background: #050a30;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20% auto;
    transition: .3s;
}

.box-wet:hover .triple_logos_wet{
    width: 100px;
    height: 100px;
    background: #61b872;
    box-shadow: 0 0 0 50px#61b872;
}

.triple_logos_wet .non-hover-img-wet{
    width: 100px;
    padding-top: 15%;
    transition: .3s;
}

.hover-img-wet{
    display: none;
    transition: .3s;
}

.box-wet:hover .non-hover-img-wet{
    display: none;
}

.box-wet:hover .hover-img-wet{
    display: initial;
    width: 200px;
    padding-top: 15%;
}

.box-wet h1{
    font-size: 60px;
    font-family: 'Glacial Indifference Bold';
    transition: .3s;
}

.box-wet:hover h1{
    font-size: 70px;
    color: #050a30;
    font-family: 'Glacial Indifference Bold';
}



.box-dry{
    width: 500px;
    height: 500px;
    background-color: #102a4e;
    border-radius: 70px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    transition: .3s;
}

.box-dry:hover{
    background: url(https://static.igem.wiki/teams/4294/wiki/model-page-images/dry-notebook-header.gif);
    transform: translate(0, -10px);
    box-shadow: 5px 5px  #3aa9c5;
}

.triple_logos_dry{
    width: 100px;
    height: 100px;
    background: #050a30;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20% auto;
    transition: .3s;
}

.box-dry:hover .triple_logos_dry{
    width: 100px;
    height: 100px;
    background: #3aa9c5;
    box-shadow: 0 0 0 50px#3aa9c5;
}

.triple_logos_dry .non-hover-img-dry{
    width: 100px;
    padding-top: 1%;
    transition: .3s;
}

.hover-img-dry{
    display: none;
    transition: .3s;
}

.box-dry:hover .non-hover-img-dry{
    display: none;
}

.box-dry:hover .hover-img-dry{
    translate: 0% -5%;
    display: initial;
    width: 200px;
    padding-top: 15%;
}

.box-dry h1{
    font-size: 60px;
    font-family: 'Glacial Indifference Bold';
    transition: .3s;
}

.box-dry:hover h1{
    font-size: 70px;
    color: #e9e9eb;
    font-family: 'Glacial Indifference Bold';
}


.box-hp{
    width: 500px;
    height: 500px;
    background-color: #102a4e;
    border-radius: 70px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    transition: .3s;
}

.box-hp:hover{
    background: url(https://static.igem.wiki/teams/4294/wiki/human-practices/hp-bg.gif);
    background-size: cover;
    background-repeat: repeat-y;
    transform: translate(0, -10px);
    box-shadow: 5px 5px  #ef4b4c;
}


.triple_logos_hp{
    width: 100px;
    height: 100px;
    background: #050a30;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20% auto;
    transition: .3s;
}

.box-hp:hover .triple_logos_hp{
    width: 100px;
    height: 100px;
    background: #ef4b4c;
    box-shadow: 0 0 0 50px#ef4b4c;
}

.triple_logos_hp .non-hover-img-hp{
    width: 100px;
    padding-top: 1%;
    transition: .3s;
}

.hover-img-hp{
    display: none;
    transition: .3s;
}

.box-hp:hover .non-hover-img-hp{
    display: none;
}

.box-hp:hover .hover-img-hp{
    display: initial;
    width: 200px;
    padding-top: 15%;
}

.box-hp h1{
    font-size: 65px;
    font-family: 'Glacial Indifference Bold';
    transition: .3s;
}

.box-hp:hover h1{
    font-size: 70px;
    color: #102a4e;
    font-family: 'Glacial Indifference Bold';
}

@media(max-width: 1500px){
    
    .text-box-what{
        border-radius: 32px;
    }

    .text-box-what p {
        font-size: 32px;
    }

    .text-box-aim p{
        font-size: 32px;
    }

    .container{
        padding: 5%;
    }

    .box-wet{
        width: 350px;
        height: 350px;
        border-radius: 70px;
        margin: 1% auto;
    }
    
    .box-wet:hover{
        box-shadow: 5px 5px #61b872;
    }
    
    .triple_logos_wet{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-wet:hover .triple_logos_wet{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#61b872;
    }
    
    .box-wet:hover .hover-img-wet{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-wet h1{
        font-size: 30px;
    }
    
    .box-wet:hover h1{
        font-size: 35px;
    }
    
    .box-dry{
        width: 350px;
        height: 350px;
        border-radius: 70px;
        margin: 1% auto;
    }
    
    .box-dry:hover{
        box-shadow: 5px 5px  #3aa9c5;
    }
    
    .triple_logos_dry{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-dry:hover .triple_logos_dry{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#3aa9c5;
    }
    
    .triple_logos_dry .non-hover-img-dry{
        width: 100px;
        padding-top: 1%;
    }
    
    .box-dry:hover .hover-img-dry{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-dry h1{
        font-size: 30px;
    }
    
    .box-dry:hover h1{
        font-size: 35px;
    }

    .box-hp{
        width: 350px;
        height: 350px;
        border-radius: 70px;
        margin: 1% auto;
    }
    
    .box-hp:hover{
        box-shadow: 5px 5px  #ef4b4c;
    }
    
    .triple_logos_hp{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-hp:hover .triple_logos_hp{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#ef4b4c;
    }
    
    .triple_logos_hp .non-hover-img-hp{
        width: 100px;
        padding-top: 1%;
    }
    
    .box-hp:hover .hover-img-hp{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-hp h1{
        font-size: 28px;
    }
    
    .box-hp:hover h1{
        font-size: 32px;
    }
}

@media(max-width: 1200px){
    
    .text-box-what{
        border-radius: 20px;
    }

    .text-box-what p {
        font-size: 25px;
    }

    .text-box-what p span {
        font-size: 25px;
    }

    .text-box-aim p{
        font-size: 25px;
    }

    .container{
        padding: 5%;
    }

    .box-wet{
        width: 250px;
        height: 250px;
        border-radius: 70px;
        margin: 3% auto;
    }
    
    .box-wet:hover{
        box-shadow: 5px 5px #61b872;
    }
    
    .triple_logos_wet{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-wet:hover .triple_logos_wet{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#61b872;
    }
    
    .box-wet:hover .hover-img-wet{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-wet h1{
        font-size: 30px;
    }
    
    .box-wet:hover h1{
        font-size: 35px;
    }
    
    .box-dry{
        width: 250px;
        height: 250px;
        border-radius: 70px;
        margin: 3% auto;
    }
    
    .box-dry:hover{
        box-shadow: 5px 5px  #3aa9c5;
    }
    
    .triple_logos_dry{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-dry:hover .triple_logos_dry{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#3aa9c5;
    }
    
    .triple_logos_dry .non-hover-img-dry{
        width: 100px;
        padding-top: 1%;
    }
    
    .box-dry:hover .hover-img-dry{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-dry h1{
        font-size: 30px;
    }
    
    .box-dry:hover h1{
        font-size: 35px;
    }

    .box-hp{
        width: 250px;
        height: 250px;
        border-radius: 70px;
        margin: 3% auto;
    }
    
    .box-hp:hover{
        box-shadow: 5px 5px  #ef4b4c;
    }
    
    .triple_logos_hp{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-hp:hover .triple_logos_hp{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#ef4b4c;
    }
    
    .triple_logos_hp .non-hover-img-hp{
        width: 100px;
        padding-top: 1%;
    }
    
    .box-hp:hover .hover-img-hp{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-hp h1{
        font-size: 28px;
    }
    
    .box-hp:hover h1{
        font-size: 32px;
    }
}

@media(max-width: 1000px){

    .what-section{
        padding-top: 100px;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 100px;
    }
    
    .text-box-what{
        border-radius: 20px;
    }

    .text-box-what p {
        font-size: 20px;
    }

    .text-box-what p span {
        font-size: 20px;
    }

    .text-box-aim{
        border-radius: 40px;
    }

    .text-box-aim p{
        font-size: 14px;
    }

    .aim-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .container{
        padding: 5%;
    }

    .box-wet{
        width: 250px;
        height: 250px;
        border-radius: 70px;
        margin: 3% auto;
    }
    
    .box-wet:hover{
        box-shadow: 5px 5px #61b872;
    }
    
    .triple_logos_wet{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-wet:hover .triple_logos_wet{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#61b872;
    }
    
    .box-wet:hover .hover-img-wet{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-wet h1{
        font-size: 30px;
    }
    
    .box-wet:hover h1{
        font-size: 35px;
    }
    
    .box-dry{
        width: 250px;
        height: 250px;
        border-radius: 70px;
        margin: 3% auto;
    }
    
    .box-dry:hover{
        box-shadow: 5px 5px  #3aa9c5;
    }
    
    .triple_logos_dry{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-dry:hover .triple_logos_dry{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#3aa9c5;
    }
    
    .triple_logos_dry .non-hover-img-dry{
        width: 100px;
        padding-top: 1%;
    }
    
    .box-dry:hover .hover-img-dry{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-dry h1{
        font-size: 30px;
    }
    
    .box-dry:hover h1{
        font-size: 35px;
    }

    .box-hp{
        width: 250px;
        height: 250px;
        border-radius: 70px;
        margin: 3% auto;
    }
    
    .box-hp:hover{
        box-shadow: 5px 5px  #ef4b4c;
    }
    
    .triple_logos_hp{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-hp:hover .triple_logos_hp{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#ef4b4c;
    }
    
    .triple_logos_hp .non-hover-img-hp{
        width: 100px;
        padding-top: 1%;
    }
    
    .box-hp:hover .hover-img-hp{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-hp h1{
        font-size: 28px;
    }
    
    .box-hp:hover h1{
        font-size: 32px;
    }
}

@media(max-width: 600px){
    
    .what-section{
        padding-top: 50px;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 50px;
    }

    .text-box-what{
        width: 100%;
        border-radius: 15px;
    }

    .text-box-what p {
        font-size: 14px;
    }

    .text-box-what p span {
        font-size: 14px;
    }

    .what-img{
        width: 100%;
        float: none;
    }

    .aim-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .text-box-aim{
        border-radius: 20px;
    }

    .text-box-aim p{
        font-size: 9px;
    }

    .box-wet{
        width: 250px;
        height: 250px;
        border-radius: 70px;
        margin: 10% auto;
    }
    
    .box-wet:hover{
        box-shadow: 5px 5px #61b872;
    }
    
    .triple_logos_wet{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-wet:hover .triple_logos_wet{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#61b872;
    }
    
    .box-wet:hover .hover-img-wet{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-wet h1{
        font-size: 30px;
    }
    
    .box-wet:hover h1{
        font-size: 35px;
    }
    

    .box-dry{
        width: 250px;
        height: 250px;
        border-radius: 70px;
        margin: 10% auto;
    }
    
    .box-dry:hover{
        box-shadow: 5px 5px  #3aa9c5;
    }
    
    .triple_logos_dry{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-dry:hover .triple_logos_dry{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#3aa9c5;
    }
    
    .triple_logos_dry .non-hover-img-dry{
        width: 100px;
        padding-top: 1%;
    }
    
    .box-dry:hover .hover-img-dry{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-dry h1{
        font-size: 30px;
    }
    
    .box-dry:hover h1{
        font-size: 35px;
    }

    .box-hp{
        width: 250px;
        height: 250px;
        border-radius: 70px;
        margin: 10% auto;
    }
    
    .box-hp:hover{
        box-shadow: 5px 5px  #ef4b4c;
    }
    
    .triple_logos_hp{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 15% auto;
    }
    
    .box-hp:hover .triple_logos_hp{
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 35px#ef4b4c;
    }
    
    .triple_logos_hp .non-hover-img-hp{
        width: 100px;
        padding-top: 1%;
    }
    
    .box-hp:hover .hover-img-hp{
        width: 200px;
        padding-top: 15%;
    }
    
    .box-hp h1{
        font-size: 28px;
    }
    
    .box-hp:hover h1{
        font-size: 32px;
    }
}