body{
background-color:#444;
font-family:Arial;
font-size:16px;
color:#f1f1f1;
}
a:link {
text-decoration:none;
color:#f1e0a3;
}
a:visited{
text-decoration:none;
color:#f1e0a3;
}
a:hover{
text-decoration:none;
color:#d77982;
}
#main{animation: 1s fadeInUp;animation-name: main;opacity: 1;}
#back{animation: 5s fadeInUp;animation-name: back;opacity: 0.7;
position:fixed;height:100%;width:100%;top:0;left:0;z-index:-1;
background-repeat:no-repeat;background-attachment:fixed;
background-position:center center;background-size:cover;
background-color:transparent;object-fit:cover;}
@keyframes main {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes back {0% {opacity: 0;}100% {opacity: 0.7;}}
@-webkit-keyframes main {0% {opacity: 0;}100% {opacity: 1;}}
@-webkit-keyframes back {0% {opacity: 0;}100% {opacity: 0.7;}}
@-moz-keyframes main {0% {opacity: 0;}100% {opacity: 1;}}
@-moz-keyframesback {0% {opacity: 0;}100% {opacity: 0.7;}}
.pagination{
color:#f1e0a3;
font-size:18px;
padding:5px;
text-align:center;
background-color:#222;
border:1px solid #888;
cursor:pointer;
margin:0 6px;
}
.pagination:hover{
background-color:#000;	
}
.preview {
position:relative;
width: 220px;
height: 147px;
overflow: hidden;
border:1px solid #f1e0a3;
border-radius:10px;
margin-bottom:4px;
}.item {
position: absolute;
top: 0;left: 0;
}.item img {
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
width:220px;
}.preview:hover .item img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.thumb {
width:180px;
height:150px;
margin:6px;
box-shadow:1px 1px 3px 2px #444;
background-position:center center;
background-repeat:no-repeat;
display:inline-block;
border:3px solid white;
border-radius:10px;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
}
.thumb:hover {
filter: brightness(70%);
-webkit-filter:brightness(70%);
}
#top{
width:60px;
height:60px;
background-image:url(../images/top.png);
background-position:center;
background-repeat:no-repeat;
background-color:transparent;
filter:alpha(opacity=50);
opacity:0.5;
text-align:center;
padding:0;
border:0;
position:fixed;
bottom:30px; 
right:30px;
cursor:pointer;
display:none;
}
#top:hover{
filter:alpha(opacity=100);
opacity:1.0;
}
#loginback{	
display:none;
position:fixed;
left:0;right:0;
top:0;bottom:0;
z-index:888;
background-color:black;
opacity:0.65;
filter:alpha(opacity=65);
text-align:center;
visibility:hidden;
}
#loginform{
display:none;
position:fixed;
border-radius:15px;
width:300px;
height:180px;
left:50%;
top:50%;
margin-top:-140px;
margin-left:-150px;
z-index:999;
padding:20px;
background:#555;
color:white;
overflow:hidden;
text-align:center;
vertical-align:top;
visibility:hidden;
}
#loginform #login{
width:250px;
height:25px;
border:2px solid silver;
border-radius:10px;
padding:5px;
}
#loginform #password{
margin-top:5px;
width:250px;
height:25px;
border:2px solid silver;
border-radius:10px;
padding:5px;
}
#loginform #dologin{
margin-top:10px;
width:200px;
height:40px;
border:none;
border-radius:10px;
color:#E6E6E6;
background-color:grey;
font-size:20px;
cursor:pointer;
}
#loginform #dologin:hover{
color:#E6E6E6;
background-color:#fff;
}
#loginform #close_login{
position:absolute;
cursor:pointer;
top:15px;
right:15px;
width:25px;
height:25px;
z-index:1000;
}
#search{
color:#ccc;
width:150px;
padding:3px 6px;
border:2px solid gray;
background-color:#555;
border-radius:10px;
text-align:center;
}
#search:focus{
border:2px solid #f1e0a3;
}