julia-r

body {
background-color: black;
}

#preload {
        display: block;
        background-color: #fff;
        box-shadow: 0 0 3px 3px #fff, 0 0 2px 2px #fff;
        border-radius: 50%;
        width: 2px;

julia-r

body {
background-color: black;
}

#preload {
        display: block;
        background-color: #fff;
        box-shadow: 0 0 3px 3px #fff, 0 0 2px 2px #fff;
        border-radius: 50%;
        width: 2px;

julia-r

/**
 * The first commented line is your dabblet’s title
 */

.wrapper-video-bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;

julia-r

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

julia-r

/**
 * The first commented line is your dabblet’s title
 */

.container {
	display: flex;
	border: solid 1px red;
	//overflow: scroll; 
	//resize: both;
}

julia-r

*{
	--footer-height: 30px;
}

#container {
	height: calc(100vh - var(--footer-height));
}

footer {
	height: var(--footer-height);

julia-r

#container {	}

footer { }



#container {
	background-color: skyblue;
	margin: 0;
	padding: 0;	

julia-r

#container {	}

footer { }



#container {
	background-color: skyblue;
	margin: 0;
	padding: 0;	

julia-r

/**
 * CSS Grid Layout
 * Source: https://codepen.io/mozilladevelopers/pen/GMjwvG
 */

.container {  
	display: grid;  
	width: 750px;  
	height: 600px;  
	grid-template-columns: 200px 1fr 1fr;  

julia-r

/** 
 * CSS Grid
 */

.container {  
	display: grid;  
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(5, 1fr);
}