html {
    font-family: 'Roboto';
    font-style: normal;
    text-transform: none;
    color: white;
    background-image: url('clbg2.png');
    background-image: image-set(
        url('clbg2.avif') type('image/avif'),
        url('clbg2.webp') type('image/webp'),
        url('clbg2.png') type('image/png')
    );
}

h1 {
    margin-top: 15px;
    margin-bottom: 0;
	font-family: 'Chapaza';
    font-style: normal;
    font-size: 75px;
	color: #ffc029;
	letter-spacing: 1px; 
	
}

.season {
	font-family: 'Roboto';
	font-style: normal;
    font-size: 30px;
}

.heroes {
    margin-top: 30px;
	font-family: 'Chapaza';
    font-weight: bold;
    font-size: 200%;
	color: #ffd369
}

.subtitle {
    font-family: 'Chapaza';
    text-transform: none;
    font-size: 40px;
	color: white;
}

.vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.horizontal {
    display: flex;
    flex-direction: row;
}

.game {
    margin: 10px 20px 10px 20px;
    width: 365px;
}

.gametitle {
    text-align: center;
	margin-bottom: 5px;
	color: #ffd369;
	font-weight: bold;
	
}

.winner {
    height: 20px;
    font-size: 17px;
    font-family: 'Roboto';
	text-transform: capitalized;
    color: lightgreen;
}

.vs {
    margin-top: 45px;
    font-family: 'Roboto';
	font-style: italic;
	font-size: 19px;
    color: #e9454b;
}

.team {
    width: 150px;
}

.rightalign {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.hero {
    margin: 30px;
	font-family: 'Roboto';
	font-weight: bold;
}

.hero:nth-of-type(1) {
    padding-top: 0px;
}

.hero:nth-of-type(3) {
    padding-top: 0px;
}

.first {
    height: 130px;
    object-fit: contain;
    border: solid gold 2px;
}

.second {
    height: 130px;
    object-fit: contain;
    border: solid #c8c8c8 2px;
}

.third {
    height: 130px;
    object-fit: contain;
    border: solid #934a19 2px;
}

.teampic {
    height: 90px;
    width: 120px;
    object-fit: contain;
    border: solid white 1px;
}

.teamname {
	margin-top: 2px;
    font-size: 12px;
}

.player {
	margin: 20px 10px 20px 10px;
    width: 200px;
	font-family: 'Roboto';
	font-weight: bold;
}

.playerimgs {
    border: solid red 2px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 2px 0;
}

.win {
    border: solid lime 2px;
}

.playerpic {
	height: 100px;
    width: 100px;
    object-fit: contain;
}

.heroportrait {
    height: 56px;
    object-fit: contain;
}

.playerimgs a {
    display: flex;
}

.playername {
    margin-top: 4px;
}

br {
    display: block;
    margin-top: 10px;
}