html, body { margin: 0; height: 100%; } #c { width: 750px; height: 500px; display: block; } #canvas_temp, #canvas_temp2{ display: none; position: absolute; left: 0; top: 0; pointer-events: none; } #canvas_temp{ z-index: 1; } .top-div { display: flex; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10px; font-family: "Arial"; font-size: 10px; background: black; color: white; } .top-div::after { content: "Загрузка"; display: flex; position: absolute; width: 100%; height: 100%; animation: loading 1s ease-in-out infinite; font-size: 30px; justify-content: center; align-items: center; } @keyframes loading{ 0% { content: "Загрузка\00a0\00a0\00a0"; } 35% { content: "Загрузка.\00a0\00a0"; } 65% { content: "Загрузка..\00a0"; } 100% { content: "Загрузка..."; } } a{ margin-top: 10px; background: lightgray; padding: 10px; border-radius: 5px; text-decoration: none; color: black; font-size: 15px; line-height: 15px; border: 2px solid gray; } .container{ position: relative; display: flex; width: 100vw; height: 100vh; flex-direction: column; justify-content: center; align-items: center; } .big_container{ display: flex; flex-direction: column; overflow: hidden; } .menu_ico{ width: 21px; height: 21px; position:absolute; top: 10px; right: 22px; z-index: 2; cursor: pointer; } .menu_ico > div:first-child, .menu_ico > div:first-child:after, .menu_ico > div:first-child:before{ width: 12px; height: 2px; cursor: pointer; } .menu_ico > div:first-child{ position:absolute; margin-left: 4px; display: inline; background: darkgray; transform: scale(1.7); } .menu_ico > div:first-child:after{ position:absolute; content: ""; background: darkgray; top: 4px; left: 0px; } .menu_ico > div:first-child:before{ position:absolute; content: ""; background: darkgray; top: 8px; left: 0px; } .slidecontainer { display: none; position: fixed; left: 0; top: 0; width: 100%; padding: 10px; background: white; z-index: 1; } .menu_ico:hover .slidecontainer{ display: flex; } #checkbox-container{ display: grid; columns: 2; row-gap: 10px; padding-left: 20px; } .sheet{ width: 400px; } .hide{ display: none; }