@font-face {
    font-family: bingo_numbers;
    src: url(bingo_numbers.ttf);
}
@font-face {
    font-family: roboto;
    src: url(roboto_medium.ttf);
}

:root {
  --sudoku-red: #EB3B4E;
  --sudoku-darkred: #C91F2E;
}

body {
    background-color: #ffffff;
    color: black;
    font-family: roboto;
    font-size: 1em;
}
h1 {
	color: var(--sudoku-red);
    font-family: bingo_numbers;
    font-size: 3em;
    font-weight: bold;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}
h2 {
    color: black;
    font-family: bingo_numbers;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1em;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}
h3 {
    font-size: 1.125em;
    font-weight: normal;
    margin-top: 0.6em;
    margin-bottom: 0.6em;   
}
h4 {
	color: var(--sudoku-darkred);
    font-family: bingo_numbers;
    font-size: 1.25em;
    font-weight: normal;
    margin-top: 1.25em;
    margin-bottom: 0.6em;   
}
h5{
	color: black;
    font-family: bingo_numbers;
    font-size: 1.25em;
    font-weight: normal;
    margin-top: 1.5em;
    margin-bottom: 0.6em;   
}

table {
	border:none;
	text-align:center;
    font-size: 1em;
	color:inherit;
}

a {
	color: var(--sudoku-darkred);
	text-decoration: none;
}

a:hover {
	color: var(--sudoku-red);
	text-decoration: none;	
}

.p1{
	text-align:center;
}

#footerDiv{
	color:#888888;
    font-size: 0.75em;
	padding:1em; 
	margin-top:2em;
}

.linksList {
    line-height: 1.9em;
}
.linksList img{
    vertical-align: middle;
    margin-right: 0.65em;
}


/*
for div id=
#intro {
    font-size: 1.3em;
}

for div class=
.colorful {
    color: orange;
}
*/