texteditor.css

body {
    padding: 5vh;
    background-color: blueviolet;
}

.container {
    width: 100%;
}

h1 {
    font-family: sans-serif;
    color: white;
}

.toolbar {
    width: 50%;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background-color: #be3ff4;
    padding: 2vh;
    box-shadow: 0 0 4px 3px rgba(255, 255, 255, 0.424);
}

.textcolor {
    display: flex;
    justify-content: center;
}

input[type="color"] {
    background-color: antiquewhite;
    border: none;
    cursor: pointer;
}

.font-family,
.textSize {
    border: 4px solid;
    border-top-color: rgb(199, 93, 232);
    border-left-color: rgb(199, 93, 232);
    border-right-color: rgb(145, 79, 238);
    border-bottom-color: rgb(145, 79, 238);
    border-style: groove;
    padding: 5px;
}

select {
    cursor: pointer;
}

.font-family option:nth-child(1) {
    font-family: Arial;
}

.font-family option:nth-child(2) {
    font-family: Helvetica;
}

.font-family option:nth-child(3) {
    font-family: 'Times New Roman', Times, serif;
}

.font-family option:nth-child(4) {
    font-family: 'Courier New', Courier, monospace;
}

.font-family option:nth-child(5) {
    font-family: Georgia;
}

.font-family option:nth-child(6) {
    font-family: Verdana;
}

.font-family option:nth-child(7) {
    font-family: Tahoma;
}

.font-family option:nth-child(8) {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.textSize option:nth-child(1) {
    font-size: small;
}

.textSize option:nth-child(2) {
    font-size: medium;
}

.textSize option:nth-child(3) {
    font-size: large;
}

.textSize option:nth-child(4) {
    font-size: x-large;
}

button {
    border: none;
    font-size: xx-large;
    background-color: #be3ff4;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    color: azure;
}

#editor {
    height: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    resize: vertical;
    overflow-y: auto;
}

#Published,
#publish {
    border: 2px solid black;
    font-family: Arial, Helvetica, sans-serif;
    padding: 2vh;
    font-size: large;
    font-weight: bold;
    margin-top: 5vh;
}

#publish {
    background-color: rgb(259, 110, 110);

}

#Published {
    background-color: rgb(58, 180, 58);
    display: none;
}

#publishPost {
    border: 2px solid black;
    margin-top: 5vh;
    padding: 2vh;
    display: none;
}

h2 {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}