body { margin: 0; padding: 0; font-family: Tahoma, Arial, Helvetica, sans-serif; font-style: normal; text-shadow: -.03em -.03em .03em rgba(255,255,255, 0.9), .03em .03em .03em rgba(255,255,255, 0.9), .03em .03em .03em rgba(0,0,0, 0.9); user-select: none; } #divOtladka { position: absolute; display: none; width: 250px; height: 150px; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255,255,235, 1); margin: 10px auto; text-align: center; border: 3px solid red; border-radius: 16px 0 16px 16px; box-shadow: 0 0 10px rgba(0,0,0, .8); z-index: 1000; } #divOtladkaButton { position: absolute; right: 10px; top: 10px; padding: 0 10px; border: 1px solid red; border-radius: 8px; cursor: pointer; z-index: 1100; opacity: 0; transition: all 1s ease; } #divOtladkaButton:hover { opacity: 1; } #divOtladkaZagolovok { position: absolute; left: 0; top: 0; padding: 0 20px; text-align: center; font-size: 12px; background: rgba(230,230,205, 1); border: 3px solid red; border-top: none; border-left: none; border-radius: 12px 0 12px 0; z-index: 1100; } #divOtladkaButtonX { position: absolute; right: 0; top: 0; background: red; text-align: center; color: white; padding: 0 10px; border: 3px solid red; border-top: none; border-right: none; border-radius: 0 0 0 12px; cursor: pointer; z-index: 1100; } #divZagolovok { position: absolute; width: 280px; height: 22px; left: 0; right: 0; font-weight: bold; text-align: center; color: white; background: rgba(255,0,0, .4); padding: 3px 0 0 0; margin: 72px auto; border: 3px solid red; border-radius: 50px 50px 0 0; box-shadow: 0 0 10px rgba(0,0,0, .3); z-index: 90; animation-name: animZagolovok; animation-delay: 1s; animation-duration: 1s; } @keyframes animZagolovok { 50% { margin: 105px auto; } } #divOstrov { position: absolute; width: 1020px; height: 730px; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255,255,235, 1); margin: 100px auto; padding: 5px 10px; border: 3px solid red; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0, .3); z-index: 100; } #divLine { width: 1000px; height: 0; left: 0; right: 0; top: 0; bottom: 22px; margin: auto; border-top: 3px dotted red; z-index: 101; } input { text-align: center; } a { color: #0076EC; text-decoration: none; } a:hover { color: red; text-decoration: underline; } .num { position: absolute; width: 24px; height: 20px; text-align: center; background: rgba(230,230,230, 1); border: 1px solid red; box-shadow: 0 0 10px rgba(0,0,0, .3); transition: all .3s ease; } #n1_tit_1:hover, #n1_tit_1:hover div, #n1_tit_2:hover, #n1_tit_2:hover div, #n1_tit_3:hover, #n1_tit_3:hover div, #n1_tit_4:hover, #n1_tit_4:hover div, #n1_tit_5:hover, #n1_tit_5:hover div, #n2_tit_1:hover, #n2_tit_1:hover div, #n2_tit_2:hover, #n2_tit_2:hover div, #n2_tit_3:hover, #n2_tit_3:hover div, #n2_tit_4:hover, #n2_tit_4:hover div, #n2_tit_5:hover, #n2_tit_5:hover div { background: rgba(255,0,0, .2); } .fon { position: absolute; display: none; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: rgba(0,0,0, .8); z-index: 1050; } img { position: absolute; width: 800px; height: 800px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px solid red; border-radius: 20px; z-index: 1100; cursor: pointer; } button { padding: 3px 20px; border: 1px solid black; border-radius: 10px; cursor: pointer; } button:hover { color: rgba(255,0,0, .8); border: 1px solid red; } .divTxt { position: absolute; width: 500px; height: 700px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; padding: 5px 10px; background: white; border: 3px solid red; border-radius: 20px 0 20px 20px; z-index: 1100; user-select: text; }