@font-face {
  font-family: PixelatedEleganceRegular;
  src: url('PixelatedEleganceRegular-ovyAA.ttf');
}

html {
    
    background-image: url("images/sabero.png");
    font-family: PixelatedEleganceRegular; 
}


.foreground {
    width: 100%;
    height: 100%;
    margin: auto;
}

.main {
    background-image: url(images/metro.jpg);
    width: 1000px;
    height: 830px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5%;
    
}
.button {
    background-color: #ffffff;
    color: #000000;
    border-radius: 20px;
    font-size: medium;
    font-family: PixelatedEleganceRegular; 
    width: 90%;
    height: 87PX;
    margin-left: 5%;
    margin-bottom: 5%;
    overflow: hidden;
}
.column {
    float: left;
    background-color: #0965b6;
    height: 498px;
}
.Title {
    
    font-size: 200%;
    align-content: center;
    text-align: center;
    color: aliceblue;
}
.marquee {
border-radius: 20px;
display: flex ;
overflow: hidden ;
white-space: nowrap ;
width: 100% ;
}
.marque {
    
border-radius: 20px;
display: flex ;
overflow: hidden ;
white-space: nowrap ;
width: 100% ;
}
.marquee__item {
color: #000000;
background-color: greenyellow;
animation-duration: 10s ;
animation-iteration-count: infinite ;
animation-name: marquee-content ;
animation-timing-function: linear;
padding: 5px 15px 5px 15px ;
width: 100%;
}
.marque_item {
color: chartreuse;
animation-duration: 5s ;
animation-iteration-count: infinite ;
animation-name: marque;
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
padding: 5px 15px 5px 15px ;
width: 100%;
    
}

.marquee:hover .marquee__item {
    
animation-play-state: paused ;
}


@keyframes marquee-content {
			from {
				transform: translateX( 0% );
			}
			to {
				transform: translateX( 100% );
			}
		}
@keyframes marque{
			from {
				transform: translateX( 100% );
			}
			to {
				transform: translateX( 0% );
			}
		}
.placeholder {
    
    background-image: url(images/sabero.png);
    animation: backgroundmotion 120s linear infinite;
}
@keyframes backgroundmotion {
    
    from { background-position: 0 0;}
    to {background-position: 100% 100%}
    
}

#tape {
    
    background-color: white;
    height: 50%;
    width: 100%;
}
#gifs {
    
    float: inline-end;
    /*background-color: antiquewhite ;*/
    height: 8%;
    width: 100%;
    align-content: center;
    
}
#one {
    
    background-image: url(images/giphy3.gif);
    mix-blend-mode: luminosity ;
    width: auto;
    height: 15%;
    margin-bottom: 41.5px;
}
#two {
    
    height: 60%;
    margin-bottom: 41.5px;
}
#three {
    height: 15%;
    background-color:black;
    padding: auto;
}
#four {
    
    width: 80%;
    height: 100%;
    margin: auto;
}
#five {
    
    width: 20%;
    margin-right: 25px;
}
#six {
    width: 77.5%;
}
#seven{
    background-color: blue;
    width: 98%;
    height: 49%;
    font-size: 75%;
    padding: 1%;
}
#eight {
    
    width: 80%;
    height: 100%;
    margin: auto;
}
#nine {
    
    height: 95%;
    width: 90%;
    margin: auto;
    margin-top: 5%;
    background-image: url(images/giphy2.gif);
    
    
}
#ten {
    height: 15%;
    width: 100%;
    background-image: url(images/giphy6.gif);
    mix-blend-mode: luminosity;
    margin: auto;
    /* margin-bottom: 2.5%;*/ 
    
}
#eleven {
    height: 83%;
    width: 50%;
    float: left;
    background-color: #d22a1f;
    padding: 5px;
}
#twelve {
    
    height: 85%;
    width: 48.7%;
    float: left;
}
#thirteen {
    padding: 2.5%;
    background-color: #460017;
    color: aliceblue;
    height: 50%;
    width: 95%;
    /* margin-left: -2.5%; */
    float: left;
    font-size: 65%;
}
#fourteen {
    height: 35%;
    width: 100%;
    float: left;
    margin-top: 2.5%;
}
#fifteen {
    
    background-image: url(images/city.png);
    height: 49%;
    width: 100%;
    overflow: hidden;
    float: left;
    display: list-item;
}