*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,body{
    overflow-x: clip;
}
@font-face {
    font-family: 'Raleway';
    src: url(https://static.igem.wiki/teams/4852/wiki/fonts/raleway-variablefont-wght.ttf) format('truetype');
}
:root{
    --menu-text-color:#ffffff;/*#ffffff;*/
    --header-color:#2C5F9F;
    --background-color:#002042;
    --content-color:#113360;
    --title-color:#00EAFF;
    --text-color:#ffffff;
    --sidebar-color:white;
    --sidebar-progress-color:#2C5F9F;
    --sidebar-title-color:#e3e3e3;
    --border-color:#ffffff;
    --footer-color:#2C5F9F;
    --navbar-color:#17437D;
    --link-hover-color:#cad4e0;
    --navbar-hover-color:#D78686;
    --menu-dropdown-background-color: #113360;
    --dropdown-item-color: #ffffff;
    --dropdown-item-background-color: #D78686;
    --sandwich: white;
    --footer-wrapper-color: #113360;
    --tab-label-color:#00EAFF;
    --tab-label-border-color:#1bacb9;
    --image-bg-color: #6ca1e2;
    --subtitle-color: #ffffff;
    --sidebar-hover-color: #00EAFF;
    --link-color: #D78686;
    --subtitle2-color: #FDDBDB;
    --table-color: #2C5F9F;
    --table-words-color: #ffffff;
    --globe-button-color: #ffffff;
    --alliance-text-color: aquamarine;

    /*-----FOR DEFAULT-----*/
    --dmmenu-text-color:#ffffff;
    --dmheader-color:#2C5F9F;
    --dmbackground-color:#002042;
    --dmcontent-color:#113360;
    --dmtitle-color:#00EAFF;
    --dmtext-color:#ffffff;
    --dmsidebar-color:#ffffff;
    --dmsidebar-progress-color:#2C5F9F;
    --dmsidebar-title-color:#e3e3e3;
    --dmborder-color:#ffffff;
    --dmfooter-color:#2C5F9F;
    --dmnavbar-color:#17437D;
    --dmlink-hover-color:#cad4e0;
    --dmnavbar-hover-color:#D78686;
    --dmmenu-dropdown-background-color: #113360;
    --dmdropdown-item-color: #ffffff;
    --dmdropdown-item-background-color: #D78686;
    --dmsandwich : white;
    --dmfooter-wrapper-color: #113360;
    --dmtab-label-color:#00EAFF;
    --dmtab-label-border-color:#0dcadb;
    --dmimage-bg-color: #6ca1e2;
    --dmsubtitle-color: #ffffff;
    --dmsidebar-hover-color: #00EAFF;
    --dmlink-color: #D78686;
    --dmsubtitle2-color: #FDDBDB;
    --dmtable-color: #2C5F9F;
    --dmtable-words-color: #ffffff;
    --dmglobe-button-color: #ffffff;
    --dmalliance-text-color: aquamarine;

    /*-----FOR DARKMODE-----*/

    /*-----FOR LIGHTMODE-----*/
    --lmmenu-text-color:#345e62;
    --lmheader-color:#86C8CD;
    --lmbackground-color:#ffffff;
    --lmcontent-color:#FEF6DB;
    --lmtitle-color:#74ABB0;
    --lmtext-color:#000000;
    --lmsidebar-color:#FEF6DB;
    --lmsidebar-progress-color:#86C8CD;
    --lmsidebar-title-color:#000000;
    --lmborder-color:#000000;
    --lmfooter-color:#86C8CD;
    --lmnavbar-color:#86C8CD;
    --lmlink-hover-color:#dbeeef;
    --lmnavbar-hover-color:#86C8CD;
    --lmmenu-dropdown-background-color: #fdf1c9;
    --lmdropdown-item-color: #000000;
    --lmdropdown-item-background-color: #fdf1c9;
    --lmsandwich : #345e62;
    --lmfooter-wrapper-color: #74ABB0;
    --lmtab-label-color:#ede0b7;
    --lmtab-label-border-color:#e3d4a5;
    --lmimage-bg-color: #fdf1c9;
    --lmsubtitle-color: #808080;
    --lmsidebar-hover-color: #808080;
    --lmlink-color: #0959ca;
    --lmsubtitle2-color: #D78686;
    --lmtable-color: #74ABB0;
    --lmtable-words-color: #000000;
    --lmglobe-button-color: #74ABB0;
    --lmalliance-text-color: rgb(106, 214, 178);

    /*-----FOR LIGHTMODE-----*/
    /*-----FONTS-----*/
    --font-raleway:'Raleway', sans-serif;
    /*-----FONTS-----*/
}

.loading-screen{
    display:block;
    position:absolute;
    background-color: #080606;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

    
    /*
    html{
    --top-spacing: 14vh;
    scroll-padding-top: var(--top-spacing);
    }*/


    
    
    /* footer */
    footer a { 
        color: white; 
        text-decoration: none; font-size: 14px;
    }
    footer a:hover { color: var(--link-hover-color); }
    .footer-info { 
        font-family:'Trebuchet MS'; 
    }
    footer h2 { 
        color: white; 
        font-family:'Trebuchet MS'; 
        font-size: 40px; 
        font-weight: bold; 
        margin-top: 12px;
    }
    footer h3 { 
        color: var(--footer-color); 
        font-family:'Trebuchet MS'; 
        font-size: 25px; 
        font-weight: bold;
    }
    footer h4 { 
        color: var(--footer-color); 
        font-family:'Trebuchet MS';
         font-size: 12px;
    }
    footer h5 { 
        color:#2b2b2b; 
        font-family:'Trebuchet MS'; 
        font-size: 12px;
    }
    .footer-container {
        background-color: var(--footer-color); 
        display:flex;
        flex-direction: column;
    }
    .footer-left{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .footer-right {
        padding: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 40px;
        width: 420px;
    }
    .footer-top {
        display:flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    .footer-bottom{
        margin-top: 30px;
        margin-bottom: 30px;
        padding-left: 20px;
    }
    .footer-info {
        padding-left: 20px;
        padding-top: 10px;
        width: 350px;
    }
    .footer-title {
        width: 250px;
    }
    .footer-logo {
        width: 92px;
        height: 80px;
    }
    .row{
        width: 90%;
    }
    .footer-left {
        padding: 20px;
        margin-bottom: 20px;
        width:750px;
    }
    .read-next {
        padding:30px;
        margin-top: 30px;
        margin-left: 10px;
        background-color: white;
        border-radius: 30px;
        width: 300px;
        height:230px;
        color: var(--title-color);
        box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .visit-button {
        background-color: var(--content-color);
        border-radius: 30px;
        width: 100px;
        text-align: center;
        font-family: 'Raleway', sans-serif;
        align-self: center;
        justify-self: end;
        position: absolute;
        bottom: 35px;
    }

    .visit-button:hover {
        cursor: pointer;
    }
    
    hr { margin: 0px; }

    .wrapper{
        align-items: center;
        align-self: center;
    }
    
    .wrapper .button{
        display: inline-block;
        height: 40px;
        width: 40px;
        margin-right: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
        background: var(--dmmenu-text-color);
        border-radius: 30px;
        cursor: pointer;
        box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease-out;
        overflow: hidden;
        position: relative;
    }

    .wrapper .button .icon{
        display: inline-block;
        height: 40px;
        width: 40px;
        border-radius: 30px;
        box-sizing: border-box;
        line-height: 40px;
        text-align: center;
    }

    .wrapper .button:hover{
        width: 200px;
    }
    
    .wrapper .button a{
        color: var(--footer-wrapper-color);
        font-size: 15px;
        position: relative;
    }

    .wrapper .button a:hover {
        color: var(--footer-color);
    }
    @media screen and (max-width: 1250px) {
        .read-next{
            width: 260px;
            height: 200px;
        }
        .visit-button{
            width: 80px;
            font-size: 80%;
            bottom: 35px;
        }
        footer h2 {
            font-size: 35px;
            width: 200px;
            margin-top: 15px;
        }
        .footer-title {
            width: 200px;
        }
        footer h3 {
            font-size: 20px;
        }
        footer h4 {
            font-size: 10px;
        }
        footer h5 {
            font-size: 10px;
        }
    }
    @media screen and (max-width:1000px) {
        .footer-left{
            flex-direction: column;
            width: 400px;
        }
        .footer-top{
            align-items: center;
        }
        .footer-right{
            height: 320px;
            width: 400px;
            margin: 0px;
        }
        .read-next{
            height: 170px;
            width: 350px;
            margin-top: 10px;
        }
        .visit-button{
            bottom: 25px;
        }
    }
    @media screen and (max-width:800px) {
        .read-next{
            width: 240px;
            height: 120px;
            padding:18px;
            border-radius: 20px;
        }
        .visit-button{
            width: 40px;
            font-size: 50%;
            bottom: 20px;
        }
        footer h2 {
            font-size: 25px;
            width: 150px;
            height: 40px;
            margin-bottom: 0px;
            margin-top: 10px;
        }
        .footer-title {
            width: 150px;
            height: 40px;
        }
        footer h3 {
            font-size: 15px;
            margin-bottom: 4px;
        }
        footer h4 {
            font-size: 8px;
            margin-bottom: 4px;
        }
        footer h5 {
            font-size: 8px;
            margin-bottom: 4px;
        }
        .footer-logo {
            width: 70px;
            height: 50px;
        }
        .footer-logo img {
            width: 50px;
            height: 50px;
        }
        .footer-info a {
            font-size: 10px;
        }
        .footer-bottom a {
            font-size: 10px;
        }
        small {
            font-size: 10px;
        }
        .footer-left {
            width: 260px;
            padding-left: 20px;
        }
        .footer-right {
            width: 290px;
            height: 230px;
        }
        .footer-info {
            width: 270px;
            padding-left: 10px;
        }
        .footer-info p{
            margin-bottom: 8px;
            width: 250px;
        }
        .footer-info img {
            width: 20px;
            height: 20px;
        }
        .wrapper .button{
            height: 30px;
            width: 30px;
        }
        .wrapper .button .icon{
            height: 30px;
            width: 30px;
        }
        .wrapper .button .icon img{
            margin-bottom: 10px;
        }
        .wrapper .button:hover{
            width: 140px;
        }
        .wrapper .button a{
            font-size: 10px;
            bottom: 5px;
        }
    }
    @media screen and (max-width:620px) {
        .read-next{
            width: 190px;
            height: 90px;
            padding: 13px;
            border-radius: 15px;
        }
        .visit-button{
            width: 30px;
            font-size: 40%;
            bottom: 15px;
        }
        footer h3{
            font-size: 12px; 
        }
        footer h4{
            font-size: 6px; 
         }
        footer h5{
            font-size: 6px; 
        }
        .footer-right {
            width: 270px;
            height: 200px;
        }
        footer h2 {
            font-size: 20px;
            width: 120px;
            height: 30px;
            margin-top: 5px;
        }
        .footer-title {
            width: 130px;
            height: 40px;
        }
        .footer-logo {
            width: 50px;
            height: 35px;
        }
        .footer-logo img {
            width: 35px;
            height: 35px;
        }
        .footer-info {
            width: 200px;
            padding-left: 5px;
        }
        .footer-info p{
            font-size: 8px;
            width: 180px;
        }
        .footer-info a{
            font-size: 8px;
        }
        .footer-info img {
            width: 16px;
            height: 16px;
        }
        .footer-bottom {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .footer-bottom a {
            font-size: 7px;
        }
        small {
            font-size: 8px;
        }
        .wrapper .button{
            height: 26px;
            width: 26px;
            margin-right: 0px;
        }
        .wrapper .button .icon{
            height: 26px;
            width: 26px;
        }
        .wrapper .button .icon img{
            margin-bottom: 15px;
        }
        .wrapper .button:hover{
            width: 110px;
        }
        .wrapper .button a{
            font-size: 8px;
            bottom: 8px;
        }
    }
    @media screen and (max-width:445px) {
        .read-next{
            width: 140px;
            height: 80px;
            padding: 10px;
            border-radius: 12px;
        }
        .visit-button{
            width: 25px;
            font-size: 35%;
            bottom: 14px;
        }
        .footer-title {
            width: 100px;
        }
        footer h3 {
            font-size: 9px;
        }
        footer h4 {
            font-size: 5px;
        }
        footer h5{
            font-size: 5px;
        }
        .footer-right {
            height: 190px;
        }
        .footer-info {
            width: 180px;
            padding-left: 4px;
        }
        .footer-info a{
            font-size: 7px;
        }
        .footer-info img {
            width: 12px;
            height: 12px;
        }
        .wrapper .button{
            height: 23px;
            width: 23px;
        }
        .wrapper .button .icon{
            height: 23px;
            width: 23px;
        }
        .wrapper .button .icon img{
            margin-bottom: 19px;
        }
        .wrapper .button:hover{
            width: 100px;
        }
        .wrapper .button a{
            font-size: 7px;
            bottom: 10px;
        }
        .footer-bottom {
            margin-top: 10px;
            margin-bottom: 25px;
        }
        .footer-bottom p {
            height: 15px;
        }
        .footer-bottom a {
            font-size: 7px;
        }
        small {
            font-size: 7px;
        }
    }
    /* footer */

    .navbar-brand{
    width: 80px;
    height: 80px;
    }
    
    
    #navbar{
    position: -webkit-sticky;
    position:fixed;
    top:0;
}

.navbar-nav,
.me-auto{
    flex:1;
    display:flex;
    justify-content: space-evenly;
    }

a{
    text-decoration: none;
    color: var(--link-color);
}

a:hover{
    color: var(--link-color);
}

br{
    padding-bottom: 2vh;
}