* { margin: 0; padding: 0; font-family: Sans-Serif; box-sizing: border-box; } html, body { height: 100%; width: 100%; } body { justify-content: center; align-items: center; display: flex; background-color: grey; } .window1 { background: #fff; width: 60%; height: auto; resize: both; overflow: auto; /*display: none; */ } .window1 .header-w1 { background: #000; justify-content: space-between; align-items: center; display: flex; padding: 5px; width: 100%; } .header-w1 span { color: #fff; } .header-w1 button { background: red; color: #000; } .window1 .content-w1 { padding: 10px; } .content-w1 p { color: #444; } .content-w1 button { padding: 2px 5px; background: #00FF5B; color: #000; border-radius: 1.5px; margin-top: 5px; } /* WINDOW 2 */ .window2 { background: #fff; width: 100%; height: 100%; overflow: auto; display: none; } .window2 .header-w2 { background: #000; justify-content: space-between; align-items: center; display: flex; padding: 5px; width: 100%; } .header-w2 span { color: #fff; } .header-w2 .actions { justify-content: space-between; align-items: center; display: flex; gap: 5px; } .actions button { padding: 2px; width: 30px; } .actions .minimize { background: #00FF1C; } .actions .close { background: red; } .window2 .content-w2 { margin-top: 5px; padding: 10px; justify-content: center; align-items: center; display: flex; flex-direction: column; gap: 8px; } .content-w2 input { text-indent: 5px; border: 0.5px solid grey; box-shadow: 1px 1px 2px grey; height: 25px; width: 225px; border-radius: 2.5px; } .content-w2 form { justify-content: center; align-items: center; display: flex; flex-direction: column; gap: 8px; } .content-w2 button { background: red; color: #fff; padding: 2.5px; height: 25; width: 225px; border-radius: 2.5px; }