body{

    /* colors */
    background-color: black;
    color: white;

    /*text and fonts*/
    text-align: center;
    overflow: hidden;
}
div{

    display: inline-block;

    /* dimensions */
    width: fit-content;
    height: fit-content;

    max-width: 25vw;
    
}

/* i frame id´s */

#title{

    /* Border */

    border:20px solid;
    border-image-source: url(/assets/borders/pixel.png);
    border-image-slice: 9;
    image-rendering: pixelated;

    /* dimensions */

    width: calc(100vw - 40px);
    height: 15vh;

    /* position */

    position: absolute;
    left: 0px;
    
}
#navigation{
    
    /* Border */

    border:20px solid;
    border-top: none;
    border-image-source: url(/assets/borders/pixel.png);
    border-image-slice: 9;
    image-rendering: pixelated;

    /* dimensions */
    
    width: 15vw;
    height: calc(85vh - 61px);

    /* position */
    position: absolute;
    left: 0px;
    bottom: 0px;
    
}



/* guest book id´s */

#guestBook{
    /* dimensions */

    width: 68vw;
    height: 100vh;

    /* position */

    position: absolute;
    left: 17vw;

    /*border*/

    border: none;

    

}
#doosAndDonts{
    position: absolute;
    right: 3vw;
    top: 5vh;
}


/* general id´s */

#content-holder{
    overflow: scroll;

    display: revert;
    align-items: center;


    /* border */
    
    border: none;

    /* dimesnions */

    width: 100vw;
    height: 81.6vh;

    max-width: revert;

    /* position */

    position: absolute;
 
    top: 18.4vh;
}
#content{


    /*dimensions*/

    width: 68vw;

    

    /* padding */
    padding-left: 16vw;
    padding-right: 16vw;

    /*alignment*/

    align-items: center;
    align-content: center;

}

#toDo{
    
    /* position */
    
    position: absolute;

    top:6vh;
    right: 5vh;

    /* alignment */

    text-align: left;
}