@import 'variables.css';
@import 'colors.css';

@media (min-width: 1400px) {
    body {
        display: grid;
        font-size: var(--typography-font-size);
    }

    #mobileMenu, .device-menu {
        display: none;
    }

    header, main {
        display: block;
    }

    header {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: var(--header-background-shadow);
        background: var(--header-background);
    }

    header a.logo img {
        width: 10rem;
        height: auto;
    }

    main {
        margin: 0;
        padding: 0;
    }

    main article {
        width: 80%;
        margin: 0.25rem 10%;
    }

    img.fullsize {
        width: 100%;
        height: calc(100vh - var(--header-height) - 130px);
        object-fit: cover;
    }

    div.fullsize-box {
        position: absolute;
        top: 200px;
        left: 96px;
        width: 400px;
        padding: 14px;
        border-radius: 4px;
        opacity: 0.9;
        background: white;
    }
}

@media (min-width: 1px) and (max-width: 1399px) {
    body {
        display: block;
        font-size: var(--typography-mobile-font-size);
    }

    .device-haeder {
      margin: 0.25rem;
    }
  
    .device-header svg {
        width: 2.10rem;
        height: auto;
    }

    .device-header img, .device-header svg {
        max-width: inherit;
    }

    .device-header img.logo {
        width: 9rem;
        height: auto;
    }

    .device-header a.sm-icon {
       margin-left: 0.25rem;
    }

    .device-header a.sm-icon img {
       display: inline-block;
       width: 1.5rem;
       height: auto;
       margin-top: 0.5rem;
    }

    #mobileMenu, main {
        display: block;
    }

    .device-header {
        vertical-align: center;
    }

    .device-header svg {
        margin: auto 1rem;
    }

    header, header nav, .device-menu, #scrollToTopBtn {
        display: none;
    }

    main article {
        margin: 0;
        padding: 1rem;
    }

    img.fullsize {
        width: 100%;
        height: auto;
    }

    div.fullsize-box, .fullsize-content {
        position: relative;
        padding: 0.33rem;
    }
}

@media (min-width: 1px) and (max-width: 959px) {
    .full-box, .half-box {
        display: block;
        width: 100%;
        margin: 0 0 1rem 0;
        padding: 0.75rem;
        box-shadow: none;
    }

    main article {
        margin: 0;
        padding: 0.5rem;
    }
}

@media (min-width: 960px) {
    .full-box, .half-box {
        display: inline-block;
    }

    .half-box {
        width: calc(50% - 2rem);
        margin: 0.75rem;
    }
}

/* Design */
/* ================================================================================================================= */
.device-header {
    display: flex;
    width: 100%;
    height: var(--device-header-height);
    align-items: center;
    justify-content: center;
    background: var(--device-header-background);
}

.device-menu {
    height: calc(100vh - var(--device-header-height));
    overflow-y: scroll;
    background: var(--primary-color);
}

.device-menu > div {
    margin-bottom: 0.75rem;
}

.device-menu > div:last-child {
    margin-bottom: 0;
}

.device-menu > div p {
    padding: 0.5rem 0 0.12rem 0.75rem;
    font-weight: bolder;
    color: white;
}

.device-menu > div ul {
    list-style-type: none;
    margin: 0.25rem 0;
    padding: 0.25rem;
    background: var(--secondary-color);
}

.device-menu > div ul li {
    display: grid;
    height: 2.5rem;
    padding-left: 0.75rem;
    grid-template-columns: 1rem auto;
    justify-content: start;
    align-items: center;
}

.device-menu li::before {
    content: ">";
    font-size: 1.1rem;
    color: white;
}

.device-menu > div ul li a, .device-menu > div ul li a:link, .device-menu > div ul li a:visited,
.device-menu > div ul li a:hover, .device-menu > div ul li a:focus, .device-menu > div ul li a:active {
    color: white;
    text-decoration: none;
}

.device-menu > div ul li.active {
    background: var(--action-color);
}

/* ================================================================================================================= */