@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

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

/* скрол бар */

body::-webkit-scrollbar {
    width: 18px;
    background-color: rgb(192, 175, 165);
}

body::-webkit-scrollbar-thumb {
    /* background-color: rgb(185, 158, 113); */
    /* border-radius: 8px; */
    /* border: 6px solid #d8ccaf; */
    border: 3px solid #efefef;
}

/* общие стили */

body {
    background-color: #F4DAC9;
}

h1 {
    margin: 30px 0 15px 0;
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    color: #0c926a;
    text-align: center;
}

.photoContainer, .videoContainer, .musicContainer{
    padding: 10px 0;
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

/* Шапка */

.main__container {
    width: 100%;
    margin: auto;
    padding: 11px 15px;
}

.main__header {
    height: 237px;
    border-radius: 16px;
    background: url(./images/bread__navBackground.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}

.main__header nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    height: 100%;
    width: 100%;
}

.menu__list, .profile__list {
    display: flex;
    gap: 45px;
    margin-top: 30px;
}

.menu__list a, .profile__list a {
    width: 228px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px #603F88 solid;
    border-radius: 18px;
    padding: 13px 15px;
    font-family: 'Montserrat', system-ui;
    font-weight: 800;
    font-size: 36px;
    color: #603F88;
    transition: 0.2s;
}

.menu__list a:hover, .profile__list a:hover {
    color: #F1EDEA;
    background-color: #603F88;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    transition-delay: 5ms;
}

.menu__list li:first-child, .profile__list li:last-child {
    width: 60px;
    display: flex;
    margin: 0 10px;
}

.menu__list li:first-child a {
    background: url(./images/menu_button_icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
    transition: 0.2s;
}

.menu__list li:first-child:hover a {
    background: url(./images/menu_button_icon_active.png);
    background-color: #603F88;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
    transition: 0.2s ease-in-out;
}

.profile__list li:last-child a {
    background-color: transparent;
    background-image: url(./images/profile_button_icon.png);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    border: 5px #F1EDEA solid;
    transition: 0.2s;
}

.profile__list li:last-child a:hover {
    background-image: url(./images/profile_button_icon_active.png);
    background-color: #F1EDEA;
    transition: 0.2s ease-in-out;
}

.logotype__container {
    width: 360px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(./images/logotype.png);
    background-size: 68%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 25px;
}

.button__container {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-top: 10px;
    background-image: 
        url(./images/main_button_decoration.png), 
        url(./images/main_button_decoration_active.png);
    background-position: top left, top left;
    background-size: 35%, 35%;
    background-repeat: no-repeat, no-repeat;
    transition: 0.3s;
}

.button__container:has(a:hover) {
    background-image: 
        url(./images/main_button_decoration.png), 
        url(./images/main_button_decoration_active.png);
    background-position: top left, bottom left;
    background-size: 35%, 35%;
    background-repeat: no-repeat, no-repeat;
    transition: 0.3s ease-in-out;
}

.button__container a {
    width: 219px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px #F1EDEA solid;
    border-radius: 18px;
    padding: 15px 11px;
    font-family: 'Montserrat', system-ui;
    font-weight: 800;
    font-size: 48px;
    color: #F1EDEA;
    transition: 0.3s;
}

.button__container a:hover {
    color: #603F88;
    background-color: #F1EDEA;
    transition: 0.3s ease-in-out;
}

/* Раздел с фото */

.photoContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.photoContainer img {
    width: 590px;
    /* width: 30vw; */
    border-radius: 4px;
}

.photoContainer div {
    display: grid;
    /* width: 90vw; */
    gap: 5px;
    grid-template-columns: 1fr 1fr 1fr;
}

/* Раздел с видео */

.videoContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.videoContainer ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-content: space-around;
    justify-items: center;
    gap: 7px;
}

.videoContainer li {
    transition: 0.2s;
    background-color: #9966CC;
    background-size: 100%;
    background-position: top center;
    filter: contrast(85%);
    
    box-shadow: inset 0 3em 2em rgba(0, 0, 0, 0.7);
    list-style-type: none;

    border-radius: 5% 10% 10% 15%;
    width: 300px;
    height: 150px;
    padding: 5px;
}

.videoContainer li:hover {
    transform: scale(101%);
    cursor: pointer;
    filter: contrast(90%);
    border-radius: 3% 7% 7% 11%;
}

.videoContainer a {
    text-decoration: none;
}

/* Раздел с музыкой */

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

.playlistContainer {
    display: flex;
    gap: 10vw;
    padding-bottom: 100px;
}

.playlistContainer h2 {
    background: linear-gradient(0deg, rgb(176, 123, 108) 0%, rgb(219, 143, 123) 100%);
    font-family: "Montserrat", sans-serif;
    color: rgb(250, 250, 250);
    padding: 10px 0 2px 10px;
    border-radius: 12px 12px 0 0;
    font-size: 20px;
}

.playlistItem {
    width: 21vw;
    height: 27vw;
}

.playlistItem iframe {
    width: 100%;
    height: 100%;
    border-radius: 0 0 12px 12px;
    margin-right: -20px;
}

footer {
    position: absolute;
    width: 98%;
    bottom: 3px;
}

footer nav {
    display: flex;
    align-items: center;
    padding-left: 20px;
    width: 100%;
    height: 8vh;
    background: #F1EDEA;
    background-size: 100%;
    background-position: center;
    border-radius: 12px;
    padding: 5px 15px;
}

footer span {
    color: #603F88;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 20px;
}