body{
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #0b0b11;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

#logoArea {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: calc(171px * 1.12);
    width: calc(460px * 1.12);
    top: 0;
    background-image: url('./img/logo-bg.webp');
    background-size: contain;
    z-index: 5;
}

#logoArea > img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
}

#draftArea {
    position: relative;
    height: 95vh;
    max-height: 880px;
    aspect-ratio: 392 / 241;
    display: flex;
    flex-direction: column;
    background-image: url('./img/DraftBG.webp');
    background-size: 100%;
    background-repeat: no-repeat;
    gap: 25px;
}

#namesArea {
    width: 100%;
    height: 62px;
    margin-top: 35px;
    display: flex;
    justify-content: space-between;
    padding: 0 46px;
    box-sizing: border-box;
}

#namesArea > input {
    width: 40%;
    height: 100%;
    background-color: white;
    border: none;
    resize: none;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.9rem;
    color: white;
    text-align: center;
    text-transform: uppercase;
}

#namesArea > input#blueTeam {
    background-image: linear-gradient(to bottom, #284b70,#5296cc);
}

#namesArea > input#redTeam {
    background-image: linear-gradient(to bottom, #784d42,#cb786c);
}

#bansArea {
    display: flex;
    width: 100%;
    height: 50px;
    padding: 0 46px;
    box-sizing: border-box;
}

#bansArea > div {
    display: flex;
    flex: 1;
    gap: 25px;
}

#blueBans {
    justify-content: flex-start;
}

#blueBans > div{
    cursor: pointer;
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #5296cc40;
}

#blueBans > div:nth-child(3){
    margin-left: 25px;
}

#redBans {
    justify-content: flex-end;
}

#redBans > div{
    cursor: pointer;
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #cb786c40;
}

#redBans > div:nth-child(2){
    margin-right: 25px;
}

.lock {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,50%);
    z-index: 2;
}

#draftPicks {
    display: grid; 
    width: 100%;
    flex: 1;
    padding: 0 46px 20px 46px;
    margin-top: 25px;
    box-sizing: border-box;
    overflow: hidden;
    grid-template-columns: 0.33fr 0.33fr 0.33fr 835px 0.33fr 0.33fr 0.33fr;
    grid-template-areas: "blueSwaps bluePicks blueNames championPicks redNames redPicks redSwaps";
}

#draftPicks > div {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    place-items: center;
    width: 100%;
    height: clamp(100%,100%,100%);
}

#blueSwaps {
    grid-area: blueSwaps;
}

#blueSwaps > div, #redSwaps > div {
    width: 50px;
    height: 50px;
    background-image: url('./img/swap.webp');
    background-size: 64%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#bluePicks {
    grid-area: bluePicks;
}

#bluePicks > div, #redPicks > div {
    aspect-ratio: 1 / 1;
    width: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

#bluePicks > div {
    background-color: #5296cc40;
}

#redPicks > div {
    background-color: #cb786c40;
}

#blueNames {
    grid-area: blueNames;
}

#blueNames > span, #redNames > span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    color: white;
    text-transform: uppercase;
}

#redNames {
    grid-area: redNames;
}

#redPicks {
    grid-area: redPicks;
}

#redSwaps {
    grid-area: redSwaps;
}

#championPicks {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

#searchBar {
    width: 100%;
    height: 40px;
    
}

#searchBar > input {
    width: 100%;
    height: 100%;
    border: none;
    color: white;
    background-color: #ffffff05;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    text-align: center;
}

#pickArea {
    display: grid;
    width: 100%;
    flex: 1;
    background-color: #ffffff05;
    overflow-y: scroll;
    padding: 20px;
    box-sizing: border-box;
    gap: 20px;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: max-content;
}

.champion {
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #ffffff09;
}

.champion > span {
    color: white;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
}

[active=true]{
    box-shadow: 0 0 5px 1px #fffa ;
    filter:brightness(150%)
}

[swapActive=true]{
    filter:brightness(250%)
}