*{
    margin:0px;
    padding:0px;
}

body{
    background-color: #212121;
}

header {
    height:100px;
    background-color:black;
    border-bottom: solid #fff 1px;
}

.logo {
    height:100px;
    line-height:100px;
    margin-left:30px;
    font-size:50px;
    font-family: 'Bungee Shade', cursive;
    display:inline-block;
}

label{
    display:block;
    width:10%;
    text-align:center;
    font-size: 26px;
    line-height: 100px;
    margin-right:20px;
    color:#fff;
    float:right;
}

#toggle{
    display:none;
}

#toggle:checked + .social-btn {
    display:block;
}

.social-btn{
    list-style: none;
    color: #fff;
    display:none;
    height:240px;
    font-family: 'Russo One', sans-serif;
    width:100%;
}

li{
    line-height:80px;
    font-size:25px;
    width:100%;
    text-align:center;
    background-color: rgb(59, 117, 117);
    border-bottom: solid 2px #fff;
    position:relative;
    z-index:1;
}

.nav-link {
    color:#fff;
    text-decoration: none;
    display:block;
}

#current-link {
    text-decoration: underline;
}

.video-container {
    position:relative; 
    width:100%;
    padding-bottom: 56.25%;
    height:0;
}

.video-container iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.song-container {
    width:100%;
    text-align:center;
}

.type-title {
    text-align:center;
    margin-top:20px;
    color:#fff;
    font-family: 'Russo One', sans-serif;
    letter-spacing: 3px;
    text-shadow: #000 5px 5px;
}

.song {
    width:45%;
    display:inline-grid;
    grid-template-rows: auto auto auto;
    column-gap: none;
    row-gap: none;
    margin-top:20px;
}

.logo-label {
    width:65%;
    border-radius:13px;
    display:block;
    margin:0 auto;
}

.song-logo {
    width:100%;
    border-radius:13px;
    display:block;
}

#btn-conex , #btn-todo , #btn-zomb , #btn-furia{
  display:none;
}

.song-name {
    font-family: 'Roboto', sans-serif;
    font-weight:300;
    font-size: 14px;
    color:#fff;
    margin-top:10px;
}

.band-name {
    color:#cfcfcf;
    font-family: 'Roboto', sans-serif;
    font-weight:300;
}

footer {
    width:100%;
    text-align:center;
    background-color: #000;
    border-top: solid #fff 2px;
    position:relative;
    bottom: 0%;
    height:50px;
    padding-top:10px;
}

.footer-txt {
    color:#fff;
    font-family: 'Roboto', sans-serif;
    font-size:12px;
}


/*TABLET*/
@media only screen and (min-width:500px){
    header {
        height:130px;
    }

    .logo {
        line-height:130px;
        font-size:60px;
        margin-left:40px;
    }

    label {
        line-height:130px;
        font-size:40px;
        margin-right: 30px;
        text-align:center;
    }

    .social-btn {
        height:300px;
        margin-top:30px;
    }
    
    li{
        line-height:100px;
        font-size:30px;
    }
    
    .type-title {
        font-size:45px;
        margin:35px 0;
    }

    .song {
        width:40%;
    }

    .logo-label {
        width:55%;
    }

    .song-name {
        font-size:20px;
    }

    .band-name {
        font-size: 16px;
    }

    footer {
        height:70px;
        padding-top:20px;
        margin-top:20px;
    }

    .footer-txt {
        font-size:18px;
    }
}

/*LAPTOP*/
@media only screen and (min-width:1024px){
    header {
        height:100px;
    }

    .logo {
        line-height:100px;
        font-size:50px;
    }

    label {
        display:none;
    }

    .social-btn {
        height:100px;
        float:right;
        width:auto;
        margin:0 10px;
        display:block;
    }

    li {
        display:inline-block;
        width:auto;
        background-color:#000;
        border:none;
        margin:0 30px 0 0;
        line-height:100px;
        font-size: 25px;
    }

    .video-container {
        position:relative; 
        width:70%;
        overflow:auto;
        padding-bottom: 39.25%;
        height:0;
        margin:3% auto;
    }
    
    .video-container iframe {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }

    .song {
        width:25%;
    }

    .logo-label {
        width:70%;
    }

    .type-title {
        font-size:45px;
        margin:40px 0 15px 0;
    }
}

/*PC*/
@media only screen and (min-width:1400px){
    
    header{
        height:120px;
    }

    .logo {
        line-height:120px;
        font-size:60px;
        margin-left:50px;
    }

    .social-btn {
        height:120px;
        margin: 0 15px;
    }

    li {
        line-height:120px;
        font-size:28px;
        margin: 0 20px;
    }

    .song-container{
        display:grid;
        width:70%;
        margin:7% auto;
        grid-gap:0;
        grid-template-columns:25% 25% 25% 25%;
        grid-template-rows:20% 80%;
    }

    #orig {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    #covers {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .type-title {
        font-size:38px;
        margin:0;
    }

    #conex-song {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    #todo-song {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    #furia-song {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    #zomb-song {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .song {
        width:100%;
    }

    .logo-label {
        width:70%;
    }
}