:root{
    --color-for-lifestyle: #03A9F4;
    --color: #7D7D7D;
    --color-oo: #B4AD9E;
    --color-o: #626262;
}

.lifestyle{
    color: var(--color-for-lifestyle);
}

.color-change:hover{
    animation: color-change 0.75s cubic-bezier(0.075, 0.82, 0.165, 1) both;
        transition: 0.75s all;
}

@keyframes color-change{
    0% {
        color: black;
    }
    25% {
        color:  green;
    }

    50% {
        color: #03A9F4;
    }
    100% {
        color: blue;
    }
}

.container{
max-width: 906px;
margin: 0 auto;
list-style: none;
margin: 0 auto;
margin-bottom: 94px;
margin-top: 71px;
}

/* Загальний стиль для скролбару */
::-webkit-scrollbar {
    width: 12px;
    /* Ширина вертикального скролбару */
    height: 12px;
    /* Висота горизонтального скролбару */
}

/* Стиль для "дорожки" скролбару */
::-webkit-scrollbar-track {
    background: #f0f0f0;
    /* Колір фону треку */
    border-radius: 10px;
}

/* Стиль для повзунка */
::-webkit-scrollbar-thumb {
    background-color: #888;
    /* Колір повзунка */
    border-radius: 10px;
    border: 2px solid #f0f0f0;
    /* Зробити невеликий відступ від країв */
}

/* Зміна кольору при наведенні */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}
/* 
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
} */

.a-dark{
    display: block;
}

.text-shadow-drop-center:hover {
    animation: text-shadow-drop-center 0.6s both;
}

.others{
    color: var(--color);
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    display: flex;
}

.others:hover{
    color: #03A9F4;
    transition: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    transition-duration: 250ms;
}

.container a{
    text-decoration: none;
}

.ul-header{
width: 906px;
margin: 0 auto;
margin-top: 92px;
list-style: none;
display: flex;
gap: 50px;
padding-left: 250px;
}
.shake-horizontal:hover {
    animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    transition: 0.75s all;
    border: 1px solid grey;
}

.button{
    margin-top: 94px;
    background-color: none;
    width: 165px;
    height: 60px;
    margin-bottom: 66px;
    margin-left: 357px;
}

.flex-list{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    padding-left: 0px;
    gap: 35px;
}

.box-1{
    width: 426px;
    flex-direction: row;
    padding-left: 10px;
}

.playfair-font{
    font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #626262;
  font-size: 14px;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-8-18 9:53:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@keyframes shake-horizontal {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70% {
        transform: translateX(-10px);
    }

    20%,
    40%,
    60% {
        transform: translateX(10px);
    }

    80% {
        transform: translateX(8px);
    }

    90% {
        transform: translateX(-8px);
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2024-8-18 9:56:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * @animation text-shadow-drop-center
 * ----------------------------------------
 */
@keyframes text-shadow-drop-center {
    0% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
    }
}