header {
    display:flex;
    justify-content: center;
    background-color: rgba(73, 61, 116, .9);
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 0 0 1rem;
    position: sticky;
    top: 0;
}

#hCenter {
    color:#c1cbfd;
    background-color: rgba(0,0,0,0);
}

#hCenter ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
}

#hCenter ul li {
    padding:0px 20px;
    cursor:pointer;
    user-select: none;
    border: none;
}

#hCenter ul li img {
    width:1.5rem;
}

#hCenter ul li button {
    font-size:2rem;
    margin:0px;
    padding:0px;
    background-color: rgba(0,0,0,0);
}

.title {
    font-size: 1.5rem;
    color:black;
    height:3rem;
    margin-left:10%;
    width:80%;
    border-color: rgba(158, 160, 228, 0.9);
    background-color: rgba(133, 115, 199, .9);
    color:#c1cbfd;
    padding:.5rem;
}

textarea {
    outline:none;
    resize:none;
}

#container {
    margin:0px;
}

.editor-author {
    margin-left: 5%;
    width: 90%;
    text-align: left;
    color: #c1cbfd;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0.5rem;
}

.up-margin {
    margin: 50px 25px 25px 20px;
}

.upText {
    opacity:0;
}

#editableArea {
    outline:none;
    line-height: 150%;
    background-color: rgba(174, 175, 189, 0.8);
    border-color: rgb(155, 155, 155);
    margin-left:5%;
    width:90%;
    min-height: 800px;
    padding:1rem;    
    color:#c1cbfd;
    border-style: solid;
    font-size:1.5rem;
}

input[type=submit] {
    margin-left:5%;
    width:90%;
    height:3rem;
    border-color: rgba(150, 136, 201, 0.9);
    background-color: rgba(133, 115, 199, .9);
    color:#c1cbfd;
    font-size: 1.5rem;
}

::placeholder{
    text-align: center;
    color: rgba(85, 85, 90, 0.9);
}

@media only screen and (max-width: 992px){

    .container, .title, .upText, #editableArea, input[type=submit], .editor-author {
        margin:0px;
        width:100%;
    }

    main {
        grid-column: 1/-1;
        margin:0px;
        width:100%;
    }

    #hCenter {
        margin:0px;
        max-width: 100%;
        display:block;
        height:100%;
    }

    header{
        top: 0;
    }
}

@media only screen and (max-width: 480px){
    header{
        top: 0;
    }
}