html {
    height: 100%;
}
* {
    margin: 0px;
    padding: 0px;
}

body {
    background: black;
    height: 100%;
}

.container {
    margin: 10px;
    background: black;
    box-shadow: 0px 0px 30px red;
    height: 100%;

}

/*  MODAL */

.modal {
    display: none;
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background: rgba(0,0,0,0.5);
}

.modal-content {
    background: white;
    margin: 6% auto;
    padding: 20px;
    width: 40%;
    border-radius: 18px;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.2);
    animation-name: modalOpen;
    animation-duration: 1s;
}

.modal p {
    text-align: center;
}

.modal-header {
    text-align: center;
    color: #d8101d;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

input, .submit-btn {
    text-align: center;
    width: 50%;
    color: black;
    font-weight: bold;
    letter-spacing: 3px;
    border-radius: 5px;
    border: 0;
    height: 25px;
    margin-bottom: 5px;
    background: rgba(0,0,0,0);
}

input:hover, .submit-btn:hover {
    box-shadow: 0 0 5px #d8101d;
} 

.okay-btn {
    width: 100%;
    height: 23px;
    border: 0;
    border-radius: 5px;
    background: #d8101d;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 2px;
}

li {
    margin: 5px;
}

header {
    text-align: center;
    height: 75px;
}

header h1 {
    padding-top: 8px;
    letter-spacing: 8px;
    font-size: 4em;
    color: #d8101d;
    text-shadow: 4px 2px 3px #e9c46e;
}

main {
    display: flex;
    justify-content: space-between;
    height: 400px;
    padding: 0px 21px;
}

article {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400px;
    margin: auto;
}

aside {
    width: 87px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.light-bulb {
    width: 80px;
    height: 80px;
    border: 0px;
    border-radius: 100%;
    background: #fecf76;
    box-shadow: 0px 0px 20px yellow;
}

.slot-machine-img {
    width: 450px;
}

.slot-machine {
    display: flex;
    justify-content: space-around;
    width: 244px;
    height: 100px;
    position: relative;
    bottom: 251px;
    right: 2px;
}

.slot-holder {
    width: 53px;
    height: 73px;
    border: 2px solid;
    border-radius: 2px;
}

.div-btn {
    position: relative;
    bottom: 184px;
    left: 7px;
    width: 407px;
    display: flex;
    justify-content: space-around;
}

.twenty {
    position: relative;
    right: 23px;
    color: #c53a00db;
    background: #f2ad3361;
    border: 0px;
    transform: skewX(-31deg);
}

.fifty {
    position: relative;
    left: 15px;
    color: #c53a00db;
    background: #f2ad3300;;
    border: 0px;
    transform: skewX(-31deg);
}

.hundred {
    position: relative;
    left: 48px;
    color: #c53a00db;
    background: #f2ad3300;
    border: 0px;
    transform: skewX(-13deg);
}

.play-btn {
    width: 62px;
    border-radius: 50%;
    color: #c53a00db;
    background: #f2ad3300;;
    border: 0px;
    font-weight: bold;
    position: relative;
    left: 18px;

}

footer {
    height: 100px;
    display: flex;
    justify-content: center;
}

footer div {
    display: flex;
    align-items: center;
    width: 393px;
    height: 90px;
    border-radius: 4px;
    box-shadow: 0px 0px 56px #bb020b;
}

footer h2 {
    color: #f8c052;
    margin-left: 5px;
}

button:hover {
    box-shadow: 0 0 10px #bb020b;
}

 /*   ANIMATION CLASSES   */

 .flash-light {
    animation-name: flashLights;
    animation-duration: .2s;
    animation-iteration-count: 40;
}

.shake-machine {
    animation-name: shakeMachine;
    animation-duration: .5s;
    animation-iteration-count: 2;
}


/*  KEY FRAMES  */

@keyframes modalOpen {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes shakeMachine {
    0% {transform: rotate(10deg)}
    25% {transform: rotate(-10deg)}
    50% {transform: rotate(10deg)}
    75% {transform: rotate(-10deg)}
    100% {transform: rotate(10deg)}
    
}

@keyframes flashLights {
    from {
        background: #fecf76;
        box-shadow: 0px 0px 20px yellow;
    }
    to{
        background: #f5f2b1;
        box-shadow: 0px 0px 40px yellow;
    }
}

/*   media querys  */

@media screen and (max-width: 1000px) {
    .modalHeader h1 {
        font-size: 23px;
    }
}

@media screen and (max-width: 750px) {
    .modalContent {
        width: 75%;
    }
  }

@media screen and (max-width: 700px) {
    aside {
      display: none;
    }
  }