@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



*{

    margin: 0px;

    padding: 0px;

    box-sizing: border-box;

}



h1,h2,h3{

    font-family: 'Bebas Neue', cursive;

}



body{

    font-family: 'Montserrat', sans-serif;

}



.notebook-showcase{

    background: url(https://static.igem.wiki/teams/4186/wiki/notebook-bg.png);

    background-position: center center;

    background-size: cover;

    height: 670px;

    color: #fff;

    font-size: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 50px;

}



.notebook-container{

    max-width: 80vw;

    margin: auto;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    border-left: 10px solid #FF0000;

}



.notebook-container2{

    max-width: 80vw;

    margin: auto;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    border-left: 10px solid #FAFF00;

}



.notebook-container3{

    max-width: 80vw;

    margin: auto;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    border-left: 10px solid #fed136;

}



.notebook-container4{

    max-width: 80vw;

    margin: auto;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    border-left: 10px solid #3300FF;

}



.notebook-content-top{

    display: flex;

    justify-content: space-between;

    align-items:center;

    padding: 20px 20px 10px 0px;

}



.notebook-content-top h2{

    font-size: 30px;

    letter-spacing: 0.1rem;

}



.notebook-content-top a{

    text-decoration: none;

    font-size: 40px;

    color: #000;

}



.notebook-container5{

    max-width: 80vw;

    margin: auto;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    border-left: 10px solid #7C00DD;

}



.notebook-container6{

    max-width: 80vw;

    margin: auto;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    border-left: 10px solid #FF00F5;

}



.guide{

    width: 90%;

    margin: auto;

}



.special{

font-family: 'Montserrat';

font-style: italic;

font-weight: 500;

font-size: 20px;

line-height: 160%;

}



h3{

    font-size: 35px;

    letter-spacing: 0.05rem;

}



.journal{

    line-height: 30px;

    text-align: justify;

}



.activity{

    padding: 20px;

}



.activity-hub-jun,

.activity-hub-jul,

.activity-hub-aug,

.activity-hub-sep,

.activity-hub-oct

{

    display: none;

}



.day4-img{

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.june,

.april,

.august{

    font-size: 40px;

    cursor: pointer;

}