/* FONT */

@font-face {
    font-family: 'Inter';
    src: url("./assets/fonts/Inter-Regular.ttf");
    font-weight: 400;
}

/* ALL */

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

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    margin: 0 auto;
    max-width: 1920px;
    background: #000000;
    font-family: 'Inter';
    font-size: 20px;
}

/* HEADER */

.container-header {
    display: flex;
    width: calc(100% - 60px);
    max-width: 1920px;
    height: 60px;
    margin: 0 auto;
    padding: 10px 15px 10px 35px;
}

.container-header-logo {
    background-image: url('./assets/svg/logo1.svg');
    background-size: contain;
    background-repeat: no-repeat;  
    transition: 0.3s;
    cursor: pointer;
    width: 40px;
    height: 40px;
    filter: filter: invert(1%) sepia(4%) saturate(1170%) hue-rotate(200deg) brightness(115%) contrast(100%);
}

.container-header-logo:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%) contrast(87%);
}

.container-header-logo.active {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%) contrast(87%);
}

.container-header-logo:hover.active {
    filter: invert(1%) sepia(4%) saturate(1170%) hue-rotate(200deg) brightness(115%) contrast(100%);
}

.container-header-item, ul {
    display: flex;
    justify-content: row;
    align-items: center;
    list-style: none;
    padding: 0 0;
    margin: 0 0;
    margin-left: auto;
}

.container-header-item-bird {
    display: flex;
    padding: 0 20px;
    color: #ffffff;
    cursor: pointer;
    transition: 0.3s;
}

.container-header-item-bird.active {
    color: #bdae82;
}

.container-header-item-bird:hover {
    color: #bdae82;
}

/* MAIN */

.container-main {
    display: flex;
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 1920px;
    height: calc(100vh - 120px);
}

.container-main-image {
    max-width: 100%;
}

.container-main-play {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -80px;
    margin-top: -80px;
    width: 160px;
    height: 160px;
    background-image: url("./assets/svg/play.svg");
    background-size: contain;
    background-repeat: no-repeat; 
    background-color: transparent;
    border: 0;  
    cursor: pointer;
    transition: 0.3s;
}

.pause {  
    background-image: url("./assets/svg/pause.svg");
}

.container-main-play:hover {
    filter: brightness(92%);
}

.container-main-volume {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: 150px;
    background: linear-gradient(to right, #bdae82 0%, #bdae82 50%, #fff 50%, #fff 100%);
    border: solid 2px #bdae82;
    border-radius: 8px;
    height: 7px;
    width: 400px;
    outline: none;
    transition: background 450ms ease-in;
    -webkit-appearance: none;
}

.container-main-volume::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    -webkit-appearance: none;
    cursor: ew-resize;
    background: #000000;
}

/* FOOTER */

.footer-container {
    display: flex;
    align-items: center;
    width: calc(100% - 60px);
    max-width: 1920px;
    height: 60px;
    color: #ffffff;
}

.footer-container-copy {
    color: #ffffff;
    padding: 0px 10px 0px 20px;
}

.footer-container-year {
    color: #ffffff;
    padding: 0px 10px;
}

.footer-container-github {
    padding: 0px 10px;
    text-decoration: none;
    color: #ffffff;
    transition: 0.3s;
}

.footer-container-github:hover {
    color: #bdae82;
}

.footer-container-rss {
    margin-left: auto;
}

.footer-container-rss-image {
    height: 50px;
    padding: 0px 60px;
    transition: 0.3s;
}

.footer-container-rss-image:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%) contrast(87%);
}