@font-face {
    font-family: 'Epilogue';
    src:  url('https://static.igem.wiki/teams/5311/fonts/epilogue-variablefont-wght.woff2') format('woff2'),
        url('https://static.igem.wiki/teams/5311/fonts/epilogue-variablefont-wght.woff') format('woff');
    font-weight: 1 999;
} 

@font-face {
    font-family: 'Epilogue';
    src:  url('https://static.igem.wiki/teams/5311/fonts/epilogue-italic-variablefont-wght.woff2') format('woff2'),
        url('https://static.igem.wiki/teams/5311/fonts/epilogue-italic-variablefont-wght.woff') format('woff');
    font-stretch: 75% 125%;
    font-style: italic;
    font-weight: normal;
    } 

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

body {
    font-family: 'Epilogue', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    background-color: #F5FAFA;
    overflow-x: hidden;
}

h1 {
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    letter-spacing: 0.2rem;
    font-size: 3em;
}

h2 {
    font-family: 'Epilogue', sans-serif;
    font-weight: 600;
    font-size: 2em;
    color:#3b719f;
    text-transform: uppercase;
    padding-top:10px;
}

h3{
    color:#3b719f;
    font-size: 1.5em;
    padding-top:10px;
}

p{
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header h1 {
        font-size: 2.75em; /* Slightly smaller for tablets */
    }

    .header h2 {
        font-size: 1.85em; /* Adjust h2 for tablets */
    }

}

@media (max-width: 600px) {
    .header h1 {
        font-size: 2em; /* Smaller for mobile devices */
    }

    .header h2 {
        font-size: 1.75em; /* Smaller h2 for mobile */
    }
    .header h3 {
        font-size: 0.75em; /* Smaller h2 for mobile */
    }
}

#main {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 30px;
    padding-bottom: 10%;
}

#main h2 {
    padding-top: 30px;
}


/* SPECIAL PSEUDO BUTTONS */

a.fill-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

a.fill-div:hover {
    background-color: rgba(59, 112, 159, 0.2);
    transition: 0.3s;
}



/* Styles for SVG icons */

.menu-icon, .close-icon {
    width: 25px;
    height: 25px;
}

.menu-icon {
    display: block;
}

.close-icon {
    display: none;
}

.navbar_container.show .menu-icon {
    display: none;
}

.navbar_container.show .close-icon {
    display: block;
}

/*Special Styling*/

#main a.special-anchor {
    text-decoration: none;
    color: #18272F;
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding: 0 5px;
}

#main a.special-anchor::before {
    content: '';
    background-color: #5E7CE2;
    opacity:0.5;
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100%;
    height: 8px;
    z-index: 1; /* Changed from -1 to 1 */
    transition: all .3s ease-in-out;
}

#main a.special-anchor:hover::before {
    bottom: 0;
    height: 100%;
    opacity:0.5;
}

.special-bold{
    font-weight: bold;
    color:#5E7CE2;
    opacity:0.75;

}

/* Divider Styling */

.divider-1 {
    margin-bottom: 20px; /* Space below the divider */
}
.divider-1 {
    border-bottom: 1px solid #3b709f18;
    background-color: #3b709f18;
    height: 2px;
    margin: 0.5em 0px 1.5em;
}
.divider-1::after {
    content: "";
    display: block;
    width: 40%;
    height: 2px; 
    background-color: #3b719f; /* Your theme blue color */
}

/* Notebook - iframe Styling */

.notebook h3{
    margin-top: 0;
}

.tabs{
    display: flex;
    gap: 15px;
    padding-left: 0px;
    width: 100%
}

.tabs button{
    background-color: #efebdf;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border: none;
    font-weight: bold;
    padding: 15px;
    position: relative;
    z-index: 0;
}

.tabs button.active,
.tabs button:hover{
    background-color: #3b719f;
    color: #efebdf;
    z-index: 1;
}

.tabs button:after,.tabs button:before {
    bottom: 0;
    content: "";
    display: block;
    height: 10px;
    position: absolute;
    width: 10px
}

.tabs button:before {
    background: radial-gradient(circle at 0 0,transparent 10px, #efebdf 10px);
    left: -10px
}

.tabs button:after {
    background: radial-gradient(circle at 10px 0,transparent 10px, #efebdf 10px);
    right: -10px
}

.tabs button.active:before, 
.tabs button:hover:before{
    background: radial-gradient(circle at 0 0,transparent 10px, #3b719f 10px);
    left: -10px
}

.tabs button.active:after, 
.tabs button:hover:after{
    background: radial-gradient(circle at 10px 0,transparent 10px, #3b719f 10px);
    right: -10px
}

.tabs button:first-child:before,
.tabs button:first-child.active:before,
.tabs button:first-child:hover:before{
    background: none;
}

.tabs button:last-child:after,
.tabs button:last-child.active:after,
.tabs button:last-child:hover:after{
    background: none;
}

.notebook{
    margin-top: 20px;
}

.notebook-body{
    display: none;
    height: 600px;
    background-color: #3b719f;
    border-radius: 0 15px 15px 15px;
    padding: 20px 30px;
    width: 100%;
    color: #efebdf;
}
iframe{
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    overflow-clip-margin: content-box
}