html{
    box-sizing:border-box;
    font-size:100%
}
    
*,:after,:before{
    box-sizing:inherit
}
        
body{
    background-color:#060042;
    background-image:linear-gradient(#7bf78c 2%, #035307 108%);
    color:#fff;
    min-height:100vh;
    text-align:center;
    font-family: 'Open Sans Condensed', sans-serif;
}
    
.logo{
    width:400px
}
    
a.featured:hover,a:hover{
    background-color:#0bc029;color:#fff
}

a{
    display:block;
    max-width:400px;
    margin:0 auto 15px;
    padding:15px 20px;
    font-size: 1rem;
    color:#fff;
    border:2px solid #fff;
    text-decoration:none;
    transition:all .2s ease-in-out
}

a.featured{
    position:relative;
    background-color:#fff;
    color:#000000;
    font-weight:700
}

a.featured:before{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:calc(100% - 4px);
    height:calc(100% - 4px);
    border:2px solid #05a81b
}

h2{
    font-size:28px;
    text-transform:uppercase;
    font-weight:400;
    letter-spacing:2px
}

.channels{
    font-size:18px;
    display:inline-block;
    max-width: 400px;
    margin:0 auto
}

.channels a{
    flex:1;
    padding:5px 10px;
    margin-right:10px;
    border:none
}

.channels a:last-child{
    margin-right:0
}

.channels a:hover{
    text-decoration:underline
}