@charset "UTF-8";

/* CSS rules go below */

html, body {
	height: 100%;
}

body{
	margin: 0;
	font-family: "Comic Sans MS", sans-serif;
	color: black;
	background-color: rgb(255, 244, 209);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative; /* allow pseudo-element */
	/* removed direct background-image so ::before can animate */
}

/* floating DVD-style screensaver that bounces around the viewport */
body::before{
    content: "";
    position: fixed;
    /* size of the floating image */
    --dvd-w: 20rem;
    --dvd-h: 12rem;
    width: var(--dvd-w);
    height: var(--dvd-h);
    /* start near top-left */
    top: 1rem;
    left: 1rem;
    background-image: url("../../content/image4.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    /* place behind content but above page background */
    z-index: 0;
    transform-origin: center;
    animation: dvdBounce 12s linear infinite;
    will-change: left, top, transform;
}

/* ensure content sits above the floating image */
.page-wrapper{
	padding: 1rem;
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	z-index: 1;
	position: relative;
}

header, nav, section, footer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	margin-top:2.5vw;
	margin-bottom:2.5vw;
}

h1, h2, p{
	text-align: center;
	max-width: 30rem;
}

h1{
	font-size:4rem;
	margin-bottom:0;
}

.extension-download a{
	font-size:1.5rem;
	padding:1.5rem;
	border-radius: 2rem;
	text-decoration: none;
	border: 1px solid blue;
}

.extension-documentation{
	width:50vw;
}

.extension-reviews-block{
	width:100%;
	max-width: unset;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.extension-review{
	width:25vw;
	padding:1rem;
	margin:1rem;
	border:1px solid black;
	box-sizing: border-box;
}

video, img{
	display: block;
	float:left;
	clear:both;
	width:100%;
	height:auto;
	margin-top:1rem;
	margin-bottom:1rem;
	background-color: black;
}

section.extension-installation ol{
	text-align: left;
}

footer{
	border-top:1px solid black;
}



/* CSS style for mobile devices */

@media (max-width: 780px) {
  	.extension-documentation{
		width:90vw;
	}
	.extension-review{
		width:90vw;
		margin-left:0;
		margin-right:0;
	}
}

/* rectangular bounce path across the screen corners */
@keyframes dvdBounce {
    0%   { left: 2rem;                         top: 2rem;                          transform: rotate(0deg)   scale(1); }
    20%  { left: calc(100vw - var(--dvd-w) - 2rem); top: 2rem;                     transform: rotate(8deg)  scale(1.02); }
    40%  { left: calc(100vw - var(--dvd-w) - 2rem); top: calc(100vh - var(--dvd-h) - 2rem); transform: rotate(-6deg) scale(0.98); }
    60%  { left: 2rem;                         top: calc(100vh - var(--dvd-h) - 2rem); transform: rotate(10deg)  scale(1.01); }
    80%  { left: 2rem;                         top: 2rem;                          transform: rotate(-4deg) scale(1); }
    100% { left: 2rem;                         top: 2rem;                          transform: rotate(0deg)   scale(1); }
}