body {
    background: black;
   }
  p {
    color: white; 
   }
   table {
    width: 900px; 
    border: 1px solid black; 
    margin: auto;
   }
  h2 {
    font-size: 200%; 
    border-bottom: 1px solid white;
    font-weight: normal; 
    padding-bottom: 1px; 
	}
  a {
    color: #800000;
   }
   .fig {
    text-align: center; 
	}
  a {
    color: gray; 
   }
   a:visited {
    color: #cecece; 
   }
   a:active {
    color: black; 
   }
#wrap{ 
        width:960px; 
        margin:0 auto;
    }    

    ul{ 
        position:center;    /* Относительное позиционирование родителя */
        list-style:none;
        font-family:Arial,Verdana,sans-serif;
        font-size:18px; 
        margin-left: -40px;    
    }

    a{ 
        text-decoration:none;
    }

    ul#nav a{ 
        display:block;
        background:rgba(15, 14, 15, 0.86); /* Полупрозрачный фон */
        color:#fff; 
        padding:3px;
    } 

    ul#nav > li{
        position:relative;    /* Относительное позиционирование родителя */
        float: left;
        margin-right:15px;
    }

    ul#nav ul{ 
        position:absolute; /* Абсолютное позиционирование */
        list-style:none; 
        left:-9999px; /* Скрываем за экраном, когда не нужно */ 
        opacity:0; /* Устанавливаем начальное состояние прозрачности */
        transition:opacity 0.5s linear; /* Замедление эффекта*/
    } 

    ul#nav ul li{
        padding-top:1px; /* Вводим отступ между li для разделения пунктов меню */         
    }

    ul#nav ul a{ 
        white-space:nowrap; /* Запрещаем перенос текста на следующую строку */
    }

    ul#nav li:hover ul{ /* Выводим выпадающее меню при наведении курсора */ 
        left:0px; /* Возвращаем его обратно на экран*/ 
        opacity:1; /* Делаем непрозрачным */
    } 

    ul#nav li a:hover{ 
        background:rgba(39, 41, 39, 0.86);/* Непрозрачный фон при наведении мыши */
    }
    .clear {
        clear: left; /* Очистка обтекания */
    }
    
    .demo {
            position: relative;
            height: 400px;
            width: 800px;
            margin:  auto;
            text-align: center; 
        }
        .demo input {
            display: none; 
        }
        .demo label {
            transition: 3s; 
        }
        .demo img {
            position: center;
        }
        .demo label{
            position: absolute; 
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;          
            visibility: hidden;
            opacity: 0;
        }

        .demo #on1:checked ~ [for="on1"],
        .demo #on2:checked ~ [for="on2"],
        .demo #on3:checked ~ [for="on3"],
        .demo #on4:checked ~ [for="on4"],
        .demo #on5:checked ~ [for="on5"] {          
          visibility: hidden;
          opacity: 0;
        }
        .demo #on1:checked ~ [for="on2"],
        .demo #on2:checked ~ [for="on3"],
        .demo #on3:checked ~ [for="on4"],
        .demo #on4:checked ~ [for="on5"],
        .demo #on5:checked ~ [for="on1"] {
            visibility: visible; 
            opacity: 1;
        }