@import url("./reset.css");
@import url("./base.css");
@import url("./header.css");
@import url("./footer.css");

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

main {
    min-height: 768px;
    width: min(100%, 1024px);
}

.grid {
    display: grid;
    grid-template: repeat(2, 1fr) / repeat(2, 1fr);
    grid-gap: 1rem;
    padding: 1rem;
    width: 100%;
    height: 512px;
}

:root {
    --shadow-color: rgba(0, 0, 0, 0.1);

}

.dark-mode {
    --shadow-color: rgb(255, 255, 255, 0.1);
}

.card {
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    position: relative;

    display: flex;
    flex-direction: column;

    cursor: pointer;

    transition: box-shadow 0.3s, transform 0.3s, scale 0.3s;
    background: var(--body-color);

    user-select: none;
    -webkit-user-select: none;

    &:hover {
        scale: 1.005;
        box-shadow: 0 0 10px var(--shadow-color), 0 0 20px var(--shadow-color);

        a {
            color: var(--primary-color-content);
            background: var(--primary-color);
            padding: 0 0.25rem;
        }
    }

    header {
        padding: 1rem;
    }

    p {
        padding: 1rem;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }


    a {
        /* color: var(--menu-link-color, #5a5d60); */
        position: absolute;

        bottom: 1rem;
        right: 1rem;

        color: var(--primary-color);
        text-decoration: none;
        transition: color 0.3s;
        transition: padding 0.3s;
    }
}


:root {
    --gradiend-color-start: rgba(255, 255, 255, 0.4);
    --gradiend-color-end: rgba(255, 255, 255, 0);
}

.dark-mode {
    --gradiend-color-start: rgba(0, 0, 0, 0.4);
    --gradiend-color-end: rgba(0, 0, 0, 0);
}

.card-mobile {
    background-image: linear-gradient(var(--gradiend-color-start) 20%, var(--gradiend-color-end) 80%), url('../img/mobile/screen.png');
}

.card-console {
    background-image: linear-gradient(var(--gradiend-color-start) 20%, var(--gradiend-color-end) 80%), url('../img/console_screen_250px.png');
}

.card {
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
}

main>section {
    max-width: calc(1024px + (50vw - 512px - 18rem));
    align-self: flex-start;
    justify-self: flex-start;
}


main section img {
    max-width: 90%;
    height: auto;
    margin: 2rem auto 5rem auto;
    display: block;

    cursor: zoom-in;
    transition: transform 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    /*prevent drag*/
    -webkit-user-drag: none;

    /* soft shadow */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1);
}

main section img:active {
    transform: scale(1.75);
}

main section video {
    margin: 2rem auto 5rem auto;
    display: block;
    /* soft shadow */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1);
}

main ul {
    list-style-type: disc;
    padding: 0;
    margin: 0;
}

main ul li {
    margin: 1rem 0;
    line-height: 1.75rem;
}

p {
    line-height: 1.75rem;
}

h3 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem 0;
}

aside {
    padding: 1rem;

    position: fixed;
    right: 1rem;
    top: 6rem;

    width: 16rem;

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
}


aside h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--menu-link-color, #5a5d60);
    opacity: .4;
}

aside ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
}

aside ul li {
    display: flex;
}

aside ul li a {
    color: var(--menu-link-color, #5a5d60);
    font-weight: bold;
    padding: 1.5rem 0;
}

aside ul li a.active {
    color: var(--menu-link-hover-color, hsl(200, 72%, 55%));
    border-left: 2px solid var(--menu-link-hover-color, hsl(200, 72%, 55%));
    padding-left: 1rem;
}

/* Dark mode styles */
.dark-mode aside {
    --menu-bg-color: #07253e;
    --menu-border-color: #555;
    --menu-link-color: #f1f1f1;
    --menu-link-hover-color: #74C0FC;
}


@media screen and (max-width: 1023px) {
    h1 {
        margin-left: 1rem;
    }

    main {
        width: unset;
    }

    aside {
        display: none;
    }
}