body {
   --orange: #ff9d00;
   --bg: #51198a;
   --purple: #351159;
   --team-height: 50px;
   background: var(--bg);
}
.main-container {
}
.team-div {
    background: var(--purple);
    position: absolute;
    width: 300px;
    height: var(--team-height);
    font-family: 'Exo 2';
    font-size: 30px;
    color: white;
    z-index: 1;
}

.team-div::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(90deg, rgba(94,0,94,1) 0%, rgba(109,9,121,1) 23%, rgba(168,0,222,1) 100%);
    z-index: -1;
    transition: opacity 0.25s linear;
    opacity: 0;
}

.awarded::before {
    opacity: 1;
}

.team-name {
    line-height: var(--team-height);
    margin-left: 10px;
}

.team-points {
    float: right;
    line-height: var(--team-height);
    margin-right: 10px;
}

.points {
    z-index: 10;
    font-weight: bold;
    position: absolute;
    top: 0px;
    left: 200px;
    width: var(--team-height);
    height: var(--team-height);
    line-height: var(--team-height);
    text-align: center;
    background: var(--orange);
    -webkit-animation: fadeIn ease 0.5s;
}

@-webkit-keyframes fadeIn {
0% {opacity:0;-webkit-transform: scale(0.5);}
80% {opacity:0.8;-webkit-transform: scale(1.2);}
100% {opacity:1;-webkit-transform: scale(1);}
}

.buttons {
    height: 100%;
}

.buttons > div {
    display: block;
    position: relative;
    height: 30px;
}
.inp > * {
    position: absolute;
    right: 0;
}