/*
 * Some general styling
 */

* {
    box-sizing: border-box;
}

:root {
    --item-height: 100px;
}
/* fix later and change js to in class 
*/

/* 
took some pointers for the flex display and positioning from this video: https://www.youtube.com/watch?v=boI2B4Gpp34

and used css animation skills learned from matts class to add the changing background color 
-luis 
*/

body {
background-image: linear-gradient(to right, hotpink , purple, pink, skyblue, indigo, blueviolet, violet);
 margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: linear-gradient(to right, rgb(37, 251, 14) , rgb(0, 0, 0), rgb(201, 255, 192), rgb(2, 61, 5));
   background-size: 400% 100%; 
   animation: colorChangecontainer 20s linear infinite;
}

/*
 * Style the orange box
 */

.start-button {
    display: flex;
    justify-self: center;
    margin: 30px;
    padding: 20px 50px;
    border-radius: 50px;
    font-family: fantasy;
    font-size: xx-large;
    border: 10px ridge  rgb(29, 245, 10);
    background: hsl(0, 0%, 0%);
    color: rgb(29, 245, 10);
    transform: translateY(-6px);
    text-transform: uppercase;
    transition: transform 0.9s ease, color 1s ease, filter 1s ease;
}

h1 {
    display: flex;
    justify-self: center;
    font-family: fantasy;
    font-size: 5vh;
    letter-spacing: 2px;
    color: rgb(32, 255, 12);
}
.start-button:hover {
  transform: scale(1.3);
  color: #ffffff;
  filter: drop-shadow( 0 0 10px black );
}

.score {
    display: flex;
    justify-self: center;
    font-family: fantasy;
    font-size: 5vh;
    letter-spacing: 2px;
    font-size: large;
    border: 10px double rgb(29, 245, 10);
    color: rgb(29, 245, 10);
    width: fit-content;
    margin: 10px;
    padding: 10px 10px;
}


#container {

    background: black;
    padding: 20px;
    position: absolute;
    border-radius: 5px ;
    border: 10px groove  rgb(29, 245, 10);
 border-width: 10px;
}

.slotframe {
    position: relative;
    overflow: hidden;
    height: calc(3 * var(--item-height));
}

.slotframe::before {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
}

.slotframe::after {
    content: "";
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
}

.window-border {
    padding: 5px;
    background:rgb(29, 245, 10);
    border: rgb(0, 0, 0) dotted;
    border-radius: 10px;
}

.container-test {
    background-color: #ff3503;
    padding: 50px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: yellow;
    text-decoration: underline;
    position: absolute;
    z-index: 10;

/* border-rotation animation:  https://css-tricks.com/more-control-over-css-borders-with-background-image/ - luis */

background-image: 

    repeating-linear-gradient(226deg, #fff700, #fff700 21px, transparent 21px, transparent 32px, #fff700 32px), 
    repeating-linear-gradient(316deg, #fff700, #fff700 21px, transparent 21px, transparent 32px, #fff700 32px), 
    repeating-linear-gradient(46deg, #fff700, #fff700 21px, transparent 21px, transparent 32px, #fff700 32px), 
    repeating-linear-gradient(136deg, #fff700, #fff700 21px, transparent 21px, transparent 32px, #fff700 32px);

    background-size: 6px calc(100% + 46.07px), calc(100% + 46.07px) 6px, 6px calc(100% + 46.07px) , calc(100% + 46.07px) 6px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
    animation: borderAnimation 0.6s infinite linear reverse;
}


/*
 * Reels and icon styling
 */

.icon {
    width: 80px;
    height: var(--item-height);
    display: block;
    position: relative;

    /*animation: wiggle 0.1s linear infinite;*/
}
 /*last color will need to be dark or make three colors
 */

.column {
    overflow-y: hidden;
    width: 100px;
    float: left;
    background-color: #eee;
    background-image: linear-gradient(#d3ffcd, #a9fda1, #93fb8f, #004700);
    height: calc(var(--item-height) * 3);
    margin: 0 3px;
}

.column div {
    padding: 0 10px;
    will-change: true;
    transform: translateY(calc(-100% + var(--item-height) * 3));
    /* transform: translateY(-300px); */
}

.column div img {
    width: 100%;
    height: auto;
    margin: 10px 0;
    position: relative;
    z-index: 3;
}

/* shadow effect behind the items */
.column div .icon::after {
    content: "";
    clear: both;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5px;
    height: 0.5px;
    background-color: white;
    box-shadow: 0 0 50px 20px #850E35;
    z-index: 2;
    border-radius: 100%;
}



#container.spinning .column:nth-of-type(2) div {
    animation-delay: 0.01s;
}

#container.spinning .column:nth-of-type(3) div {
    animation-delay: 0.02s;
}

#container.spinning .column:nth-of-type(4) div {
    animation-delay: 0.03s;
}

#container.spinning .column div {
    animation-name: scroll;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.65, .97, .72, 1);
}



@keyframes scroll {
    to {
        transform: translateY(calc(var(--item-height)*-2));
    }
}
@keyframes  start-button{
   to{transform: translateY(-3px);
   }
}

@keyframes colorChangecontainer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


@keyframes borderAnimation {
    from 
        { background-position: 0 0, -46.07px 0, 100% -46.07px, 0 100%; }
    to 
        { background-position: 0 -46.07px, 0 0, 100% 0, -46.07px 100%; }
}


/* JEREMYS STUFF HERE */
.hidden {
    display: none;
}