body{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0%;
        height: 100vh;
        color: white;
        background-image: url(../resources/pingpong.gif);
        background-color: #7a7152;
        background-blend-mode: luminosity;
        background-size: cover;
        background-position-y: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }
    #site{
        width: 38%;
        margin: 2%;
        height: 90%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .main{
        font-family: 'Consolas';
        display: flex;
        flex-direction: column;
        height: 100%;
        gap: 10px;
    }

    .title{
        font-family: 'Pixelta';
        text-align:center;
        white-space: pre;        
        margin: 2%;
        font-size: clamp(1.25rem, 3vw, 4rem);
        font-weight: 300;

    }

    .notesContainer{
        max-height: 90%;
        overflow-y: scroll;
        scrollbar-color: white transparent;   
        scrollbar-width: thin;
        scroll-behavior: smooth;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .note{
        width: 95%;
    }

    .noteTitle{
        color: black;
        font-family: 'Pixelta';        
        background-color: white;
        padding: 5% 0% 5% 0%;
        width: 100%;
        font-size: clamp(1.25rem, 2.5vw, 3.5rem);
        cursor: pointer;
    }

    .noteTitle:hover {
        color: var(--note-color);
        text-decoration: underline;
    }

    .noteDescription{
        text-align: justify;        
        text-justify: inter-word;
        text-align-last: justify;
        width: 100%;
        font-size: clamp(0.5rem, 1.2vw, 2.2rem);
    }

    .nav{
        display: flex;
        flex-direction: row;    
        justify-content: space-between;    
        align-self: flex-end;
        margin-top: auto;
        width: 100%;
        font-size: clamp(0.5rem, 1.2vw, 2.2rem);
        font-family: 'DOS';
        user-select: none;
    }

    .nav span{
        padding: 1%;
        cursor: pointer;
    }

    .nav span:hover{
        color: #7b7253;
    }

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