body
{
  background:#56c572;


  background: url(fon.jpg)
  no-repeat center;
  background-size:100% 100%;
}
h1
{
    font-family: Arial;
    font-size:36px;
    font-style: bold;
    color: rgb(38, 0, 255);
    background-color: rgb(215, 250, 215);
    text-align: center;
    letter-spacing: 3pt;
}

p
{
    width: 600px;
    font-family: Arial;
    font-size: 14pt;
    font-style: italic;
    color: #335799;
    background-color: rgb(216, 228, 221);
    text-align: justify;
    text-indent: 12pt;
}
img
{
    width:400px;
    height:400px;
    border-width: 5px;
    border-style: solid;
    border-color: black;
}
a
{  
   display:inline-block;  
   height:40px;
   width:150px;  
   font-family:impact;
   font-size:14pt;
   letter-spacing:3px;
   background:#29dddd;
   color:#ffffff;
   text-decoration:none;
   text-align:center;
}
a:hover
{
   background:#c7cfd7;
   color:#cc0000;
}

.menu a {
    display: block;      /* кожне посилання стає блоком = в стовпчик */
    margin-bottom: 10px; /* щоб між пунктами був відступ */
}
.main
{
    position:relative;
    background:#edcdcd;    
    width:800px;
    margin:0px auto;
    box-shadow:0px 0px 30px black;
}
.top
{  
   margin: auto;  
   padding: 10px 10px 10px 10px;
}
.conteiner
{
    display: flex;      /* Вмикаємо flex-контейнер */
    flex-direction: row; /* Розташування зліва направо (за замовчуванням) */
    background-color: #c7cfd7;
    padding: 10px 10px 10px 10px;
}
.menu
{  
    width:150px;  
    margin: 20px 20px 20px 20px;    
}
.content
{
    flex: 1;            /* Займає весь доступний простір */
    width: 400px;    
    background:#c1b1b1;    
    padding: 10px 10px 10px 10px;  
}
.footer
{  
   margin: auto;  
   padding: 10px 10px 10px 10px;  
}