* {
	margin: 0;
	padding: 0;
}

body {
    color: rgb(0, 0, 0);
    font-family: 'Glass_TTY_VT220';

}
div.logo{
    background-color: black;
    color: #FFF;

}
.logo h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100px;
    text-align: center;
    color: rgba(255, 255, 255, 0.1);
    background-image: url(./logo/color.jpg);
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    animation: animate 10s linear infinite;
}

    @keyframes animate {
        0%{ background-position: left -1000px top 0px };
        40%{ background-position: left +1000px top 0px };
    }

.empty_space{
    width: 100px;
}

.container {
        display: flex;
        align-content: space-around;
        
        
}
.container div{
        display: block;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
        width: 1fr;
        box-shadow: black 2px;

}

.container img {
        border-radius: 10px;
        width: 60%;

}
div.overlay {
		position: absolute;
		border-radius: 5px;
		bottom: 100%;
		left: 0;
		right: 0;
		background-color: rgb(0, 0, 0);
		overflow: hidden;
		width: 30%;
		height:0;
		transition: .5s ease;
      }



div.kuva1, div.kuva3{
    width:30%;
    -webkit-box-shadow: 10px 10px 88px 0px rgba(0,0,0,1);
    -moz-box-shadow: 10px 10px 88px 0px rgba(0,0,0,1);
    box-shadow: 10px 10px 88px 0px rgba(0,0,0,1);
}
div.kuva2{
    width: 50%;
    -webkit-box-shadow: 10px 10px 88px 0px rgba(0,0,0,1);
    -moz-box-shadow: 10px 10px 88px 0px rgba(0,0,0,1);
    box-shadow: 10px 10px 88px 0px rgba(0,0,0,1);
}
   


	.kuva1:hover .overlay {
		bottom: 0;
		height: 100%;
	  }
    
      .kuva2:hover .overlay {
		bottom: 0;
		height: 100%;
	  }
      .kuva3:hover .overlay {
		bottom: 0;
		height: 100%;
	  }
	
	  .text {
		white-space: nowrap; 
		color: white;
		font-size: 20px;
		position: absolute;
		overflow: hidden;
		top: 50%;
		left: 50%;
		width: 100%;
		
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	  }