User:Sid the Kpop fan/common.css

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital@0;1&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

/* Image Overlay (Taylor Swift Wiki) */ .image-overlay { position: relative; overflow: hidden; } .image-overlay > .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: 0.5s; background: #00000080; color: #fff; } .image-overlay:hover > .overlay { opacity: 1; } .image-overlay > .overlay > .overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 180%; font-family: 'Circular Std', sans-serif; padding-left: 3px; padding-right: 3px; text-align: center; width: 100%; } .image-overlay p { margin: .0em 0 .0em !important; } .image-overlay a { font-weight: bold; } .image-overlay a:hover { opacity: 0.6; -webkit-transition: all .4s linear 0s; -moz-transition: all .4s linear 0s; -ms-transition: all .4s linear 0s; -o-transition: all .4s linear 0s; transition: all .4s linear 0s; text-decoration: none; } .image-overlay a { color: #eaeaea; -webkit-transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; transition: all .3s linear 0s; } .image-overlay.overlay-zoom:hover img { -moz-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05); -ms-transform:scale(1.05); transform:scale(1.05); -webkit-backface-visibility:hidden; backface-visibility:hidden; filter:alpha(opacity=100); opacity:1; -webkit-transition:all 3s ease-in-out; -moz-transition:all 3s ease-in-out; -ms-transition:all 3s ease-in-out; -o-transition:all 3s ease-in-out; transition:all 3s ease-in-out; } .image-overlay.overlay-zoom img { -webkit-transition:all 3s ease-in-out; -moz-transition:all 3s ease-in-out; -ms-transition:all 3s ease-in-out; -o-transition:all 3s ease-in-out; transition:all 3s ease-in-out; }

/* ================  Navigational "bounce" effect mainly used on front page idea derives from the work of  Alessio Atzeni, a Roman web designer who can be found at  http://www.alessioatzeni.com ================ */ /* Adapted from User:CzechOut from w:c:kateprice ================  Credits to Encyclopedia SpongeBobia */

.bounceme { position:relative; float:left; width:300px; height:200px; margin:10px; overflow:hidden; text-align:left; -webkit-box-shadow:1px 1px 2px #e6e6e6; -moz-box-shadow:1px 1px 2px #e6e6e6; box-shadow:1px 1px 2px #e6e6e6; background-color:#f5f5f5; font-family: 'Circular Std', sans-serif; }

.bounceme img { width:auto; height:200px; } .bounceme .info { position:absolute; top:-220px; width:300px; height:200px; overflow:hidden; background-color:#3333ff; }

.bounceme .info #heading { display:block; text-decoration:none; color:white; font-family: 'Circular Std', sans-serif; font-weight: bold; text-align: center; font-size: 14px; padding: 6px; background: #3366ff; margin: 20px 0 0 0; border-top:2px solid white; border-bottom:2px solid white; letter-spacing: 0; }

.bounceme .info #text { font-size: 12px; position: relative; color: white; padding: 5px; text-align: center; font-weight: normal; font-family: 'Circular Std', sans-serif; }

.bounceme .info #button { text-decoration:none; font-size: 10pt; color: white; padding:0px 3px; text-align: center; background: #3399ff; margin:0 auto; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; -icab-border-radius:5px; -o-border-radius:5px; white-space:nowrap; font-family: 'Circular Std', sans-serif; font-weight: bold; }

.bounceme:hover .info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; top: 0px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-animation: bounceY 0.7s linear; -moz-animation: bounceY 0.7s linear; -ms-animation: bounceY 0.7s linear; animation: bounceY 0.7s linear; }

@-moz-keyframes bounceY { 0% { -moz-transform: translateY(-205px);} 40% { -moz-transform: translateY(-100px);} 65% { -moz-transform: translateY(-52px);} 82% { -moz-transform: translateY(-25px);} 92% { -moz-transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);} }

@-webkit-keyframes bounceY { 0% { -webkit-transform: translateY(-205px);} 40% { -webkit-transform: translateY(-100px);} 65% { -webkit-transform: translateY(-52px);} 82% { -webkit-transform: translateY(-25px);} 92% { -webkit-transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);} }

@keyframes bounceY { 0% { transform: translateY(-205px);} 40% { transform: translateY(-100px);} 65% { transform: translateY(-52px);} 82% { transform: translateY(-25px);} 92% { transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);} } .bounceme .info a:not(.new) { color: #66ccff; } .bounceme .info a.new { color: #ff9999; } .theme-fandomdesktop-dark .bounceme { background-color: transparent; }

/* Heading font .page-content h1, .page-header__title, .page-content h2 { font-family: 'Source Serif Pro', serif; font-weight: normal; } .page-content h3, .page-content h4, .page-content h5, .page-content h6, .page-content { font-family: 'Work Sans', sans-serif; } .page-content h3, .page-content h4, .page-content h5, .page-content h6 { font-weight: normal; }