:root{
    --color-bg: rgb(49, 49, 49);
    --color-primary: rgb(202, 202, 202);
    --color-accent: rgb(58, 51, 108);
}

* {
    box-sizing: border-box;
    margin: 0;
    /*border: 1px solid var(--color-accent);*/
}

*::-webkit-scrollbar{
    width: 4px;
    height: 4px;
}

*::-webkit-scrollbar-track{
    background: var(--color-bg);
    /*border-radius: 2px;*/
}

*::-webkit-scrollbar-thumb{
    background: var(--color-accent);
    /*border-radius: 2px;*/
}

*::-webkit-scrollbar-corner{
    background: var(--color-bg);
    /*border-radius: 2px;*/
}

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-color: var(--color-accent) var(--color-bg);
    }
}

body {
    font-family: "Red Hat Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background-color: var(--color-bg);
    color: var(--color-primary);
}

a{
    color: inherit;
}

/*containers*/
.full-page{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
}

.main-container{
    flex: 1;
    display: flex;
    overflow: auto;
}

.main-left{
    flex: 1;
}

@media (max-width: 800px) {
    .main-left{
        flex: 0;
    }
    .main{
        /*padding: 0 8px;*/
    }
}

.main{
    flex: 3;
    /*position: relative;*/
    overflow: auto;
}



/*generic classes*/
.none{
    display: none !important;
}

.side-by-side{ /*not very geenric tbh*/
    display: flex;
    gap: 15px; 
}


/*ARTICLES*/
.pics-hor-scroll{
    max-width: 100%;
    overflow-x: scroll;
    height: 200px;
    display: flex;
    /*transform: rotate(-90deg) translate(0,0.25);
    */
}
.pics-hor-scroll > *{
    height: 100%;
    display: block;
}

.art-title{
    font-size: 2rem;
}

.art-subtitle{
    font-weight: 100;
    margin-bottom: 40px;
}



























/*articles*/
/*UNUSED*/
.item{
    
}

.item-heading{
    
}

.item-content{
    margin-top: 30px;
    display: flex;
}

.item-content-center{
    flex: 1;
}

.item-content-right{
    flex: 1;
}
/*END UNUSED*/















































.loading-rotation{
    animation: wooooooo 750ms ease-out infinite;
}
@keyframes wooooooo {
    0%{
        transform: rotate(0)
    }
    100%{
        transform: rotate(360deg);
    }
}



/*landing*/
.full-page-message{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo2{
    width: 50%;
}



.homepage-signature{
    font-size: min(1em, 3.6vw);
}






/*sidebar*/
.sidebar{
    display: flex;
}
.sidebar-buffer{
    padding: 10px;
}
.sidebar-contents{
    width: 100px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-right: -100px;
    transition: margin-right 150ms;
}
.sidebar-contents-showing{
    margin-right: 0;
}
.sidebar-contents > div:first-child{
    height: 15%;
}
.sidebar-contents p{
    cursor: pointer;;
}
.sidebar-icon{
    width: 20px;
    height: 20px;
    position: relative;
    cursor: pointer;
}
.sidebar-icon:hover{

    animation: rotoflip 150ms ease-out;
}
@keyframes rotoflip {
    0%,
    100%{
        transform: rotate(0);
    }
    50% {
        transform: rotate(15deg);
    }
}
.sidebar-icon > *{
    background-color: var(--color-primary);
    position: absolute;
    transition: transform 500ms;
}
/*burger*/
.sii1{
    width: 20px;
    height: 3px;
    transform: translateY(5px);
}
.sii2{
    width: 20px;
    height: 3px;
    transform: translateY(12px);
}
/*X*/
.sidebar-icon-expanded .sii1{
    transform: translateY(8.5px) rotate(45deg);
}
.sidebar-icon-expanded .sii2{
    transform: translateY(8.5px) rotate(-45deg);
}