#write { width: 100%; min-height: 90dvh; display: flex; #embed-write { max-width: 50dvh; display: flex; align-items: center; flex-direction: column; img { cursor: pointer; object-fit: cover; width: 50dvh; height: 50dvh; margin: 0 0 1dvw 0; } ul { display: flex; align-items: center; flex-direction: column; width: 100%; li { display: flex; align-items: center; flex-direction: column; margin: 0 0 1dvh 0; width: 100%; input[type="text"] { width: 90%; outline: none; font-size: 1.3em; padding: 1dvh; color: var(--btn); background-color: var(--bg-light); border: none; border-bottom: solid 2px var(--btn); } textarea { font-size: 1.3em; width: 90%; padding: 1dvh; outline: none; resize: none; height: 20dvh; color: var(--btn); background-color: var(--bg-light); border: solid 2px var(--btn); } } #tags { display: block; width: 90%; } } } #text-write { position: relative; width: calc(100% - 50dvh - 2px); border-left: solid 2px var(--btn); ul { width: 100%; min-height: 3dvw; display: flex; align-items: center; padding: 0 1dvh 0 1dvh; span { cursor: pointer; width: 4dvh; height: 4dvh; display: flex; justify-content: center; align-items: center; transition: 0.3s; background-color: var(--btn); color: var(--bg-dark); } span:hover { background-color: var(--bg-light); color: var(--btn); } #gap { margin: 0 1dvb 0 0; } } li { width: 100%; position: relative; textarea { width: 100%; height: 78dvh; resize: none; outline: none; padding: 1dvh; color: var(--btn); background-color: var(--bg-light); border: none; } } #btn { position: absolute; text-align: center; border-radius: 0; width: 100%; bottom: 0; color: var(--bg-dark); } #btn:hover { color: var(--btn); } } }