@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import  url("/fontawesome/css/all.min.css");


/*
@@@@@@@@@@
            Generics 
@@@@@@@@@@
*/



html{
    color:var(--darkGray);
    height: 100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
}
* { box-sizing: border-box;}

body{
    font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif!important;
    background:#383838!important;
    color:#ababab!important;
    min-height: 100%;
    width: 100%;
    position: relative;
    padding-bottom:6rem;   
    margin:0;
    padding:0;
    padding-bottom:6rem;

}

/* generic links look like text*/
a,a:hover,a:visited{
    color:inherit;
    text-decoration: inherit;
}

/* links inside text look like links*/
p a,p a:hover,p a:visited{
    color: #ffd700;
    text-decoration: underline;

}

p a:visited{
    color: #ff7b00;
}

h2, h1, h3{
    margin:0;
    padding:0;
    color: #ffd700;
}

hr {
    color: transparent;
    border: 0.1rem double #222;
    max-width: 30%;

}

pre {
    overflow: auto;
}


/*
A bar is a component that extends for the whole width and contains a title on the left and some content on the right.
The bar will automatically wrap into multiple lines whenever the width is too small.
*/
.bar{
    background-color:#222;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
    margin:0;
    width:100%;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;    
    flex-wrap: wrap;
    position:relative;
}

/* Everything has a margin, this will be important when wrapped*/
.bar  > *{
    display: inline-block;
    margin:1rem;

}

/* The first child is the title and will stay on the left */
.bar > *:first-child{
    margin-right: auto;  
    display:inline-block;
}



/* ul-li inside bar are menus*/
.bar   ul,.bar li{
    all:unset;
    font-weight: bold;
    display:inline-block;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height:100%;
}

.bar   li{
    margin-right:0.5rem;
    margin-left:0.5rem;
    font-size: 1.2rem;
    align-items: center;
    justify-content: center;
}



/* A section is a div that contains one <article>*/

section {
    display:block;
    width:100%;
    max-width:1400px;
    margin:auto;
    position:relative;
}


/* An article inside a section*/
section article{
    background:#2b2b2b ;
    box-shadow: 0 0 4px 2px rgba(0,0,0,.2);
    text-align:left;
    position:relative;
    display:block;
    margin:1rem;
    padding:2rem;
    padding-bottom:4em;
}


section.pagination{
    text-align: center;
    font-size:1.2rem;
}

section.pagination a{
    color: #ffd700;

}

/* A section.list is a section that contains multiple articles*/
section.list {
    text-align:center;
    display:block; /*for browsers that don't support grid*/
    display:grid;

    grid-auto-columns: 26rem;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(240px,26rem));

    justify-content: center;        
}

section.list article{
    transition: 0.6s transform,0.6s filter;
    opacity:1;
    transform: rotate(0deg);
    filter: brightness(100%);
    cursor: pointer;
}

article{
    animation: 0.2s linear fadeIn;
}

@keyframes fadeIn{
    0%{ opacity:0;}
    100%{opacity:1;}
    
}

section.list article:hover{
    transform: rotate(2deg);
    filter:brightness(120%);
}


section article .articleLabel{
    position:absolute;
    top:0.5rem;
    right:0.5rem;
    background-color:#ffd700;
    color:#222;
    padding:0.3rem;
    margin:0;
    border-radius: 0.3rem;
    border: 0.1rem dashed #222;
    text-shadow: unset;
    font-weight: bold;
}
section.list.compact{
    grid-auto-rows: 12rem;
    overflow:hidden;
}

section.list.compact article{
    position:relative;
}
section.list.compact article div {
    height:100%;
    overflow:hidden;
    text-overflow: ellipsis;
}

section.list.compact .meta{
    display:none;
}





@media only screen and (max-width: 1000px),only  screen and (orientation:portrait){
/* If the width is too small, the content will wrap*/
    .bar  > *{
        width: 100%;
        padding:0!important;
        margin:0!important;
        text-align: center;
        margin:0.4rem!important;
    }
    
    /* hide elements that have the class optional (it means we don't need them)*/
    .bar .optional{
        display:none;
    }
    section.list {

        grid-template-columns: repeat(auto-fit, 99vw);
        grid-auto-rows: minmax(20vh,1fr);
    
    
        }
}


/* Fallback for ancient browsers that do not support display grid*/
section.list article{
    display:block;
    overflow:hidden;

}
@supports not (display:grid){
    section.list article{
        vertical-align:top;
        height:36rem;
        width:26rem;
        display:inline-block;
        margin:none;
        padding:none;
    }
}



/* Read more link inside the article*/
section article .readMore{
    font-size:1.01rem;
    font-weight: bold;
}

/* Article's meta data*/
section article .meta{
    position:absolute;
    left:2rem;
    bottom:1rem;
    width:100%;
}


/*
@@@@@@@@@@
            Theme 
@@@@@@@@@@
*/
header.bar  #siteTitle {
    font-weight: bold;
    font-size:2rem;
    color: #ffd700!important;
    text-decoration: none;
    display:flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

header.bar  #siteTitle img {
    height:4rem;    
    pointer-events: none;
}

header.bar  #siteTitle a {
    padding-left:1rem;

}





footer.bar{
    position:absolute;
    bottom:0;
    left:0;
}

/* Social links*/
a.social{
    font-weight: normal;
    font-size:2rem;
    display:block;
    font-family: 'Font Awesome 5 Brands';
    font-weight: normal;
    
}

a.social:before{
    display:block;
}

a.social.discord:before{
    padding-top:0.22rem!important;
    content:"\f392";
}

a.social.twitter:before{
    content:"\f081";
}

a.social.github:before{
    content:"\f092";
}



a.social.youtube:before{
    content:"\f431";
}

.cover{
    text-shadow: 
    0 0  0.6rem #000, 
    0 0  0.6rem #000,

    0 0  0.6rem #000;
    
    text-align:center;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    user-select: none;

    font-weight: bold;
    color:rgb(236, 236, 236)!important;

}


#mainCover{   

    height:50vh;

    display:flex;
    align-items: center;
    justify-content: center;

    text-align:center;

    font-size: calc(0.75em + 1vmin);

}

#mainCover > div{
    display:block;
    max-width:60vw;    
}

.author-avatar {
    float:left;
    margin-right: 10px;
    border-radius: 5em;
    width:4rem;
    height:4rem;
    border-radius:10rem;
}


#getStarted{
    color: #222!important;
    background-color: #ffd700!important;
    padding:2rem;
    margin-bottom:1.5rem;
    text-align:center;
}

/* In getStarted the links are buttons*/
#getStarted a{
    background-color: #222!important;
    border: 0.1rem solid #383838!important;
    border-radius:0.5rem;
    color:#ffd700;
    padding:0.8rem;
    padding-left:2rem;
    padding-right:2rem;
    font-weight: bold;
    text-decoration: none;
    margin:1rem;
    display:inline-block;
    transition:0.5s background-color;
}

#getStarted a:hover{
    background-color: #383838!important;
}