styles.css

body {
    background: whitesmoke;
}

.navbar-dark {
    background: #00ccff !important;
    color: #38b6ff;
}

.s1:hover{
    transform: scale(1.15);
    transition: 0.5s;
} 

.s2:hover{
    transform: scale(1.15);
    transition: 0.5s;
} 

.s3:hover{
    transform: scale(1.15);
    transition: 0.5s;
} 

.header {
    background-image: url(img/bg-header.png);
    background-position: center;
    color:wheat;
    text-align: center;
    height: 100vh;
    transition: all 0.7s ease 0s;
    transform: translateY(0%);
 }
 .heading {
    color: whitesmoke;
    font-family: 'Dancing Script', cursive;
    position: relative;
    font-size: 20vh;
    height: 80vh;
 }
 .header .row {
     color: wheat;
     margin: 0 0 25px 0 ;
 }

.container .row .card {
    margin: 50px;
    padding: 1px;
    border: 5px solid #38b6ff;    
}

.footer {
    background: rgb(25,25,25);
    padding: 1em;
}

.card {
    text-align: center;	
	position: relative;
	cursor: pointer;	
	perspective: 500px; 
	box-shadow: 0 18px 36px rgba(143, 100, 100, 0.3), 0 14px 12px rgba(0,0,0,0.2);
}
.card img{
    width: 250px;
	height: 300px;
}

.card .card-body {
    width: 100%;
	height: 100%;	
	padding: 5% 8%;
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotateY(90deg);
	transform-origin: 50%;
	background: linear-gradient(black,grey);
    color: aliceblue;		
	opacity: 0;
	transition: all 0.4s ease-in;
}

.card:hover .card-body {
    
    transform: translate(-50%, -50%) rotateY(0deg) scale(1.15);
	opacity: 1;
  }

 .card ul a:visited {
      color: #a8a8a8;
  }

.splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: cornflowerblue;
    z-index: 20000000;
    color: rgb(64, 163, 180);
    text-align: center;
    line-height: 300px;
}

.splash img {
    width: 100%;
    height: 100vh;
}

.splash.display-none{
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: cornflowerblue;
    z-index: -100;
    color: darkblue;
    text-align: center;
    line-height: 90vh;
    transition: all 0.s;
}

@keyframes fadeIn {
    to{
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 2s, ease-in-out forwards;
}


.btn-social-icon:hover {
    box-shadow: inset 0 0 0 22px #3A5795;
    transform: rotate(360deg) scale(1.35);
    transition: 1s;
}