@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f3ecec;
    font-family: "Lato", serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1em;
    height: 100%;
}

body.debug div[data-layout] * {
    border: 1px solid red;
}

body.debug div[data-layout] article {
    overflow: visible;
}

/* startpage ****************************************************************************/

.startpage {
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 50vw;
    margin: 0 auto;
    font-size: 1.7em;
    user-select: none;
}

@media only screen and (orientation: portrait) {
    .startpage {
        width: 90vw;
    }
}

.startpage label {
    cursor: pointer;
}

.startpage li {
    list-style: none;
    margin: 0;
    padding: .1em;
}

.startpage li.tab-1 {
    margin-left: 1em;
}

.startpage li.tab-2 {
    margin-left: 2em;
}

.startpage li.tab-3 {
    margin-left: 3em;
}

.startpage li:first-child {
    opacity: .3;
}

.tag {
    color: blue;
}

.tag::after {
    content: ">";
}

.tag.close::before {
    content: "</";
}

.tag.single::after {
    content: "/>";
    margin-left: .25em;
}

.tag::before {
    content: "<";
}

.tag::before,
.tag::after {
    display: inline-block;
    color: #c5c5c5;
}

.tag.comment::before {
    content: "<!--";
    color: #999;
}

.tag.comment::after {
    content: "-->";
    color: #999;
}

.tag.comment {
    color: #999;
    margin-top: 0.5em;
}

/* presentation *************************************************************************/

div[data-layout] {
    margin: 0;
    padding: 3.3em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: calc(100% - 6.6em);
    background: radial-gradient(#ffffff, #f0f1ff);
    color: #333;
}

div[data-layout].contrast {
    background: radial-gradient(#000, #101010);
    color: #fff;
}

div[data-layout] article {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
}

div[data-layout] aside {
    align-self: flex-end;
    padding: 0;
}

@keyframes timer {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1.0);
    }
}

time {
    position: fixed;
    bottom: 1em;
    right: 1em;
    background-color: #fff;
    border-radius: .33em;
    color: #000;
    padding: .33em;
    font-family: monospace;
}

time[data-minutes="1"] {
    background-color: orange;
    animation: infinite timer 2s;
}

time[data-minutes="0"] {
    color: #fff;
    background-color: red;
    animation: infinite timer 1s;
}

/* landscape ****************************************************************************/

div[data-layout="1/2 fullscreen"],
div[data-layout="2/3 fullscreen"],
div[data-layout="1/3 fullscreen"],
div[data-layout="fullscreen"] {
    padding: 0;
    height: 100%;
}

div[data-layout="1/3 fullscreen"] main,
div[data-layout="1/3"] main {
    width: calc(34vw - 3.3em);
    height: calc(100vh - 6.6em);
    border-radius: .5em;
}

div[data-layout="1/3 fullscreen"] main {
    border-radius: 0;
    height: 100vh;
}

div[data-layout="1/3 fullscreen"] main+aside {
    width: calc(66vw - 6.6em);
    margin: 0 0 3.3em 3.3em;
}

div[data-layout="1/3"] main+aside {
    width: calc(66vw - 3.3em);
    margin: 3.3em;
}

div[data-layout="2/3 fullscreen"] main,
div[data-layout="2/3"] main {
    width: calc(67vw - 3.3em);
    height: calc(100vh - 6.6em);
    border-radius: .5em;
}

div[data-layout="2/3 fullscreen"] main {
    border-radius: 0;
    height: 100vh;
}

div[data-layout="2/3 fullscreen"] main+aside {
    width: calc(33vw - 3.3em);
    margin: 0 0 3.3em 3.3em;
}

div[data-layout="2/3"] main+aside {
    width: calc(33vw - 6.6em);
    margin: 3.3em;
}

div[data-layout="1/2 fullscreen"] main,
div[data-layout="1/2"] main {
    width: calc(50vw - 3.3em);
    height: calc(100vh - 6.6em);
    border-radius: .5em;
}

div[data-layout="1/2 fullscreen"] main {
    border-radius: 0;
    height: 100vh;
}

div[data-layout="1/2 fullscreen"] main+aside {
    width: calc(50vw - 3.3em);
    margin: 0 0 3.3em 3.3em;
}

div[data-layout="1/2"] main+aside {
    width: calc(50vw - 6.6em);
    margin: 3.3em;
}

div[data-layout="fullscreen"] main {
    width: 100vw;
    height: 100vh;
}

div[data-layout="fullscreen"] main+aside {
    width: 34vw;
    position: absolute;
    z-index: 1;
    bottom: 3.3em;
    right: 3.3em;
}

/* portrait *****************************************************************************/

@media only screen and (orientation: portrait) {

    div[data-layout] article {
        flex-direction: column;
        height: 100%;
        font-size: xx-large;
    }

    div[data-layout="1/3 fullscreen"] main,
    div[data-layout="1/3"] main {
        height: 34vh;
        width: calc(100vw - 3.3em);
        border-radius: .5em;
    }

    div[data-layout="1/3 fullscreen"] main {
        border-radius: 0;
        width: 100vw;
    }

    div[data-layout="1/3 fullscreen"] main+aside,
    div[data-layout="1/3"] main+aside {
        width: calc(100vw - 6.6em);
    }
    
    div[data-layout="1/3 fullscreen"] main+aside {
        width: calc(100vw - 1em);
        padding: 2em .5em;
    }

    div[data-layout="2/3 fullscreen"] main,
    div[data-layout="2/3"] main {
        height: 67vh;
        width: calc(100vw - 3.3em);
        border-radius: .5em;
    }

    div[data-layout="2/3 fullscreen"] main {
        border-radius: 0;
        width: 100vw;
    }

    div[data-layout="2/3 fullscreen"] main+aside,
    div[data-layout="2/3"] main+aside {
        width: calc(100vw - 6.6em);
    }

    div[data-layout="2/3 fullscreen"] main+aside {
        width: calc(100vw - 1em);
        padding: 2em .5em;
    }

    div[data-layout="1/2 fullscreen"] main,
    div[data-layout="1/2"] main {
        height: 50vh;
        width: calc(100vw - 3.3em);
        border-radius: .5em;
    }

    div[data-layout="1/2 fullscreen"] main {
        border-radius: 0;
        width: 100vw;
    }

    div[data-layout="1/2 fullscreen"] main+aside,
    div[data-layout="1/2"] main+aside {
        width: calc(100vw - 6.6em);
    }

    div[data-layout="1/2 fullscreen"] main+aside {
        width: calc(100vw - 1em);
        padding: 2em .5em;
    }

    div[data-layout="fullscreen"] main+aside {
        height: 34vw;
        width: calc(100vw - 6.6em);
    }
}

/* elemenet *****************************************************************************/

div[data-layout] main.image {
    background-image: var(--image);
    background-size: cover;
}

div[data-layout] main.video {
    overflow: hidden;
}

div[data-layout] main.video video[data-fill="1"] {
    width: 100vw;
    height: auto;
}

div[data-layout] main.video video[data-fill="2"] {
    width: 125vw;
    height: auto;
}

div[data-layout] main.video video[data-fill="2"] {
    transform: translateX(var(--offset));
}

div[data-layout="fullscreen"] main.video video[data-fill="2"] {
    transform: translateX(0);
}

@media only screen and (orientation: portrait) {
    div[data-layout] main.video video[data-fill="2"],
    div[data-layout] main.video video[data-fill="1"] {
        width: auto;
        height: 100vh;
    }
}