@charset 'utf-8';

.pager { color:#FFF; text-align:center; text-shadow:0 1px 1px rgb(0,0,0,75%); padding:12px;}
.pager:before { clear:both; content:'';}
.pager p { font-size:16px; padding:4px;}
.pager ul { display:flex; flex-wrap:wrap; justify-content:center;}
.pager li { display:flex; align-items:end; padding:4px;}
.pager li a,
.pager li div {
display:block;
border:1px solid; border-radius:4px;
color:#FFF; font-size:14px;
padding:8px;
}
.pager li a {
position:relative;
background:linear-gradient(rgb(255,255,255,25%),transparent,rgb(0,0,0,25%));
box-shadow:0 2px 2px rgb(0,0,0,50%), 0 0 4px rgb(0,0,0,75%) inset;
border-color:rgb(255,255,255,50%) rgb(255,255,255,25%) rgb(255,255,255,12.5%);
text-decoration:none;
}
.pager li a:before { position:absolute; left:0; right:0; top:0; bottom:0; background:#FFF; opacity:0; content:'';}
.pager li a:hover:before { animation:pager-a 1s forwards;}
@keyframes pager-a { 0% { opacity:1;}}
.pager li div {
background:linear-gradient(transparent,rgb(255,255,255,12.5%));
box-shadow:0 1px 2px rgb(0,0,0,75%) inset;
border-color:rgb(255,255,255,25%);
}
.pager li span { display:block; font-size:14px;}
@media screen and ( max-width:768px ){
.pager p { font-size:14px;}
.pager li * { font-size:12px;}
}