.cp { #mainBlock { z-index: 1; width: 1000px; max-width: 90%; margin: auto; display: flex; justify-content: center; #container { font-size: 25px; width: 100%; } } #header { display: flex; #rightside { flex: 1; display: flex; flex-flow: column; } } #avatar { width: 300px; //height: 350px; margin: 10px; margin-right: 20px; text-align: center; &> span { display: inline-block; text-align: center; height: 300px; width: 300px; border: 1px solid black; border-radius: 10px; overflow: hidden; position: relative; .delete { right: 0; position: absolute; opacity: 0.7; &:hover { opacity: 1; } } } img { max-width: 100%; max-height: 100%; vertical-align: top; } media-tag { height: 100%; width: 100%; display: inline-flex; justify-content: center; align-items: center; img { min-width: 100%; min-height: 100%; max-width: none; max-height: none; flex-shrink: 0; } } button { height: 40px; margin: 5px; } } #displayName, #link { width: 100%; height: 40px; margin: 10px 0; input { width: 100%; font-size: 20px; box-sizing: border-box; padding-right: 30px; } input:focus ~ .edit { display: none; } .edit { position: absolute; margin-left: -25px; margin-top: 8px; } .temp { font-weight: 400; font-family: sans-serif; } .displayName { font-weight: bold; font-size: 30px; } .displayName, .link { line-height: 40px; } } #description { position: relative; font-size: 16px; border: 1px solid #DDD; margin-bottom: 20px; .rendered { padding: 0 15px; } .ok, .spin { position: absolute; top: 2px; right: 2px; display: none; z-index: 1000; } textarea { width: 100%; height: 300px; } .CodeMirror { border: 1px solid #DDD; font-family: monospace; font-size: 16px; line-height: initial; pre { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } } } }