:root{
        --backgroundDefault: url(/writing/blog/posts/01/resources/bg2.png);
        --backgroundClouds: url(/terror/files/resources/bgClouds.jpg);
    }

    body{
        margin: 1%;
        background-color: #151515;
        background-image: var(--backgroundDefault);        
        display: flex;
        justify-content: center;
        color: white;
        height: max-content;
        
    }

    #site{
        width: 56%;
        display: flex;
        gap: 15px;
        justify-content: center;
    }

    #home{
        display: none;
    }


    .sideBar{
        width: 25%;
        background-color: #7f7f7f;
        display: flex;
        flex-direction: column;
        
    }


    .sideBarContent{
        position: sticky;
        top: 0;
    }
    .navContainer{    
        margin: 2% 10% 2% 10%;
        
    }

    .navContainer p{
        font-family: 'Pixelta';
        text-decoration: underline;
        font-size: clamp(1rem, 1.2vw, 2rem);
        user-select: none;

    }

    .navContainer p:hover{
        cursor: pointer;
    }

    .commentBox{
        margin: 0% 10% 0% 10%;
        padding: 5%;
        background-color: #6e6e6e;
        border: 1px solid white;
        max-width: 100%;
    }

    .storyActiveContent img{
        max-width: 100%;
        padding: 1%;
    }

    .storyActiveContent img:hover{
        filter: invert(1);
    }
    .inlineEnd{
        float: inline-end;
    }
    .storyActive, #extraContent{
        display: none;
    }

    .main, .storyActive, #extraContent {
        width: 75%;
        background-color: #0c0c0c;
    }

    .storyActiveContent{
        border-bottom: 1px solid white;
        padding: 4%;
        max-height: 88%;
        overflow-y: scroll;
        scrollbar-color: white transparent;

    }

    .storyActive{
        max-height: 96vh;
    }

    #extraContent{
        
        flex-direction: column;
    }

    #extraContent div{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
    }

    .headerImg{
        max-width: 100%;
        filter: invert(1);
    }

    .mainTitle
    {
        width: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
        margin: 2% 0% 3% 0%;
        font-family: 'Pixelta';
    }

    .mainTitle h1{
        font-weight: 400;
        font-size: clamp(0.8rem, 3.5vw, 3rem);
        text-decoration: underline;
    }

    .mainTitle p{
        font-size: clamp(0.6rem, 1vw, 2rem);
    }

    .mainTitle p, h1{
        margin: 0%;
    }

    .description{
        background-color: #252525;
        border: 1px solid white;
        border-radius: 6px;
        margin: 1%;
        padding: 1.5%;
    }

    .description p{
        text-align: center;         
        font-size: clamp(0.6rem, 1.1vw, 2rem);     
    }


    .story{
        margin: 4% 1% 2% 1%;
    }

    .story h2:hover{
        cursor: pointer;
    }
    .story p{
        margin: 1% 2% 0% 2%;
    }

    .story h2{
        font-family: 'Pixelta';
        font-weight: 200;
        text-decoration: underline;
        margin: 0% 1% 0% 2%;
    }

    .header{
        height: clamp(1vh, 40vh, 35vh); 
        width: 100%;
        background-image: url(/terror/files/resources/hms-terror-1837.jpg);
        filter: invert(1);
        background-size: cover;
        background-position: center;
    }

    .content{
        background-color: #0c0c0c;
    }

    .navContainerHorizontal{
        display: none;
        flex-direction: row;
        background-color: #6e6e6e;
        justify-content: space-between;
        align-items: center;
    }

    .navContainerHorizontal p{
        text-decoration: underline;
        margin: 2% ;
        font-size: clamp(0.6rem, 1.2vw, 2rem);
        text-align: center;
    }

    .navContainerHorizontal p:hover{
        cursor: pointer;
    }

    a{
        text-decoration: none;
        color: inherit;
    }

    .navStoryActive{
        display: flex;
        justify-content: space-around;
        padding: 0% 3%;
        
    }

    .navStoryActive p {
        cursor: pointer;
        font-family: 'Pixelta';

    }

    .containerTitle{
        display: flex;
        flex-direction: row;
        padding: 2% 8%;        
    }

    .storyInfoContainer{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .story span{
        margin-right: 1%;
    }

    #showAllStories{
        display: none;
    }

    #translateStory{
        display: none;
    }

    .storyActiveContent p{
        font-size: larger;
    }

    .storyActiveContent h1{
        text-align: center;
        font-size: xxx-large;
    }

    .storyCredit{
        text-align: center;
        margin: 1%;
    }

    .storyCredit a{
        text-decoration: underline;
        color: red;
    }
    
    .form{
        background-color: #151515;
        display: none;
    }

    .storyTitle{
        user-select: none;
    }


    @media (max-width: 960px) {

        #site{
            width: 100%;
        }

        .main{
            width:90%
        }

        .containerTitle img{
            display: none;
        }
    }