body { --slack-color: #3f0e40; overflow: hidden; } .app__body { display: flex; height: 100vh; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; display: flex; align-items: center; justify-content: center; } .overlay:target { visibility: visible; opacity: 1; } .overlay__show { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 50%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; cursor: pointer; } .popup .close:hover { color: var(--slack-color); } .popup .content { max-height: 30%; overflow: auto; margin: 20px 0; } #add-channel-form { display: flex; flex-direction: column; } #add-channel-form > .form-control { margin-bottom: 10px; padding: 10px; color: gray; border-radius: 9px; border: 1px solid gray; } #add-channel-form > .form-btn { border: none; padding: 10px; color: gray; border-radius: 9px; cursor: pointer; } #add-channel-form > .form-btn:hover { color: white; background-color: var(--slack-color); transition: all 0.3s ease-in-out; } #add-channel-form > .form-control, #add-channel-form > .form-btn:focus { outline: none; }