@import url('./reset.css');
@import url('./preset.css');
@import url('./media.css');

#home, #schedule, #radio{
    min-height: 100vh;
}

/* header */
header{
    position: fixed;
    top: 0;
    left: 0;
    height: 125px;
    width: 100vw;
    z-index: 2;
}

.nav-toggle{
    position: relative;
    height: 40px;
    width: 50px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle img{
    position: absolute;
    left: 0;
    height: 8px;
    width: 50px;
    transition: all .6s;
}

.nav-toggle img:nth-child(1){top: 0;}
.nav-toggle img:nth-child(2){top: 50%; transform: translateY(-50%);}
.nav-toggle img:nth-child(3){bottom: 0;}

.nav-toggle.active img:nth-child(1){top: 50%; transform: translateY(-50%); transform: rotate(45deg);}
.nav-toggle.active img:nth-child(2){top: 50%; transform: translateY(-50%); transform: rotate(135deg);}
.nav-toggle.active img:nth-child(3){top: 50%; transform: translateY(-50%); transform: rotate(45deg);}

/* hero */
.hero{
    padding-top: 150px;
    position: relative;
    background: url('../media/hero-bg.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    z-index: 0;
}

.hero::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient( 106.9deg,  rgba(148,14,60,1) 60.9%, rgba(3,22,27,1) 122.3% );
    opacity: 0.8;
    z-index: -1;
}

.hero img{
    border-right: 3px solid #FFFFFF;
}

/* schedule */
.schedule{
    width: 100%;
    border-spacing: var(--size-sml);
    border-collapse: separate;
}

.schedule th{
    font-weight: 600;
}

.schedule th, .schedule td{
    text-align: left;
    padding: var(--size-sml);  /*was big*/
    background: rgba(150, 150, 150, 0.1);
    border-radius: var(--radius-sml);
    white-space: nowrap;
}

.schedule th:last-child{
    width: 100%;
}

.schedule td:last-child{
    white-space: pre-wrap;
}

/* radio */
#radio{
    position: relative;
    background: url('../media/radio-bg.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    z-index: 0;
}

#radio::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient( 110.1deg,  rgba(34,126,34,1) 2.9%, rgb(27, 88, 25) 90.3% );
    opacity: 0.9;
    z-index: -1;
}

.radio, .radio-platform{
    border-radius: var(--radius-sml);
}

.radio-platform{
    background: rgba(0, 0, 0, 0.2);
    transition: all .2s;
}

.radio-platform:hover{
    background: rgba(0, 0, 0, 0.5);
}



/* santa */
#halo{
    position: relative;
    background: url('../media/halloween.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    z-index: 0;
}

#halo::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /*background-image: linear-gradient(110.1deg,  #E9D66B 2.9%, #D2B357 90.3%); */

 /*   background-image: linear-gradient( 110.1deg,  rgba(34,126,34,1) 2.9%, rgb(27, 88, 25) 90.3% ); */
    opacity: 0.9;
    z-index: -1;
}

.halo, .halo-platform{
    border-radius: var(--radius-sml);
}

.halo-platform{
    background: rgba(0, 0, 0, 0.2);
    transition: all .2s;
}

.halo-platform:hover{
    background: rgba(0, 0, 0, 0.5);
}




@media only screen and (max-width: 900px){
    nav{
        padding: var(--size-sml);
        position: fixed;
        top: 0;
        left: -60vw;
        height: 100vh;
        width: 60vw;
        background-color: var(--color-30);
        transition: all .6s;
    }
    
    nav.active{
        left: 0;
    }

    nav a, nav a:link, nav a:visited{
        display: block;
        color: var(--color-light) !important;
    }

    nav a:hover{
        background: rgba(0, 0, 0, 0.1);
    }

    .hero img{
        border-right: none;
        border-bottom: 3px solid #FFFFFF;
    }
}