@font-face {
    font-family: LEMONMILK;
    src: url('../fonts/LEMONMILK-Regular.otf');
    font-display: swap;
}

@font-face {
    font-family: LEMONMILKBOLD;
    src: url('../fonts/LEMONMILK-Bold.otf');
    font-display: swap;
}
.noSelect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

body, html {
    height: 90vh;
    background-image: url('../images/syntGif.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: black;
    font-family: LEMONMILK;
}
.pageHeadings {
    text-align: center;
    font-family: LEMONMILKBOLD;
    color: #FFFFFF;
    padding: 15px 5px;
}   

h1 {
font-size: 110px;
margin: 0;
}
#rouletteH1 {
    color: magenta;
}
.subHeader {
    font-size: 55px;
    margin: -25px 0 0 4px;
}
#btnWrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
height: 50%;
margin: 20px 0;
}

.viewport {
margin: 0 auto;
width: 1096px;
height: 400px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
}

.middle {
width: 4px;
height: 250px;
position: absolute;
background: rgba(255, 0, 0, 0.5);
left: 50%;
z-index: 200;
}

/* CHECK */
*{
/* transform: translateZ(0); */
}

.winning-card {
z-index: 100;
}

.buttons {
margin: 15px auto;
width: 1096px;

}
.fill, .start {
width: 375px;
height: 120px;
font-size: 40px;
padding: 10px 20px;
margin: 20px 0 0 0;
font-family: LEMONMILKBOLD;
color: white;
background: linear-gradient(180deg, #ff00fb 0%, #6f257f 100%);
border: none;
border-radius: 25px;
}

.fill {
width: 180px;
height: 75px;
font-size: 30px;
font-family: LEMONMILK;
}

.fill:hover, .start:hover {
transform: scale(1.1);
cursor: pointer;
outline: 2px solid black;
}

.slider {
display: inline-block;

}

.slider>ul li {
color: white;
text-decoration: none;
list-style-type: none;
display: inline-block;
width: 250px;
height: 250px;
background: linear-gradient(180deg, #444444 0%, #000000 100%);
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
margin-right: 24px;
position: relative;
border-radius: 2px;
transform: translateX(-125px);
}

.slider>ul li.pizza span.cover {
background: linear-gradient(90deg, #516CF6 0%, #1C32A4 100%);
}

.slider>ul li.fastfood  span.cover {
  background: linear-gradient(90deg, #C243DE 0%, #740C8B 100%);
}

.slider>ul li.hjemmelavet  span.cover {
background: linear-gradient(90deg, #D95752 0%, #822020 100%);
}

.slider>ul li.exceedingly-rare  span.cover {
background: linear-gradient(90deg, #F2962B 0%, #B66303 100%);
}
.slider>ul li.rerolls  span.cover {
background: linear-gradient(90deg, #31b148 0%, #039d00 100%);
}

span.centered {
font-family: LEMONMILKBOLD;
font-size: 18px;
font-weight: 500;
}

.absolute {
position: absolute;
width: 100%;
height: 100%;
}

span.item-detail {
position: relative;
display: flex;
font-size: 12px;
font-weight: 400;
padding: 4px 8px;
border-radius: 100px;
margin-bottom: 4px;
}

span.stattrak {
background: transparent;
}

span.wear {
background: transparent;
display: none;
}

.item-details {
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-wrap: wrap;
flex-direction: column;
padding: 8px;
}

span.no-stattrak {
display: none;
}

span.centered2 {
color: #D9D9D9;
}

span.cover {
width: 100%;
height: 65px;
position: absolute;
bottom: 0;
padding: 15px 0 0 0;
border-radius: 0px 0px 2px 2px;
}

img {
object-fit: fit;
width: 65%;
margin: 0 auto;
padding-bottom: 71px;
}

.slider > ul {
padding-left: 0;
display: flex;
flex-direction: row;
margin: 0;
}