* {
  box-sizing: border-box;
  transition: all 0.2s ease-out allow-discrete;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  vertical-align: middle; 
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  text-align: center;
  padding:30px;
}

.column:hover{
	flex: 45%;
}

.column img {
  margin-top: 8px;
  vertical-align: middle; 
}

.cTop{
	width:100%;
	height:50%;
	background:rgba(95,95,95,0.5);
	display:flex;
	justify-content: center;
	align-items: center;
	border-top-left-radius:20px;
	border:10px solid rgba(0,0,0,0.75);
	border-bottom:none;
	color:black;
}
.cTop:hover{
	background:rgba(125,125,125,0.75);
	color:white;
}

.cBottom{
	width:100%;
	height:50%;
	background:rgba(15,15,15,0.75);
	display:flex;
	justify-content: center;
	align-items: center;
	border-bottom-right-radius:20px;
	border:10px solid rgba(0,0,0,0.75);
	border-top:none;
	color:white;
}
.cBottom:hover{
	background:rgba(5,5,5,0.8);

}

h1{
	font-size:10vh;

}
h4{
	color:white;
}

a:link { 
  text-decoration: none; 
} 
a:visited { 
  text-decoration: none; 
} 

a:active { 
  text-decoration: none; 
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}