@font-face {
    font-family: 'material symbols outlined';
    src: url(fonts/icon.ttf) format('truetype');
}

@font-face {
    font-family: 'Josefin';
    src: url(fonts/Josefin.ttf) format('truetype');
}

* {
    padding: 0;
    margin: 0;
}

html {
    font-size: 16px;
}

body {
    max-width: 1024px;
    margin: auto;
}

.icon {
    font-family: material symbols outlined;
    font-size: 1.5rem;
    padding: 0.2rem 0.4rem;
    font-variation-settings:
        'FILL' 1
}

img {
    max-width: 100%;
    margin: auto;
}

li {
    list-style-type: none
}

button {
    padding: 0.5rem 1rem;
    background-color: #6b8dcb;
    color: #fff;
    border: none;
    border-radius: 0.5rem;

}

.noneM,
.inter .noneM {
    display: none
}

header {
    position: sticky;
    top: 0;
    background-color: #fff;
    display: grid;
    grid-gap: 0.5rem 1rem;
    grid-template-columns: auto minmax(50vw, auto) auto;
    grid-template-areas: 'menu logo log'
        'date logo nasdaq'
        'today logo nasdaq';
    padding: 0.5rem 1rem;
}

.menu {
    grid-area: menu;
}

.log {
    align-items: end;
    grid-area: log;
    display: flex;
    gap: 1rem;
    flex-direction: row;
    justify-content: flex-end;
}

.date {
    grid-area: date
}

.logo {
    grid-area: logo
}

.nasdaq {
    grid-area: nasdaq;
    text-align: end;
}

nav {
    display: none;
}





/* MAIN */

main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}


article,
H2 {
    padding: 1rem;
    border-bottom: 1px solid #00000040;
}

.asideContent article {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



@media (min-width:768px) {

    .noneD {
        display: none;
    }

    .noneM {
        display: block;
    }

    header {
        position: static;
        grid-gap: 1rem;
        grid-template-columns: auto minmax(0, 30rem) auto;
        grid-row: auto 1fr 4fr;
        grid-template-areas:
            'menu inter log'
            'date logo nasdaq';
        padding: 1rem
    }

    .inter {
        grid-area: inter;
        display: flex;
        justify-content: center;
        gap: 1rem
    }

    main {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 2.5fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            'nav nav '
            'baner baner'
            'mainContent asideContent';
    }

    nav {
        grid-area: nav;
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        background-color: #fff;
        display: flex;
        gap: 0rem 1rem;
        display: flex;
        height: 3rem;
        justify-content: center;
        align-items: center;
        border-bottom: 4px double #00000060;
    }

    .down {
        background-color: #ffffff;
        padding: 1rem;
        display: none;
        box-shadow: 2px 2px 10px #00000040;
    }

    nav div {
        height: 1.5rem;
        width: 7rem;
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
    }

    nav div span {
        color: #00000060;
        vertical-align: middle
    }

    nav div:hover {
        .down {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            gap: 2rem;
            position: relative;
            top: 0;
            left: 0;
            padding: 4rem;
        }

    }

    h2 {
        grid-area: baner;
    }

    .mainContent {
        grid-area: mainContent;
    }

    .asideContent {
        grid-area: asideContent;
        border-left: 1px solid #00000040;
        padding: 0 1rem;
    }

    .mainContent article {
        display: grid;
        grid-gap: 0.5rem;
        grid-template-columns: 1.5fr 2fr;
        grid-template-rows: auto 1fr auto auto;
        grid-template-areas: 'H1MA imgMA'
            'P1MA imgMA '
            'H2MA imgMA'
            'P2MA imgMA';
    }

    h3 {
        grid-area: H1MA;
    }

    .P1MA {
        grid-area: P1MA;
    }

    h4 {
        grid-area: H2MA;
    }

    .P2MA {
        grid-area: P2MA;
    }

    .mainContent img {
        grid-area: imgMA;
    }
}