body,div{
    margin: 0;
    padding: 0;
    text-decoration: 0;
    list-style: none;
}

@font-face {
    font-family: 'patron';
    src: url(./font/Patron\ -\ PersonalUse.otf);
}

body{
    font-family: patron;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center; 
    background-image: url(https://media.giphy.com/media/xVn3ZmKrKIOLS/giphy.gif);
}

#titulo{
    font-family: patron;
    color: white;
    font-size: 65px;
    color: #fff;
     text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #fff,
            0 0 42px #0fa,
            0 0 82px #0fa,
            0 0 92px #0fa,
            0 0 102px #0fa,
            0 0 151px #0fa;
}


#container{
    position: absolute;
    top: 50%;
    bottom: 50%;
    max-width: 490px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.coluna{
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    border-radius: 30px;

}

.linha{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 10px;
    box-shadow:
    0 0 7px #fff,
    0 0 7px #fff,
    0 0 1px #fff,
    0 0 3px #0fa,
    0 0 5px #0fa,
    0 0 5px #0fa,
    0 0 5px #0fa,
    0 0 5px #0fa;
}

.coluna:hover {
    box-shadow: 0px 0px 20px 10px hsl(105deg 100% 59% / 75%);
    border-radius: 10px;
    cursor: pointer;
}

/* >>>>>>> master */

.disco-red {
    background-image: url(./font/peterQuill2.png);
    background-size: 30px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    border: 2px solid white;
    transform: translateY(-1000px);
    animation: efeitos 2s ease-in-out;
    animation-fill-mode: forwards;
}

.disco-black {
    background-image: url(./font/Rockett2.png);
    background-size: 30px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    border: 2px solid white;
    transform: translateY(-1000px);
    animation: efeitos 2s ease-in-out;
    animation-fill-mode: forwards;
}

#ganhou{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 305px;
    height: 200px;
    box-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
    bottom: calc(50% - 100px);
    right: calc(50% - 150px);
    border-radius: 15px;
    display: none;

}

.petterWin {
    background-image: url(https://img.wattpad.com/6abfd9cdfc70786c3f08f7b0fe3b3c7c16134862/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f447941454f77327a696c693273413d3d2d3531393230393433392e313530376538663364613333386438373338313830313031303730392e676966);
    background-size: 125%;
}

.raccoonWin {
    background-image: url(https://media.tenor.com/images/78d3ef379378a6c81c08fdd653230988/tenor.gif);
    background-size: 100%;
    background-position-y: -28px;
}

.draw {
    background-image: url(https://i.pinimg.com/originals/50/72/f8/5072f83f2497f4f6dd4b782c7e53698e.gif);
    background-size: 170%;
    background-position-x: -106px;
    background-position-y: -67px;
}

#ganhou h2 {
    font-family: patron;
    font-size: 20px;
    text-shadow: 3px 3px 0px black;
    color: white;
    text-align: center;
}

#botao_resetar{
    font-family: patron;
    font-size: 10px;
    height: 50px;
    width: 200px;
    background-color: lime;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    box-shadow: black 5px 5px 5px;
    border: none;
    padding: 5px;
    cursor: pointer;
    font-weight: 600;
    border: 2px solid transparent;
}

@keyframes efeitos{
  0%{transform: translateY( -800px)}
  32%{transform: translateY( 5px) scale(1.1,0.9) rotate(360deg)}
  48%{transform: translateY(-100px)}
  64%{transform: translateY(5px) scale(1.1,0.9)}
  80%{transform: translateY(-25px)}
  100%{transform: translateY(0px)}
}

@media (min-width: 768px) {

.linha {
    height: 70px;
    width: 70px;
}

.disco-black, .disco-red {
    height: 60px;
    width: 60px;
    background-size: 60px;
}

#ganhou {
    width: 400px;
    right: calc(50% - 200px);
}

#ganhou h2 {
    text-align: initial;
}

}