@import 'base-style.css';

body {
    margin: 0;
    padding: 0;
}

div#upper_section{
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 1) 90%),  url('../img/network_background.png');
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
}

div#lower_section{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1) 50%),  url('../img/network_background.png');
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
}


header{
    padding: 2rem 5% 0rem ;
    background-color: var(--translucent_black);
    box-shadow: var(--shadow_bottom);
    color: white;
    border-bottom: 1px solid var(--back_col_b);
    position: -webkit-sticky; /* For Safari */

    background-image: linear-gradient(to top, var(--translucent_black), var(--translucent_black)),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.95) 95%),
                      url('../img/network_background.png');
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;

    z-index: 10;
}

footer{
    display: flex;
    padding: 1rem 1rem 0.5rem;
    background-color: var(--translucent_black);
    box-shadow: var(--shadow_top);
    color: white;
    border-top: 1px solid var(--back_col_b);
    justify-content: space-between;
}

footer > div{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

footer > .left{
    justify-self: flex-start;
    align-content: left;
    min-width: 10%;
}

footer > .right{
    justify-self: flex-end;
    align-content: right;
    min-width: 10%;
}

footer > .center{
    justify-self: center;
}

footer p, footer a{
    font-size: 0.75rem;
    margin: 0;
    padding: 0;
}


main{
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 1rem;
    align-content: center;

}

section{
    display: flex;
  }

@media screen and (min-width: 800px) {
    section > p {
        column-count: 2;
        column-gap: 2rem;
        text-align: justify;
        text-align-last: left;
    }
}

details{
    margin: 0.5rem;
    width: 100%;
    display: flex;
  }

summary{
    margin: 0;
    /*color: #0098a1;*/
    cursor: pointer;
    display: list-item;
    /*justify-content: space-between;*/
  }

details > div{
    font-size: 0.85rem;
    padding: 0 1.5rem;
    color: var(--accent_col);
}

/*Utility Classes*/
/*---------------*/
.fixed{
    position: fixed;
}

.sticky{
    position: sticky;
    top: 0;
}

/*Layout*/
/*-----------*/

.flex{
    display: flex;
}

div.flex_container{
    display: flex;
}

.max_container{
    width: 82.5%;
    max-width: none;
    padding: 0.25rem;
    margin: 0.5rem;
}

div.flex_container.grow, div.card.grow{
    flex-grow: 1;
}

div.wrap, div.card.wrap{
    flex-wrap: wrap;
}


div.no_wrap, div.card.no_wrap{
    flex-wrap: nowrap;
}

div.shrink, div.card.shrink{
    flex-shrink: 1;
}

div.noshrink, div.card.noshrink{
    flex-shrink: 0;
}

.column{
    flex-direction: column;
  }
  
.row{
    flex-direction: row;;
  }
  
.vcenter_content{
    justify-content: center;
}

.hcenter_content{
    align-content: center;
}

.center_content{
    align-content: center;
    justify-content: center;
}

.center_content :is(h1, h2, h3, h4, h5, h6, p, a), .vcenter_content :is(h1, h2, h3, h4, h5, h6, p, a){
    text-align: center;
}

.vcentered{
    justify-self: center;
}

.hcentered{
    align-self: center;
}

.centered{
    align-self: center;
    justify-self: center;
}

.spaced_between{
    justify-content: space-between;
}

.spaced_around{
    justify-content: space-around;
}

.spaced_evenly{
    justify-content: space-evenly;
}

.third{
    width: 30%;
    min-width: 30%;
    max-width: 30%;
}

/*Special Section #abstract*/
/*-------------------------*/

section#abstract{
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section#abstract > .abstract_card{
    background-color: var(--translucent_black);
    box-shadow: var(--shadow_light);
    color: white;
    align-self: center;
}

section#abstract p{
    text-align: justify;
    text-align-last: left;
}