@charset "UTF-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto auto repeat(9, 1fr); 
	gap: 5px;
	width: 975px; /* gl standard for fuld side og god læsebredde. Ingen grund til at lave responsive web for denne opgave*/
	height: auto; 
	margin-top:0;
	margin-left: auto;
	margin-right:auto;
}

.grid-item {	
	background-color: #ccc;
	border: 1px solid #eee;
	text-align: center;
	line-height: 50px;
	border-radius: 8px; 
	overflow: hidden; 
}

.header-row {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	  background-image:linear-gradient(to bottom right,#FEA9E4, #C078AA, #C3D84B);
	  color: #fff;
	  grid-column: span 4; 
	  text-align: left;
	  padding: 10px;
	  border-radius: 8px;
	  overflow: hidden;
}

p.author {
	width:100%;
    padding-left: auto;
    padding-right: auto;
    font: 0.5em Arial, Helvetica, serif;
    text-align: center;
}

.header-row h1 {
	margin-top:1.8em;
}

.header-row:has(h1) {
	border-radius: 0 0 8px 8px; 
}

.header-row dd {
	padding-left:1.5em;
}

/* styling til JENOS felt */
.grid-item.JENO {
	padding:10px;
	background-image:repeating-radial-gradient(red, orange, yellow, pink);
	border: 2px solid fuchsia;
	overflow:hidden;
	height:58px;
	text-align: center;
	}
	.grid-item.xiao0581 {
		padding:10px;
		background-image:repeating-radial-gradient(rgb(0, 30, 255), rgb(113, 112, 120), rgb(255, 0, 81), pink);
		border: 2px solid fuchsia;
		overflow:hidden;
		height:58px;
		text-align: center;
		}

.grid-item.JENO p {
	line-height:0.5;
	color:#fff;
	font-family: Times, "Times New Roman", "serif";
	font-size: 12px;
	font-weight:bold;
}

.grid-item.JENO h2 {
	text-transform: uppercase;
	font-size:2em;
	line-height:1;
	color:gold;
}

.grid-item.mads46q8 p {
	background-color: #4688;
	font: 12px;
	border: 2px solid red;
}

.grid-item.lass9753 {
	padding-left: 5px;
	font-size: 1.2em;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	text-align: left;
	background-color: #ff9753;
	color: #fefefe;
}
.lass9753Name {
	font-weight: 400;
}
.lass9753MusicName {
	font-weight: 700;
}