/* Repeat 6 1fr rows named "row" and 6 1fr columns named "col" */

body,td,th {
	font-family: "Averia Serif Libre", cursive;
}
body {
	background-image: url(images/smback.png);
	background-repeat: repeat;
}
a:link {
	color: #F90004;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #F90004;
}
a:hover {
	text-decoration: underline;
	color: #E16365;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}

.header{
    display: grid;
    grid-template: repeat(4, [col] 1fr);
    grid-gap: 10px;
    padding: 5px;
}
.col1 {
	grid-column: col 1;
}
.col2 {
	grid-column: col 2;
}

.col3 {
	grid-column: col 3;
}

.col4 {
	grid-column: col 4;
}


.grid-container {
    display: grid;
    grid-template: repeat(6, [row] 1fr) / repeat(6, [col] 1fr);
    grid-gap: 10px;
    padding: 5px;

}

.item-1 {
	grid-column: col 1 / span 3;
    grid-row: row 1 / span 2;
    z-index: 1;
	
	border-color:#FF0000;
	border-style:solid;
	border-radius: 10px;
	padding: 15px;
}

.item-2 {
    grid-column: col 3 / span 4;
    grid-row: row 2 / span 3;
    z-index: 2;

	border-color:#FF0000;
	border-style:solid;
	border-radius: 10px;
	padding: 15px;
}

.item-3 {
    grid-column: col 5 / span 2;
    grid-row: row 1 / span 5;
    z-index: 3;
	
	border-color:#FF0000;
	border-style:solid;
	border-radius: 10px;
	padding: 15px;
}

.item-4 {
    grid-column: col 2;
    grid-row:  row 2 / span 4;
    z-index: 4;
	
	border-color:#FF0000;
	border-style:solid;
	border-radius: 10px;
	padding: 15px;
}

.item-5 {
    grid-column: col 1 / span 3;
    grid-row: row 4 / span 3;
    z-index: 5;
	
	border-color:#FF0000;
	border-style:solid;
	border-radius: 10px;
	padding: 15px;
}

.item-6 {
    grid-column: col 4 / span 3;
    grid-row: row 5 / span 2;
    z-index: 6;
	
	border-color:#FF0000;
	border-style:solid;
	border-radius: 10px;
	padding: 15px;
}