/* GENERAL */

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    background-color: rgb(235, 231, 231);
    font-family: sans-serif;
}

a {
    color: #000;
    text-decoration: none;
}

.container {
    height: 100vh;
    display: grid;
    grid-template: 
    'header header header' 50px
    'to-do jk-msg must-know' 1fr
    'to-do videos must-know' 1fr
    'to-do videos news' 1fr
    'footer footer footer ' 50px /
    1fr 1fr 1fr;
    grid-gap: 10px;
}

.container > div:not(:first-child) {
    border-radius: .25em;
    margin: .25em .5em;
}

/* GENERAL COMPONENTS DESIGN */

.to-do, .jk-msg, .must-know, .videos {
    border: 1px solid #00478e;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.to-do p, .jk-msg p, .must-know p, .videos p {
    background-color: #00478e;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    margin: 0;
}

.section-labels {
    color: #444444;
    font-size: 11px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    font-weight: bold;
    margin: 0.5em;
    margin-top: 1em;
    padding-left: 0.5em;
}

.section-subtitle {
    margin: 0.5em;
    background-color: #00ADEE;
    color: #fff;
    font-size: 11px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    font-weight: bold;
    border-radius: .25em;
    padding: 0.25em 0.5em;
}

.section-msgs {
    display: flex;
    align-items: center;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    font-size: 14px;
}

.section-msgs > * {
    margin: 0.5em;
}

.section-msgs img {
    height: 50px;
}

.bold-msg {
    font-weight: bold;
}

.hide-msg {
    opacity: 0;
}

/* HEADER */

.header {
    grid-area: header;
    background-color: #00478e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .75em;
}

/* LEFT-HAND SIDE AREA - LOGO & SEARCH */

.logo-area {
    display: flex;
    align-items: center;
}

.logo {
    height: 50px;
}

.search {
    display: flex;
    align-items: center;
    margin-left: 1.5em;
}

.search button {
    background-color: #fff;
    outline: none;
    border: 1px solid #333333;
    padding: 6px 12px;
    border-top-left-radius: .25em;
    border-top-right-radius: .25em;
    cursor: pointer;
    height: 30px;
}

.search input {
    padding: 6px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    height: 30px;
}

/* RIGHT-HAND SIDE AREA - NAVIGATION */

.header-icon {
    height: 15px;
}

nav {
    display: flex;
    align-items: center;
    margin: 0 0.5em;
    color: #fff;
}

.main-nav a {
    margin: 0 0.75em;
}

.user-nav i, .view-nav i {
    color: #fff;
}

.home-nav::after {
    content: ' Home ▼';
    color: #fff;
}

.calendar-nav::after {
    content: ' Calendar';
    color: #fff;
}

.create-nav::after {
    content: ' Create';
    color: #fff;
}

.view-nav::after {
    content: ' View ▼';
    color: #fff;
}

.user-nav::after {
    content: ' Hasan - 4817 Manchester T1 ▼';
    color: #fff;
}

nav div > a {
    margin: 0 0.25em;
    color: #fff;
}

nav img {
    height: 1.25em;
}

.hamburger {
    border: none;
    outline: none;
    background-color: #00478e;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: none;
}

.hamburger i {
    color: #fff;
    font-size: 2em;
}

/* TO DO SECTION */

.to-do {
    grid-area: to-do;
}

.tasks-desktop {
    display: flex;
    justify-content: space-evenly;
    margin-top: 1.5em;
}

.mobile-tasks {
    background-color: #f1ecec;
    padding: .5em;
    padding-left: 1em;
    font-size: 13px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0.25em;
    border-radius: .25em;
    border: 1px solid #c5c3c3;
    cursor: pointer;
    display: none;
}

.mobile-tasks:last-child {
    margin-bottom: 1.5em;
}

/* JK MESSAGE SECTION */

.jk-msg {
    grid-area: jk-msg;
}

.jk-weekly-msg {
    display: flex;
    justify-content: center;
}

.jk-weekly-msg img{
    height: 300px;
    margin: .25em;
}

/* MUST KNOW */

.must-know {
    grid-area: must-know;
}

/* VIDEOS */

.videos {
    grid-area: videos;
}

/* BREAKING NEWS */

.news {
    grid-area: news;
    border: 1px solid #cf5048;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.news p {
    background-color: #cf5048;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    margin: 0;
}

/* FOOTER */

.footer {
    grid-area: footer;
    display: flex;
    justify-content: space-between;
}

.footer-btn {
    color: #fff;
    background-color: #00478e;
    font-weight: bold;
    width: 23%;
    border-radius: .25em;
    text-align: center;
    padding-top: .75em;
}

.tc-plus {
    background-color: #00ADEE;
}

/* MOBILE RESPONSIVENESS */

/* DESKTOP - ALLOWS SCROLL */

@media screen and (min-width: 1199px) {
    .must-know {
        overflow: scroll;
        overflow-x: hidden;
    }

    .videos {
        overflow: scroll;
        overflow-x: hidden;
    }
}

/* TABLET MODE */

@media screen and (max-width: 1199px) {
    .container {
        grid-template: 
        'header header' 50px
        'to-do jk-msg' auto
        'to-do videos' auto
        'must-know must-know' auto
        'news news' auto
        'footer footer' auto /
        1fr 1fr;
    }

    .footer {
        flex-direction: column;
    }

    .footer-btn {
        width: 100%;
        justify-content: center;
        margin-bottom: 1.5em;
        padding: .25em 0;
    }

    .home-nav::after {
        content: ' ▼';
    }
    
    .calendar-nav::after {
        content: ' ';
    }
    
    .create-nav::after {
        content: ' ';
    }

    .view-nav::after {
        content: ' ';
    }
    
    .user-nav::after {
        content: ' ▼';
    }

    .main-nav a {
        margin: 0 1em;
    }
}

/* MOBILE */

@media screen and (max-width: 850px) {
    .jk-msg img {
        height: 350px;
    }
    .container {
        grid-template: 
        'header' 50px
        'to-do' auto
        'jk-msg' auto
        'videos' auto
        'must-know' auto
        'news' auto
        'footer' auto
        ;
    }

    .tasks-desktop {
        display: none;
    }

    .mobile-tasks {
        display: flex;
    }

    .main-nav {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .search {
        display: none;
    }
}