body{ 
    background: linear-gradient(black, rgb(144, 14, 144)); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    border: 7px solid #e100ff; 
    margin: 0; 
    padding: 5px; 
    animation-delay: 5s; 
    animation-name: welcome; 
    animation-duration: 10s; 
    animation-iteration-count: 1; 
} 

.text{ 
    color:#e100ff; 
    display:flex; 
    justify-content: center; 
    align-items: center; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    text-shadow: 0px 0px 20px #e100ff; 
} 

.textAnim{ 
    color:#e100ff; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    text-shadow: 0px 0px 20px #e100ff; 
    animation-name: Slide; 
    animation-duration: 4s; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.text2{ 
    color: #e100ff; 
    display:flex; 
    justify-content: center; 
    align-items: center; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    text-shadow: 0px 0px 20px #000000; 
    animation-name: Slide; 
    animation-duration:4s; 
} 

a{ 
    text-decoration: none; 
    color:#e100ff; 
} 

a:link, a:active{ 
    color: #e100ff; 
} 

img{ 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    width: 225px; 
    height: 120px; 
    border-color: #e100ff; 
    border: 5px solid; 
    border-radius: 10px; 
    padding: 10px; 
    transition: transform 0.5s ease, box-shadow 0.5s ease; 
} 

img:active{ 
    transform: rotateX(10deg) scale(0.9); 
} 

img:hover{ 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    transform: rotateX(10deg) scale(1.1); 
    box-shadow: 0 20px 50px rgba(225, 0, 255, 0.5); 
} 

.center{ 
    text-align: center; 
} 

.featuredGame{ 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    width: 500px; 
    height: 150px; 
    max-width: 100%; 
    border-color: #e100ff; 
    border: 5px solid; 
    border-radius: 10px; 
    padding: 5px; 
    transition: transform 0.5s ease, box-shadow 0.5s ease; 
} 

.featuredGame:hover{ 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    transform: rotateX(10deg) scale(1.1); 
    box-shadow: 0 20px 50px rgba(225, 0, 255, 0.5); 
} 

.featuredGame:active{ 
    width: 450px; 
    height: 125px; 
    animation-name: hover; 
    animation-iteration-count: infinite; 
    animation-duration: 4s; 
} 

@keyframes Slide{ 
    0% { opacity: 0; transform: translateX(-100px); } 
    100% { opacity: 1; transform: translateX(0); } 
}

@media screen and (max-width: 768px) {
    body {
        border-width: 4px; 
        padding: 2px;
    }
    
    img {
        width: 160px;  
        height: auto;  
        padding: 5px;
    }
    
    .featuredGame {
        width: 90%;    
        height: auto;
    }

    .featuredGame:active {
        width: 85%;    
    }
}