@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=WDXL+Lubrifont+JP+N&display=swap');

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color:teal;
}

p{
    font-family: "WDXL Lubrifont JP N", sans-serif;
    padding: 10px 0px 10px 0px;
    word-spacing: 8px;
    line-height: 30px;
    font-size: 30px;
}


.community{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.linkInCom{
    padding: 0px 5px;
}
button{
    text-decoration: underline;
    color: white;
    border-radius: 5px;
    background-color:#333;
    transition: 0.5s ease;
}
button:hover{
    text-decoration: none;
    color: #333;
    background-color: white;
}


.Berezanskay{
    height: 250px;
    width: 200px;
}
.Viselki{
    height: 250px;
    width: 200px;
}
.Krasnodar{
    height: 250px;
    width: 200px;
}


.history_photo_1{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.history_photo_2{
    display: flex;
    flex-direction: row;
    justify-content: center;
}


.title_1{   
    font-family:"Rubik Mono One", monospace;
}
.title_2{
    font-family:"Rubik Mono One", monospace;
}
.title_3{
    font-family:"Rubik Mono One", monospace;
}


@media (min-width: 1000px){             /*Для ПК*/
    
    
    .header {
        color: white;
        text-align: center;
        background-color:#333;
    }
    .main {
        background-color: white;
        padding: 100px;
        margin: auto;
        text-align: left;
        width: 1000px;
    }
    .footer {
        margin-top: auto;
        background: #333;
        color: white;
        padding: 20px;
        text-align: center;
    }
    
    .geography{
        background-color: whitesmoke;
    }
    .history {
        background-color: whitesmoke;
        display: flex;
        flex-direction: column;
    }
    .now{
        background-color: whitesmoke;
        display: flex;
        flex-direction: column
    }
    
    
    .mainHeading{
        padding: 30px;
        font-size: 80px;
    }
    .title_1{
        
        text-align: center;
        font-size: 50px;
        padding: 15px;
    }
    
    .title_2{
        text-align: center;
        font-size: 50px;
        padding: 15px;
    }
    .title_3{
        text-align: center;
        font-size: 50px;
        padding: 15px;
        line-height: 40px;
    }
    
    
    .photos{
        background-color: whitesmoke;
        padding: 10px;
        text-align: center;
        display: flex;
        flex-direction: row;
    }
    
    
    .Kazak_1{
        height: 400px;
        width: 100%;
    }
    .Kazak_2{
        height: 400px;
        width: 100%;
    }
    .Kazak_3{
        height: 400px;
        width: 100%;
    }
    
    
    
}




@media (max-width: 1000px){             /*Для мобилок*/
    

    .header {
        color: white;
        text-align: center;
        background-color: #333;
    }
    .main {
        background-color: white;
        padding: 20px;
        margin: auto;
        text-align: left;
        width: 100%;
    }
    .footer {
        margin-top: auto;
        background: #333;
        color: white;
        padding: 20px;
        text-align: center;
    }
    

    .geography{
        background-color: whitesmoke;
    }
    .history {
        background-color: whitesmoke;
        display: flex;
        flex-direction: column;
    }
    .now{
        background-color: whitesmoke;
        display: flex;
        flex-direction: column
    }

    .mainHeading{
        padding: 20px;
        font-size: 50px;
    }
    .title_1{
        text-align: center;
        font-size: 30px;
        padding: 15px;
    }
    .title_2{
        text-align: center;
        font-size: 30px;
        padding: 15px;
    }
    .title_3{
        text-align: center;
        font-size: 30px;
        line-height: 40px;
        padding: 15px;
    }


    .photos{
        background-color: whitesmoke;
        padding: 10px;
        text-align: center;
        display: flex;
        flex-direction: column;
    }
    

    .Kazak_1{
        width: 100%;
    }
    .Kazak_2{
        width: 100%;
    }
    .Kazak_3{
        width: 100%;
    }

}