/* Kleuren */
:root
{
    --bordkleurdonker: #424242;
	--bordkleurmiddeldonker: #808080;
	--bordkleurmiddellicht: #BDBDBD;
	--bordkleurlicht: #C0C0C0;
	--bordkleurwit: #FFFFFF;

    --bordkleurdonkerrgba: rgba(66, 66, 66, 0.75);
}

/* Bord */
.bord
{
	background-color: var(--bordkleurmiddeldonker);
}

.spelspacer
{
    height: 5vh;
}

.spellink
{
    text-decoration: none !important;
}

.spelknop:hover
{
	background-color: #FFFFFF;
}

.spelknop
{
    color: #FFFFFF; 	
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.spelknopkop
{
	font-size: 1.5rem;
	font-weight: bold;
}

.spelknoptekst
{
	font-size: 0.95rem;
}

.spelimage
{
    height: auto;
    display: block;	
	width: 5vw;
	padding: 0.1vw;
}

.ribbon-holder 
{
	overflow: hidden;
	position: relative;
}

.ribbon 
{
	position: absolute;
	font-weight: bold;
	background: yellow;
	color: black;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 5px;
	transform: rotate(45deg);
	text-align: center;
	top: 22px;
	right: -40px;
	width: 145px;
}


/* Mahjong */
.mahjong:hover
{
    color: #9C1818; 	
}

.mahjong
{
	background-color: #9C1818;
}

/* Zeeslag */
.zeeslag:hover
{
    color: #214A73; 	
}

.zeeslag
{
	background-color: #214A73;
}

/* Nonogram */
.nonogram:hover
{
    color: #AD8410; 	
}

.nonogram
{
	background-color: #AD8410;
}

/* Sudoku */
.sudoku:hover
{
    color: #9C4218; 	
}

.sudoku
{
	background-color: #9C4218;
}

/* Mastermind */
.mastermind:hover
{
    color: #5A7B21; 	
}

.mastermind
{
	background-color: #5A7B21;
}

/* Mijnenveger */
.mijnenveger:hover
{
    color: #333; 	
}

.mijnenveger
{
	background-color: #333;
}

/* Sokoban */
.sokoban:hover
{
    color: #08637B; 	
}

.sokoban
{
	background-color: #08637B;
}

/* Yatzy */
.yatzy:hover
{
    color: #005A39;	
}

.yatzy
{
	background-color: #005A39;
}

/* Tetris */
.tetris:hover
{
    color: #4A295A;
}

.tetris
{
	background-color: #4A295A;
}