
body {

	background: url(images/background.jpg) !important;
	background-repeat: repeat !important;
  background-position: 0 0 !important;
  background-size: cover !important;
}

.container-fluid {
    padding-top: 0px;
    width:100%;
    padding:0px;
    text-align: center!important;
    margin-top: auto;
    margin-bottom: auto;
}

.row {
	margin: 0 auto;
	padding: 0px 0 10px 0;
	width: 50%;

}

.row .quiz { 
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: center;
  height:100px;

  background-image: linear-gradient(
    to bottom,
    rgb(255 255 0 / 10%),
    rgb(0 0 0 / 100%)
  ), url("images/quiz.jpg");
  background-size: cover;
  border-radius: 15px;

  
  &::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(255, 255, 128, .2);
    border-radius: 15px;
  }
}

h1 {
  position: relative;
  color: #fff;  
  font-size: 3rem;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;

}

.row .memory { 
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: center;
  height:100px;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 0 / 10%),
    rgb(0 0 0 / 100%)
  ), url("images/memory.jpg");
  background-size: cover;
  border-radius: 15px;

  
  &::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(255, 255, 128, .2);
    border-radius: 15px;
  }
}

.row .tictactoe { 
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: center;
  height:100px;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 0 / 10%),
    rgb(0 0 0 / 100%)
  ), url("images/tictactoe.jpg");
  _background-position: 200px 150px;
  background-size: cover;
  border-radius: 15px;

  
  &::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    _background-color: rgba(255, 255, 128, .4);
    border-radius: 15px;
  }
}

.logo img{
	padding: 5px 10px 5px 10px;
	width:50%;
	border-radius: 10px;
  background-color: white;
}


@media screen and (max-width: 470px) {
	.logo img{
		padding: 5px 0 5px 0;
		width:60%;
	}

  .row {
    margin: 0 auto;
    padding: 0px 0 10px 0;
    width: 90%;

  }

}

a {
	text-decoration: none;
}

a:hover {
	opacity: 0.9;
}

h2 {
	float:left;
	
}

/*a h1 {
	color: white;
}*/
