@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:wght@300;400;700;900&display=swap');

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.random-bg{
    height:100vh;
    background: #ecf0f3;
    padding-top:1px;
    background-repeat:no-repeat;
    background-size: cover;
    position: relative;
}
.random-bg::before{
    content:'';
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: #ecf0f3;
    z-index:0;
}
.winner-wrap{
    max-width:280px;
    min-height:280px;
    background: #ecf0f3;
    box-shadow:13px 13px 20px #cbced1, -13px -13px 20px #ffffff;
    margin:5% auto 0;
    position: relative;
    padding:1rem 2rem 6.5rem 2rem;
    font-family:'Lato', sans-serif;
    text-align: center;
    cursor: pointer;
}
.winner-wrap:hover .right-ribbon{
    right:-45px;
    border-left:20px solid #a047c6;
    transition:all ease .3s;
}
.winner-wrap:hover .left-ribbon{
    left:-45px;
    border-right:20px solid #a047c6;
    transition:all ease .3s;
}
.winner-wrap:hover .winner-ribbon{
    box-shadow: 0 3px 6px 0px rgba(0,0,0,0.2);
    transition:all ease .3s;
}
.medal-box{
width:60px;
height:60px;
background-color: #a047c6;
color:#fff;
border-radius:50px;
line-height:70px;
font-size:2.3rem;
margin:.8rem auto 1rem;
}
.winner-wrap h1{
    color:#a047c6;
    font-size:1.4rem;
    font-weight:700;
    text-transform: uppercase;
}
.winner-ribbon{
    width:100%;
    height:50px;
    background: #a047c6;
    text-align: center;
    font-family:'Bebas Neue', cursive;
    font-size:2.8rem;
    color:#fff;
    position: absolute;
    bottom:45px;
    left:0;
    z-index:99;
    box-shadow:0 10px 15px -7px rgba(0,0,0,0.2);
}
.right-ribbon{
    width:0;
    height:0;
    position: absolute;
    right:-35px;
    bottom:30px;
    border-top:24px solid #a047c6;
    border-bottom:24px solid #a047c6;
    border-left:10px solid #a047c6;
    border-right:25px solid transparent;
    transition: all ease .3s;
}
.left-ribbon{
    width:0;
    height:0;
    position: absolute;
    left:-35px;
    bottom:30px;
    border-top:24px solid #a047c6;
    border-bottom:24px solid #a047c6;
    border-left:25px solid transparent;
    border-right:10px solid #a047c6;
    transition: all ease .3s;
}
.team-wrap{
    width:100%;
    margin:1rem auto;
    text-align: center;
    position: relative;
}
.team-wrap.inactive .member-pic{
    animation:fadein .3s ease-in forwards;
}
.team-wrap.active .member-pic{
    animation:fadeout .3s ease-in forwards;
}
.member-pic{
    width:10rem;
    height:10rem;
    display:inline-block;
    margin:auto 1rem;
    border-radius:5px;
    overflow:hidden;
    opacity:0;
}
.member-pic img{
width:100%;
height:100%;
object-fit: cover;
}
@keyframes fadeout{
from{
    opacity:0;
}
to{
    opacity:1;
}
}
@keyframes fadein{
    from{
        opacity:1;
    }
    to{
        opacity:0;
}
}
@keyframes bang{
    from{
        transform:translate3d(0,0,0);
        opacity:1;
    }
}
s{
    position: absolute;
    display: block;
    left:50%;
    top:80%;
    width:5px;
    height:14px;
    background: red;
    opacity:0;
}