body {
     background-attachment : fixed;
     background-image : url(/images/login/seduction-city-background.jpg);
     background-size : cover;
     margin-top : 0;
     margin-bottom : 0;
     font-family : calibri,arial,sans-serif;
     font-size : clamp(10px, 2vw, 18px);
     color : silver;
     text-align:center;
}
.btnB
{
    background-color: #A71B1B;
    color: white;
    text-decoration: none;
    padding: 1%;
    border-radius: 5px;
    display: inline-block;
    white-space: nowrap;
    margin: 2%;
    width: clamp(50%, 2vw, 75%);
    font-size : clamp(10px, 2vw, 18px);
    text-align:center;
}
.btnB:hover
{
    background-color: white;
    color: black;
}

#wrapper {
	position: relative;
	width: 95%;
	height: 1080px;
	margin: 0.2em auto 0px auto;
	text-align: center;
}
h1{
    font-family: Georgia, Serif;
    font-size : clamp(12px, 2em, 32px);
}
ul {
    list-style-type:none;
    font-size:20pt;
    margin:0;
    padding:0;
}
li {
    display:inline;
}
.top {
    width: 96%;
	overflow:hidden;
	display: flex;
	justify-content: center;
	margin-bottom : 2%;
}
.banner
{
    padding-left: 18%;
    width: 60%;
}
.banner img
{
    width: 100%;
}

.login
{
    width: 20%;
}
.login img
{
    width: 40%;
}
.login input[type=text], input[type=password]
{
    width: 75%;
}
a
{
    color: red;
    font-size : clamp(14px, 2vw, 22px);
}
a:hover 
{
   text-shadow: 0 0 8px #EC008C;
}
.center, .right, .top, .news, .britney
{
    padding: 2%;
    color: silver;
    border-radius: 25px;
    border: 1px solid #A71B1B;
    background-color: #000000;
	background-color:rgba(0,0,0,0.8);;
 
}
.center
{
    float: left;
    width: clamp(50%, 2vw, 60%);
    height: clamp(58%, 1vh, 60%);
}
.right
{
    width: clamp(40%, 2vw, 50%);
    height: clamp(58%, 1vh, 60%);
    float: right;
}
.clear-fix
{
    clear: both;
}
.images
{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
.image-container 
{
    background-color: #f1f1f1;
    width: 20vw;
    height: 20vw;
    overflow: hidden;
    margin: auto;
    padding: 1%;
    padding-bottom: 5%;
}
.image1, .image2
{
    width: inherit;
    height: inherit;
}

.table-rank
{
    width: 100%;
    
}
.table-rank table
{
    margin: auto;
}
.table-rank td
{
    text-align: left;
}
.table-rank tr:nth-child(even) {
  background-color: #282828;
}
.social-button 
{
    transform: scale(0.9);
    opacity: 0.8;
    width: 15%;
}
.social-button:hover 
{
    opacity: 1;
    transform: scale(1);
}
.fade-in
{
    animation:fading 5s infinite
}
.news
{
	margin-bottom : 2%;
	height: 12%;
}
.britney
{
    margin-top: 2%;
}
.britney-images
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    overflow-y: hidden;
    overflow-x: scroll;
    scrollbar-width: none;
}
/*  use this pseudo class to hide the scrollbar on chrome */
.britney-images::-webkit-scrollbar {
   display: none;
}
.britney-image
{
    height: clamp(20vw, 30vw, 40vw);
    padding: 2%;
}
/* Position the "prev button" to the left */
.prev {
    left: 0;
}
/* Position the "next button" to the right */
.next {
    right: 0;
}
.prev, .next 
{
    color: #000000;
    cursor: pointer;
    position: absolute;
    width: auto;
    padding: 0.75%;
    border-radius: 10px;
    margin-top: 15%;
    transition: 0.6s ease;
    background-color: white;
    background-color: rgba(240,240,240,0.5);
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: white;
    background-color: rgba(240,240,240,0.8);
}
/*remove scroll buttons on touch devices*/
@media (hover: none) 
{
    .prev, .next
    {
        display: none;
    }
}

@keyframes fading
{
    0%{opacity:0}
    10%{opacity:1}
    90%{opacity:1}
    100%{opacity:0}
}
.slide-left
{
    position:relative;
    animation:animateleft 0.4s;
    overflow: hidden;
}
@keyframes animateleft
{
    from{left:-300px;opacity:0} 
    to{left:0;opacity:1}
}
.slide-down
{
    position:relative;
    animation:animatedown 0.4s;
    overflow: hidden;
}
@keyframes animatedown
{
    from{top:-20px;opacity:0} 
    to{top:0;opacity:1}
}