body > main {

    position: relative;
    top: 0rem;
    right: 0;
    left: 0;
    font-size: 1.6rem;
    margin: 0 auto;
    max-width: 96rem;
    
    > article {
	/* background: $bg-txt-ps-on; */
        background-color: $bg-main;
	margin: 0 auto;
	max-width: 60rem;
	min-height: calc(100vh - 24rem);
	height: auto;
	padding: 12rem 9rem;	
    }

}

article {
    > header {
	p {
	    font-size: 2rem;
	    line-height: 1.25;
	    font-family: $serif;
	    text-variant: italic;
	    /* padding: 2rem 4rem; */
            padding: 0rem 4rem;
	    text-align: justify;

            &:last-child {
	        padding-bottom: 2rem;
	    }
	}
    }

    section:after {
	display: table;
	content: "";
	clear: both;
	margin-bottom: 2rem;
    }

    aside {
	
	ul {
	    display: table;
	    position: relative;
	    list-style: none;
	    margin: 0 -8rem 1rem -8rem;
	    width: calc(100% + 16rem);
	    
	    li {
		display: table-cell;
		text-align: center;
	    }

	    img {
		display: block;
                background-color: black;
		width: 16rem; /* 16:9 for video */
		height: 9rem;
		margin: 1rem auto;
	    }
	}
    }

    .intro {
	background-color: rgba(255, 255, 255, 0.1);
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
	height: auto;
	max-height: 2rem;
	margin: 2rem;
	padding: 2rem;
	overflow: hidden;
	text-overflow: ellipsis;
	
	p {
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}

	&:hover {
	    max-height: 100vh;
	    p {
		white-space: normal;
		overflow: auto;
	    }
	}
    }

    .outro {
	p {
	    font-size: 2rem;
	    text-align: justify;
	}
    }

    video, iframe {
	max-width: 100%;
    }

    .video {
	margin: 0 -6rem 0 -4rem;
	
	video {
	    width: 30rem;
            height: 18.875rem;
	    background: black;
	    float: left;
	    margin: 0 2rem 0 -4rem;
	}
	p {
	    line-height: 1.25;
	}
	&:hover {
	    video, iframe {
	        width: 68rem;
                height: 38.25rem;
	        float: none;
                margin: auto;
	    }
/*	    video {
		width: calc(100% + 6rem);
		height: auto;
		float: none;
	    } */
	}
    }
}

section {
    h2 + h3 {
	font-size: 2.5rem;
	font-style: italic;
	margin-top: -2rem;
    }
}

article {
    #intro h2 {
	transform: rotate(270deg) translate(13.6rem, -34rem);
    }

}

span.note {
    font-size: smaller;
    padding-left: 1rem;
    display: none;
}
:hover + span.note {
    display: inline;
}

#lang-switch {
    background-color: rgba(240, 240, 242, 0.3);
}

/* Hide elements with display attribute set to none: display="none" */
[display=none] {
    display: none;
}