html{
        box-sizing:border-box;
        font-size:100%
    }

*,:after,:before
     {
        box-sizing:inherit
     }

body{
        background-color:#060042;
        background-image:linear-gradient(#060042 2%,#20a39e 108%);
        color:#fff;
        min-height:100vh;
        text-align:center;
        font-family:Arial, Helvetica, sans-serif,sans-serif
    }

.logo
{
    width: 170px;
}

a.featured:hover,a:hover
{
    background-color:#ffffff;
    color:#0f3375;
}

    a
    {   display:block;
        max-width:420px;
        margin:23px auto 23px;
        padding:20px 20px;
        font-size:.85rem;
        color:#fff;
        border:1px solid #fff;
        text-decoration:none;
        transition:all .2s ease-in-out
    }
    
    a.featured
    {
        position:relative;
        background-color :#170b56;
        color:#ffff;
        font-weight: bold;
    }
    
    a.featured:before
    {
        content:"";
        position:absolute;
        top:2px;
        left:2px;
        width:calc(100% - 4px);
        height:calc(100% - 4px);
        border:2px solid #060042
    }
    
    h2
    {
        font-size:15px;
        text-transform:uppercase;
        font-weight:500;
        letter-spacing:7px;
    }
    
    .channels
    {
        display:flex;
        max-width:400px;
        margin:0 auto
    }
    
    .channels a
    {
        flex:1;
        padding: 12px 10px;
        margin-right:10px;
        background-color:#060042;
        border:none
    }
    .channels a:last-child
    {
        margin-right:0
    }
    .channels a:hover
    {
        text-decoration:underline
    }