*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    display: flex;
    justify-content: center;
}

h1{font-size: 60px;}

h2{font-size: 40px;}

main{
    display: flex;
    justify-content: space-around;  
    flex-wrap: wrap;
}

.section2{
    max-width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;   
}

.arh{         
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.prim2{
    max-width: 800px;  
    font-size: 10px;
    padding: 15px 15px ; 
    text-align: center;   
}

.par, .child, .albom{
    max-width: 400px 100%;    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.par{max-height: 900px;}

.albom{max-height: 650px;}

img{padding: 10px 0;}

.card{
    height: 400px;
    width: 300px;
    border: 2px red solid;
    text-align: center;
    font-size: 40px;
    margin: 10px 0;
}

.zag{
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: center;  
    background-color: aquamarine;
}

/* Оформление карточек */

section{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.opis{
    width: 600px;
    min-height: 600px;
    border: 2px solid rebeccapurple;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}


.ukaz{
    max-height: 600px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;       
}

.down2{margin-left: 5px;}

.razv{
    display: flex;
    justify-content: space-between;
}

.info{padding: 50px;}

.rl{
    list-style-type: none;
    
    
}

/* Оформление Дерева поколений */

.urov{
    font-size: 20px;
    font-weight: 700;
    color: black;
    padding: 0 0 0 27px;  
    margin: 15px;
}

span{color: red;}

.if{font-weight: 700;}

.spisok .st1 ul li a,
.spisok .st2 ul li a,
.spisok .st3 ul li a,
.spisok .st4 ul li a,
.spisok .st5 ul li a,
.spisok .st6 ul li a,
.spisok .st7 ul li a {
    text-decoration: none;  
}

main .section1 .arh a{text-decoration: none;}

.spisok{
    display: flex;
    padding: 0px 40px; 
    
}

.vstav1{
    height: 215px;
    width: 180px;
    font-size: smaller;
}

.prim1{text-align: center;
    font-size: 20px;
    font-weight: 700;
}
.prim3{padding: 30px 5px 0 0;}

.l1 a:hover,
.l2 a:hover,
.l3 a:hover, 
.l4 a:hover, 
.l5 a:hover, 
.l6 a:hover
{background-color: rgb(51, 255, 0);}

.st1, .st2, .st3, .st4, .st5, .st6, .st7{margin: 0 10px;}

.tree{ 
    display: flex;
    justify-content: center;   
}

.l1, .l2, .l3, .l4, .l5, .l6, .l7{
    width: 190px;
    border-radius: 5px;
    margin: 0 0 3px 0;
}

.l{border: 2px white solid;}
.l1{border: 2px green solid;}
.l2{border: 2px blue solid;}
.l3{border: 2px rebeccapurple solid;}
.l4{border: 2px #CD5C5C solid;}
.l5{border: 2px orange solid;}
.l6{border: 2px aquamarine solid;}
.l7{border: 2px rgb(195, 253, 234) solid;}

/* Форма предоставления материалов */

.forma{
    max-width: 600px;
    min-height: 700px;
    border: 2px solid black;
    border-radius: 10px;
    padding: 15px 10px 15px 30px;
    margin: auto;
}

.uslov{
    text-align: center;
}

.anketa{
    padding-left: 20px;
}


        /* 767px */

@media (max-width: 767px){
    h1{font-size: 40px;}
    .arh{font-size: 13px;}

    .ukaz{
        display: flex;  
        flex-direction: row;      
        justify-content: space-between;               
    }

    .albom{
        display: flex;  
        flex-direction: row;      
        justify-content: space-between;         
    }
}

        /* 575px */

@media (max-width: 575px){
    h1{font-size: 20px;}
    .fio{font-size: 30px;}
    .arh{font-size: 13px;}
    h2{font-size: 20px;
       align-items: center;    
    }
    .ukaz{margin: 0 35px;}  
    .forma, .prim1{font-size: small;
        padding: 10px 5px 10px 15px;    
    }    
}

 /* 319px */

 @media (max-width: 319px){
    .ukaz{margin: 0;}  
 }
 @media (max-width: 319px){
    .forma, .prim1{font-size: smaller;} 
 }