body{ background-color: #E3D4AD; box-sizing: border-box; margin: 0; padding: 0; } .containeraa { width: 100%; height: 100vh; display: flex; justify-content: center; align-items:center; } .side { border-left: 2px solid gray; width: 50%; height: 100vh; text-align: center; background-color: #D3BC8D; } /* Move on Button */ button:disabled{ opacity: 0.5; cursor: not-allowed; } .moveOn{ display: inline-block; border: none; padding: 6px 12px; margin-botton: 0; font-size: 1rem; font-weight: normal; text-align: center; cursor: pointer; border-radius: 4px; background-color: #4BB543; color: white; } .checkMoveOn{ margin: 0 25px; } .messageBox { padding-top: 7px; } /* Svg stuff*/ svg { width: 100% !important; height: 100% !important; } #sark { fill: white; stroke: black; stroke-width: 5px; } .sarkTekst { fontSize: 20px; fill: black; transform-box: fill-box; transform-origin: center; } .doneTekst{ transform-box: fill-box; transform-origin: center; } /*Muutuste osa*/ .muutused { margin-top: 10px; border-top: 2px solid gray; width: 100%; text-align: center; } .fileUpload { margin-top: 5px; } .textPos, .nulliBtn{ margin-top: 10px; } .textAddWrapper{ margin: 10px; } .textAddWrapper *{ font-size: 2rem; margin: 2px; border: 2px solid black; background-color: gray; cursor: pointer; } .nulliBtn { font-size: 1.2rem; } /* Img item stuff */ .item { height: 20%; width: 20%; position: absolute; background-image: url("img/shirtImg.jpg"); background-repeat: no-repeat; background-size: 100%; top: 50vh; /* top: 50%; right: 50%; top: calc(50% - 300px); right: calc(50% - 300px); */ } .resizer { height: 7px; width: 7px; position: absolute; border-radius: 3px; background: #000; z-index: 2; } .resizer.ne { top: -1px; right: -1px; cursor: ne-resize; } .resizer.nw { top: -1px; left: -1px; cursor: nw-resize; } .resizer.se { bottom: -1px; right: -1px; cursor: se-resize; } .resizer.sw { bottom: -1px; left: -1px; cursor: sw-resize; }