body {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 2;
    background-color: #000000;
}

.container {
    width: 100%; 
}

.header {
    max-width: 1920px; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 30px;
}

.logo {
    background-image: url('./assets/svg/logo.svg');
    background-size: contain;
    background-repeat: no-repeat;  
    transition: 0.3s;
    width: 50px;
    height: 50px;
  }
  
 .logo:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
      contrast(87%);
  }

  .menu {
    margin-left: auto;
  }

  .nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    gap: 20px;
  }

  .nav-link {
    cursor: pointer;
  }
  
  .nav-link:hover {
    color: #bdae82;
  }
  
  .active {
    cursor: pointer;
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
    contrast(87%);
  }

  .active:hover {
    cursor: pointer;
    filter: none;
  }

  .main {
    max-height: 1080px;
    max-width: 1920px; 
    height: calc(100vh - 170px);
    min-height: 280px;
    background-image: url('./assets/img/forest.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .play {
    width: 160px;
    height: 160px;
    background-image: url(./assets/svg/play.svg);
    background-size: contain;
    background-color: transparent;
    border: 0;
    transition: .3s;

  }

  .play:focus {
    border: 0;
  }
  
  .play:hover {
    filter: brightness(.85);
  }

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

  .logopause {
    background-image: url(./assets/svg/logo1.svg);
  }

  .footer {
    max-width: 1920px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 30px;
  }

  .rslogo {
    width: 135px;
    height: 50px;
    transition: .3s;
  }

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

  .gitlink {
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: .3s;
  }

  .gitlink:hover {
    color: #bdae82;
  }