body{
    display: grid;
    grid-template-areas: 
        "title p p"
        "subtitle p p"
        "textt p p"
        "textt p p"
        "none p p"
        "back p p";
    height: 100%;
    width: 100%;
    margin: 0px;
    grid-auto-columns:20% 40% 40%;
    background-color: lightgray;

}

body>*{
    height: 100%;
    width: 100%;
}

#showText{
    display: block;
    max-height: 90% !important;
    max-width: 90% !important;
    margin: auto;
    grid-area: p;
    overflow: auto;
}

.title{
    grid-area: title;
    display: flex;
    flex-direction: column-reverse;
}

.subtitle{
    grid-area: subtitle;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    
}

.textt{
    grid-area: textt;
    display: flex;
    flex-direction: column;
    
}

.back{
    grid-area: back;
    display: flex;
    flex-direction: column-reverse;
    
}

.back a{
    display: block;
    margin-right: 1%;
    margin-bottom: 1%;
}

p,h1,h3{
    margin: 0px;
}

.title, .subtitle, .textt, .back{
    margin-left: 10%;
}

.textt p{
    margin-top: 1em;
    margin-bottom: 1em;
    /*white-space: nowrap;*/
}

a:hover{
    text-decoration: underline;
}