body, html { height: 100%; width: 100%; margin: 0; padding: 0; font-family: "Roboto", sans-serif; font-weight: 500; font-style: normal; background-image: url('../assets/background.png'); background-size: cover; background-repeat: no-repeat; } .container { display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; min-height: 100vh; text-align: center; } .left_block{ display: flex; flex-direction: column; background-color: #535C91; opacity: 71; padding: 2rem; border-radius: 1rem; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9); color: white; } .left_block_top{ display: flex; flex-direction: row; justify-content: space-between; text-align: left; } .left_block_top h1{ padding: 0; margin: 0; } .left_block_top img{ margin: 0 3vw 0 5vw; width: 8vw; height: 8vw; } .left_block_content{ margin: 2rem 0 2rem 0; } .left_block_buttons{ display: flex; flex-direction: row; align-content: center; align-items: center; justify-content: center; } button{ margin: 0 1rem 0 1rem; width: 15vw; height: 10vh; border: none; border-radius: 10px; color: white; font-size: 1rem; font-weight: bold; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); outline: none; transition: background-color 0.3s ease; } button:hover{ filter: brightness(85%); } .left_block_footer{ display: flex; align-items: center; justify-content: end; } .right_block{ display: flex; flex-direction: column; background-color: #535C91; opacity: 71; padding: 2rem; border-radius: 1rem; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9); color: white; } button[name="logout"]{ margin: 0; padding: 0; width: 10vw; height: 5vh; background-color: #F44336; } button[name="alert"]{ margin: 0.7rem; background-color: #F44336; } button[name="notification"]{ margin: 0.7rem; background-color: #23BDEE; } button[name="menu_button"]{ margin: 0.7rem; background-color: #1B1A55; }