@font-face {
    font-family: 'proxima_nova_rgregular';
    src: url(https://static.igem.wiki/teams/4194/wiki/t-nus-singapore-proxima-nova-reg.ttf) format('truetype');
}

@font-face {
    font-family: "proxima_nova_rgbold";
    src: url(https://static.igem.wiki/teams/4194/wiki/t-nus-singapore-proxima-nova-bold.ttf) format('opentype');
}

@font-face {
    font-family: "opensans_regular";
    src: url(https://static.igem.wiki/teams/4194/wiki/t-nus-singapore-opensansregular.ttf) format('truetype');
}

@font-face {
    font-family: "opensans_bold";
    src: url(https://static.igem.wiki/teams/4194/wiki/t-nus-singapore-opensans-bold.ttf) format('truetype');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
html {
    background-color: white;
    width: 100%;
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

img {
    border: none;
    vertical-align: middle;
}

/* 消除由于背景动画影响的<a>无效问题 */
#b1,#b2,#b3,#b4,#b5,#b6,#b7{
    display: inline-block;
    position: relative;
    z-index: 5;
}

#bodyContent {
    padding: 0px;
    width: 100%;
    margin-top: -56px;
    margin-left: 0px;
    border: none;
    background-image:url("https://static.igem.wiki/teams/4194/wiki/background/child2.png");
    background-size:cover;
    margin-bottom: -3rem;
    padding-bottom: 3vh;
}

#bodyContent h1,
#bodyContent h2,
#bodyContent h3,
#bodyContent h4,
#bodyContent h5 {
    margin-bottom: 0px;
}

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(25%);
    }
}

.bg {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(60deg,#7CAFEC 30%,#ECE5B3 30%, #649663 40%);
    bottom: 0;
    top: 0;
    left: -50%;
    right: -50%;
    position: fixed;
}

.bg2 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;
}

.bg3 {
    animation-duration: 5s;
}

.main__div {
    height: 100vh;
    width: 100%;
    position: static;
    margin: 0;
    padding: 0;
}

.top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#div1 h1 {
    color: white;
    /* position: fixed; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "proxima_nova_rgbold";
    /* -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
    -moz-animation: neon1 1.5s ease-in-out infinite alternate;
    animation: neon1 1.5s ease-in-out infinite alternate;
    transition-duration: 1.2s; */
    font-size: 17vh;
    height: 35vh;
    width: 70vw;
    border-style: none;
}

#div1 h1:hover {
    color: #F26B60;
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
}

.type1 {
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 8%;
}


@-webkit-keyframes neon1 {
    from {
        text-shadow: 0 0 10px #d3d3d3, 0 0 20px #d3d3d3, 0 0 30px #d3d3d3, 0 0 40px #F26B60,
            0 0 70px #F26B60, 0 0 80px #F26B60, 0 0 100px #F26B60;
    }

    to {
        text-shadow: 0 0 5px #d3d3d3, 0 0 10px #d3d3d3, 0 0 15px #d3d3d3, 0 0 20px #7DAED4,
            0 0 35px #7DAED4, 0 0 40px #7DAED4, 0 0 50px #7DAED4, 0 0 75px #7DAED4;
    }
}

@media screen and (max-width: 600px) {
    #div1 h1 {
        line-height: 1.6;
        color: white;
        position: fixed;
        display: flex;
        align-items: flex-start;
        text-align: center;
        justify-content: center;
        font-family: "proxima_nova_rgbold";
        -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
        -moz-animation: neon1 1.5s ease-in-out infinite alternate;
        animation: neon1 1.5s ease-in-out infinite alternate;
        transition-duration: 1.2s;
        font-size: 3.5em;
        height: 40vh;
        width: 80vw;
    }
}

#div1 {
    background-image: url("https://static.igem.wiki/teams/4194/wiki/background/awards.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

#div1 h1 {
    font-size: 10vh;
    height: 45vh;
    width: 70vw;
}

#div2 {
    background-color: white;
    height: auto;
}

#div2 h2 {
    color: #F26B60;
    font-family: "proxima_nova_rgbold";
    font-size: 6vh;
    padding: 3vh 2vh;
}

#div2 h3 {
    color: #333333;
    font-family: "proxima_nova_rgregular";
    font-size: 3.5vh;
    padding: 2vh;
    line-height: 3.5vh;
}

#div2 p {
    padding: 1vh 10vh;
    font-size: 2.5vh;
    color: #333333;
    font-family: "proxima_nova_rgregular";
}

#div3 {
    background-color: white;
    height: auto;
}

#div3 h2 {
    color: #216ADE;
    font-family: "proxima_nova_rgbold";
    font-size: 6vh;
    padding: 3vh 2vh;
}

#div3 h3 {
    color: #333333;
    font-family: "proxima_nova_rgregular";
    font-size: 3.5vh;
    padding: 2vh;
    line-height: 3.5vh;
}

#div3 p {
    padding: 1vh 10vh;
    font-size: 2.5vh;
    color: #333333;
    font-family: "proxima_nova_rgregular";
}

#div4 {
    background-color: white;
    height: auto;
}

#div4 h2 {
    color: #B9B1CA;
    font-family: "proxima_nova_rgbold";
    font-size: 6vh;
    padding: 3vh 2vh;
}


#div4 h3 {
    color: #333333;
    font-family: "proxima_nova_rgregular";
    font-size: 3.5vh;
    padding: 2vh;
    line-height: 3.5vh;
}

#div4 p {
    padding: 1vh 10vh;
    font-size: 2.5vh;
    color: #333333;
    font-family: "proxima_nova_rgregular";
}

.tick {
    height: 6vh;
    padding-right: 1vh;
}

.awards_title {
    font-size: 9vh;
}