/* TODO - DONE */

/* Reset CSS */
/* Universal selector (*) targets every element (regardless tag, class, ID) */
* {
    margin: 0;
    padding: 0;
}


html {
    font-size: 16px;
    box-sizing: border-box;
}

body {
    max-width: 75rem;
    /* set width of web page */
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fff;
    text-decoration: none;
    scroll-behavior: smooth;
    letter-spacing: -.022em;
    line-height: 1.3;
}

/* Font color RESET */
a {
    text-decoration: none;
    color: inherit;
}

.container {
    display: grid;
    grid-template-columns: [full-start] 0.6fr [center-end center-start] 0.4fr [full-end];
    grid-template-rows: repeat(6, min-content);
    margin: 0 auto;
}

/* TODO */

/** Start of Desktop Section **/
/** ************************ **/

/* Set up the navbar for the desktop */
nav {
    display: flex;
    grid-column: full-start / full-end;
    justify-content: space-between;
    height: 4rem;
}

/* LOGO Set up logo styles */
.logo {
    margin-left: 1.5rem;
    height: 2.5rem;
    align-items: center;
}

.logoname {
    text-transform: uppercase;
}

.logoname-bold {
    font-weight: bold;
    color: #484848;
}

.logoname-light {
    font-weight: lighter;
    color: #aaa;
}

/* NAVIGATION - DECENDENT SELECTOR Set up navigation links' styles */
nav ul {
    list-style: none;
    display: flex;
    padding-right: 1.5rem;
    align-items: center;
}

nav ul li {
    padding-right: 1rem;
}

nav ul li:last-child {
    padding-right: 1.5rem;
}

nav>a {
    display: flex;
    align-items: center;
}

nav a:hover {
    color: #e83c91;
}

/* HEADER - Set up header area */
header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f4ec;
}

.imagecontainer {
    padding: 2rem 1.5rem 2rem 1.5rem;
}

header>img {
    width: 100%;
    height: auto;
}

header div {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 18rem;
    padding: 0 3.5rem 0 1.5rem;
}

header div h1 {
    font-size: 3rem;
    line-height: 1.2;
    padding-bottom: 2rem;
}

header div h2 {
    font-size: x-large;
    font-weight: lighter;
    color: #4A4A4A;
}

/* create a HOVER for <a> Start here: Add transistion*/
header div a {
    display: block;
    margin: 3rem 0;
    padding: 1rem 0 1rem 0;
    justify-content: center;
    background-color: #e83c91;
    border-radius: 2rem;
    width: 100%;
    color: #fff;
    text-align: center;
    transition: background-color 0.3s ease-in-out, width 0.3s ease-in-out;
}

header>div>a:hover {
    background-color: #ff8fb7;
}

/* end of HOVER <a> */

/* PRACTICE - Set up practice section */
.practice {
    display: flex;
    justify-content: flex-start;
    /* push every item to the left */
    flex-direction: column;
}

.practice>.practice-text {
    padding: 0 1.5rem 2rem 1.5rem;
}

.practice>.practice-text h1 {
    font-size: xx-large;
    margin-bottom: 1.5rem;
}

.practice>.practice-text p {
    font-size: medium;
    font-weight: lighter;
    line-height: 1.5rem;
    color: #4A4A4A;
}

.practice>.practice-text>p>span {
    display: block;
    padding: 1.5rem 0 2rem 0;
}

.practice>.imagecontainer>img {
    max-width: 100%;
    height: auto;
}


/* EVENT - This Section sets up the Event Section */
.events {
    display: grid;
    grid-template-rows: repeat(3, min-content);
    border-left: 1px solid #e7e7e7;
}

.events .event-block {
    display: grid;
    grid-template-columns: 0.35fr 0.65fr;
    border-bottom: 1px solid #e7e7e7;
    align-items: center;
    transition: background-color 0.3s ease-in-out, width 0.3s ease-in-out;
}

.events .event-block:hover {
    background-color: #ff8fb7;
}

.events>.event-block>img {
    max-width: 100%;
    height: auto;
    margin: 1rem;
}

.events>.event-block:first-child>img {
    margin-top: 2rem;
}

.events>.event-block:last-child {
    background-color: #f8f4ec;
}

/* create HOVER for event-block */
.events>.event-block:last-child:hover {
    background-color: #ff8fb7;
}

/* end of HOVER */

.events>.event-block>.event-text>h3 {
    font-size: x-large;
}

.events>.event-block>.event-text {
    margin: 2rem;
}

.events>.event-block>.event-text>p,
.events>.event-block>.event-text>a {
    font-size: medium;
    margin: 0.5rem 0;
}

.events>.event-block>.event-text>a {
    color: #43334c
}

/* create HOVER for <a> Read more */
.events>.event-block>.event-text>a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* end of HOVER */

.events>.event-block>.event-text>p {
    margin: 0.5rem 0;
}

/* LEARNING - Start of Learning section */
.learning {
    background-color: #f8f4ec;
    grid-column: full-start / full-end;
    height: auto;
}

.learning .learning-text {
    padding: 2rem 0;
    text-align: center;
}

.learning>.learning-text>h1 {
    font-size: xx-large;
}

.learning-grid {
    display: grid;
    width: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 2rem;
    margin: 0 4.5rem 2rem;
}

/* create translate + hover for learning-card */
.learning-card {
    flex-basis: calc(33.333% - 1.25rem);
    min-width: 17.5rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s;
    border-radius: 0.5rem;
}

.learning-card:hover {
    transform: translateY(-0.3125rem);
}

/* end of translate + hover */

.learning-image {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.learning-card .learning-image {
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    object-fit: cover;
    background-image: url("https://placehold.co/100x100/orange/white?text=Image Placeholder");
}

.learning-details {
    padding: 1rem 0 1rem 1rem;
}

.learning-details>h3 {
    font-size: x-large;
    margin-top: 0.5rem;
}

.learning-details>p {
    font-size: medium;
    font-weight: lighter;
    line-height: 1.5rem;
    margin-top: 0.5rem;
    text-transform: uppercase;
    color: #4A4A4A;
}

.learning-details>p>span {
    padding: 0.5rem 1rem 2rem 0;
    text-transform: none;
}

.learning-details>p span {
    display: block;
    font-style: lighter;
}

/* End of Learning section */

/* THESIS - Start of THESIS */

/* create a 1 row 1 coloumn for title */
.thesis-container1 {
    grid-column: full-start / full-end;
    padding: 2rem 1, 5rem;
}

.thesis-header {
    padding: 1.5rem 0 2rem 1.5rem;
    text-align: center;
}

/* create 2 column of different width */
.thesis-container2 {
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    gap: 1.5rem;
}

.thesis-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.thesis-box>.thesis-media>video {
    max-width: 100%;
    height: auto;
    padding: 0 1.5rem 0 1.5rem;
}

.thesis-box>.thesis-media-text {
    padding: 0 1.5rem 2rem 1.5rem;
}

.thesis-box>.thesis-media-text>h1 {
    font-size: xx-large;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
}

.thesis-box>.thesis-media-text p {
    font-size: medium;
    font-weight: lighter;
    line-height: 1.5rem;
    color: #4A4A4A;
}




/* ARCHIVE - Start of thesis area */
.thesis-archive {
    display: grid;
    grid-template-rows: repeat(3, min-content);
}

/* create OVER for thesis-block */
.thesis-archive .thesis-block {
    display: grid;
    grid-template-columns: 0.35fr 0.65fr;
    margin-left: 1.5rem;
    transition: background-color 0.3s ease-in-out, width 0.3s ease-in-out;
}

.thesis-archive .thesis-block:hover {
    background-color: #ff8fb7;
}

/* end of HOVER */

/* create hover for first-child - change background-color */
.thesis-archive .thesis-block:first-child {
    background-color: #f8f4ec;
}

.thesis-archive .thesis-block:first-child:hover {
    background-color: #ff8fb7;
}

/* end of hover */

.thesis-archive>.thesis-block>.thesis-img {
    max-width: 100%;
    height: auto;
    margin: 1rem;
}

.thesis-archive>.thesis-block>.thesis-text {
    margin: 2rem;
    align-content: center;
}

.thesis-archive>.thesis-block>.thesis-text>h3 {
    padding: 0 0 0.5rem 0;

}

/* End of THESIS */

/* FOOTER - Start for Footer section */
footer {
    grid-column: full-start / full-end;
    display: flex;
    flex-direction: row;
    background-color: #fff;
    font-size: smaller;
    border-top: 1px solid #e7e7e7;
    justify-content: space-between;
    padding: 1rem 0 2rem 0;
    color: #8d8d8d;
}

footer>p {
    margin-left: 1.5rem;
}

footer>ul {
    display: flex;
    list-style: none;
}

footer>ul>li {
    margin-right: 1rem;
}

footer>ul>li:last-child {
    margin-right: 1.5rem;
}

/* End of Footer section */


/* !IMPORTANT - Hide <nav> mobile in Desktop view - !IMPORTANT */
#nav-mobile,
.events>.event-block>.event-img-mobile {
    display: none;
}

/* Hide events mobile */


/** ********************** **/
/** End of Desktop Section **/


/* TODO - DONE */

/** Start of Mobile Section **/
/** *********************** **/

/* if the width of screen is 640px and below (aka 40rem x 16px) */
@media screen and (max-width: 40rem) {

    /* @media Start of NAV BAR */
    nav,
    .practice {
        display: none;
    }

    #nav-mobile {
        display: flex;
        justify-content: space-around;
        height: 4rem;
        align-items: center;
        grid-column: full-start / full-end;
    }

    /* NAV BAR Menu links styling using SVG + transition*/
    .mobile-menu a img {
        width: 100%;
        height: auto;
    }

    #nav-mobile>a>img {
        filter: invert(0);
    }

    #nav-mobile>a>img:hover {
        filter: invert(1);
        transition: filter 0.3s ease;
    }

    /* End of NAV BAR */


    /* @media Start of header */
    header {
        display: grid;
        grid-column: full-start / full-end;
    }

    .imagecontainer {
        padding: 0;
    }

    header>div {
        display: block;
        padding: 2rem 2rem 2rem 2rem;
    }

    header>div>h1 {
        padding: 0 0 2rem 0;
        font-size: 3rem;
        line-height: 1.1;
    }

    header>div>h2 {
        font-size: x-large;
        font-weight: lighter;
        padding: 0 0 1.5rem 0;
    }

    header>div>a {
        font-size: large;
        font-weight: normal;
        margin: 0;
    }

    /* End of header */

    /* @media Start of events */
    .events {
        display: grid;
        grid-column: full-start / full-end;
    }

    .events>.event-block {
        display: flex;
        flex-direction: column;
        padding: 1rem 1rem 1rem 1rem;
    }

    .events>.event-block:first-child>img {
        margin-top: 0;
    }

    .events>.event-block>.event-text {
        width: 100%;
        height: 100%;
    }

    .events>.event-block>.event-text>h3 {
        font-size: x-large;
        padding-left: 1rem;
    }

    .events>.event-block>.event-text>p,
    .events>.event-block>.event-text>a {
        font-size: large;
        font-weight: lighter;
        padding-left: 1rem;
    }

    .events>.event-block>.event-text>a {
        padding-bottom: 2rem;
    }

    .events>.event-block>img {
        display: none;
    }

    .events>.event-block>.event-img-mobile {
        display: block;
    }

    .events>.event-block:last-child {
        background-color: #fff;
        border-bottom: 1px solid #e7e7e7;
    }

    .events {
        border-left: none;
    }

    /* End of events */


    /* @media Start of learning */
    .learning {
        background-color: #f8f4ec;
    }

    .learning-card {
        background-color: #ff8fb7;
    }

    .learning-card:hover {
        background-color: #e83c91;
    }

    .learning-card>.learning-image,
    .learning-card>.learning-details>p {
        display: none;
    }

    /* End of learning */



    /* @media Start of thesis */
    .thesis-container1 {
        grid-template-columns: auto;
    }

    .thesis-container2 {
        grid-template-columns: 1fr;
    }

    .thesis-archive {
        display: none;
    }

    .thesis-box>.thesis-media>video {
        max-width: 100%;
        height: auto;
        padding: 0;
    }

    .thesis-box>.thesis-media-text>h1 {
        font-size: xx-large;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .thesis-box>.thesis-media-text p {
        font-size: medium;
        font-weight: lighter;
        line-height: 1.5rem;
    }

    /* End of thesis */

    /* @media Start of footer */
    footer {
        padding: 1rem 0 1rem 0;
    }

    footer>ul {
        display: none;
    }

    .learning-grid {
        display: flex;
        flex-direction: column;
        margin: 0 3rem 4rem 3rem;
    }

    /* End of footer */
}


/* *********************** */
/** End of Mobile Section **/