*{
    margin: 0;
}
.header{
    display: flex;
    justify-content: center;
    align-items:center;
    background: url(fon/image.png) 50% 20%  ;
    background-size: cover;
    height: 400px;
}
@font-face{
    font-family:Moy-shrift;
    src:url(fonts/Creepster.ttf)
}
.header-logo{
  color: beige;
    font-family: Moy-shrift;
    font-size: 6em;
    animation: slide-in-top 2s;
}
@keyframes slide-in-top {

    0%{    
   
   transform:translateY(-1000px);
        opacity:0;}
    
100%{  
   
   transform:translateY(0);
    opacity:1;}
}
.advant{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #B9C8EA;
    border-bottom: solid 10px darkblue;
    border-top: solid 2px black;
    
    
    
}
.advant-icon{
    background-color: whitesmoke;
    border: dodgerblue solid 2px;
    border-radius: 60%;
    padding: 10px;
    margin-left: 5%
    
}
.advant-icon:hover{
    background-color: red;
}
.advant-persona {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 50px;
    padding-top: 50px; 
    padding-left: 50px;
    color: darkblue;
    align-items: center;
    font-family: Ggn;
    font-size:2em;
}
.advant-persona img{
    border: 10px solid whitesmoke;
    box-shadow: 5px 5px 5px black
    
}
.advant-persona div{
    margin-top: 5px;
    margin-bottom: 5px;
}
.advant-persona img:hover{
    transform: scale(1.2);
    
}
.article{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #014262;
    padding-top: 40px;
    
}
.article-item-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    align-items:stretch;
    background-color: #014262;
    
}
.article-item{
    display: flex;
    justify-content: flex-start;
    flex-direction:column;
    align-items: center;
    padding: 20px;
    margin: 10px;
    background-color: cornflowerblue;
    max-width: 500px;    
}
.article img{
    border: 5px solid #014262;
}
@font-face{
    font-family:Ggn;
    src:url(fonts/Rosarium.ttf);
}
@font-face{
    font-family:sus;
    src:url(fonts/Creepster.ttf);
}
@font-face{
    font-family:agusha;
    src:url(fonts/Serati.ttf)
}
p {
    display: flex;
    font-family:Ggn;
    text-align: justify;
    margin-top: 10px;
    font-size: 1.3em;
    
}

h1{
    font-family: sus;
    font-size: 4em; 
    color: beige; 
    
}
h2{
    font-family: agusha;
}
.gallery{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #014262;
}
.gallery-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
 
}
#thumbs{
   cursor: pointer;
}

.gallery-container img {
    margin: 10px;
    border: solid 5px beige;
    border-radius: 100%;    
}
.div img {
    border: solid 2px white
}
.gallery-img-big img{
    border: solid 5px beige;
}