body {
    background-image: url('Images/Background-2.png');
}

.tournamentContainer {
    display:flex;
    justify-content: center;   
    align-items:center;
    column-gap: 32px;
    padding:0px;
    position: absolute;
    top:200px;
    left:9vw;
    max-height:568px;
    overflow-y: visible;
    height: 100%;
}

.tournamentTemplate {
    height:568px;
    width: 375px;
}



.prizeButton {
    position: absolute;
    font-size:28px;
    width: 50%;
    aspect-ratio: 3.5/1;
    background:radial-gradient(circle,rgba(171, 171, 171, 1) 0%, rgba(128, 124, 124, 1) 100%);
    bottom:0;
    font-family: 'Lilita One', 'sans-serif';
    color: #fff;
    border: 2px solid #4a4949;
    transition-property: background, color;
    transition-duration: 0.2s;
    -webkit-text-stroke: 22px  solid black;
    z-index:1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-shadow: 1px 1px 2px black;
}

.prizeButton:hover {
    background: radial-gradient(circle,rgb(141, 141, 141) 0%, rgb(98,94,94) 100%);
    color: #dadada;
}
.cupContainer {
    display:flex;
    width: 100%;
    flex-direction: column;
    align-items: end;
    padding-right:2.5vw;
    height: 100vh;
}

.cupPrize {
    background: linear-gradient(0deg,rgb(11, 70, 188) 0%, var(--blue-color) 100%);
    border-radius:5px;
    aspect-ratio:7/1;
    max-width:100vw;
    width:800px;
}

.prizesInformation {
    z-index: 3;
    position: absolute;
    height: 100%;
    width: 100%;
    background-image:url(Images/Background-1.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.9;
    h2 {
        letter-spacing: -2.5px;
        font-size: 80px;
        -webkit-text-stroke: 0.1px black;
        text-align: center;
        width: 100%;
        padding-block: 32px;
        text-shadow: 1px 1px 2px black;
    }
}

.flexGemsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 50px;
    padding-top:50px;
}
.prize {
    display:flex;
    column-gap: 50px;
    align-items: center;
    > span {
        font-size: 35px;
        -webkit-text-stroke: 0.75px black;
        text-shadow: 0.75px 0.75px 2px black;
    }
}
.prizepoolBox {
    background-color:#171717;
    border-radius:2.75px;
    padding-block: 3px;
    display: flex;
    padding-inline-end:20px;
    padding-inline-start: 34px;
    justify-content: center;
    align-items: center;
    position: relative;
    span {
        font-size:26px;
        position: relative;
        left:5%;
    }
    img {
        width: 36px;
        position: absolute;
        left:0;
        transform: translateX(-50%);
    }
}


.closePrizesButton {
    z-index: 4;
    aspect-ratio:1;
    color: #fff;
    border-radius: 5px;
    background:radial-gradient(circle,rgba(255, 149, 92, 1) 0%, rgba(255, 16, 16, 1) 100%);
    border: 1px solid rgb(101, 16, 16);
    -webkit-text-stroke: 1px black;
    width:65px;
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    top:15px;
    right:15px;
    transition-property: background, color;
    transition-duration: 0.15s;
    
    
    i {
        font-size:50px;
        font-weight: 900;
    }
}

.closePrizesButton:hover {
    background: radial-gradient(circle,rgba(211, 149, 92, 1) 0%, rgba(211, 16, 16, 1) 100%);
    color: #dadada;
}

.goBackButton {
    
    position: absolute;
    top:30px;
    left:30px;
    font-size:50px;
    width: 130px;
    height: 85px;
    background:radial-gradient(circle,rgba(255, 149, 92, 1) 0%, rgba(255, 16, 16, 1) 100%);
    font-family: 'Lilita One', 'sans-serif';
    color: #fff;
    border: 2px solid rgb(101, 16, 16);
    transition-property: background-color, color;
    transition-duration: 0.2s;
    -webkit-text-stroke: 1px black;
    text-shadow: 1px 1px 2px black;
    border-radius: 3px;
    z-index:1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    cursor:default;
    transition-property: background, color;
    transition-duration: 0.15s;
}

.goBackButton:hover {
    background: radial-gradient(circle,rgba(211, 149, 92, 1) 0%, rgba(211, 16, 16, 1) 100%);
    color: #dadada;
}


.cupInformation {
    width: 100%;
    position: relative;
}

.cupInformationContainer {
    width:800px;
    display:flex;
    flex-wrap:wrap;
    align-content: start;
    justify-content: center;
    align-items:start;
    overflow-y:hidden;
    padding-block-end: 16px;
    padding-block-start: 60px;
    padding-inline-start: 60px;
    padding-inline-end:20px;
    flex-basis: 100%;
}

.containerContainer {
    height: 100%;
    width: 800px;
    overflow-y:visible;
    background: linear-gradient(0deg,rgb(9, 74, 204) 0%, var(--blue-color) 100%);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    max-height:80%;
    display: flex;
    flex-direction: column;
}

.sideItems {
    position: absolute;
    top:0;
    left:-60px;
    width: 60px;
    height:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    padding-top: 9px;
} 
.circleItem {
    border-radius:50%;
    aspect-ratio: 1/1;
    background: rgb(47, 137, 255);
    width: 40%;
    z-index: 1;
}

.lineItem {
    background: rgb(47, 137, 255);
    width: 5%;
    height:100%;
    position: absolute;
}

.textItems {
    height: 100%;
    width: 100%;
    display:flex;
    text-shadow: 2px 2px 2px black;
    -webkit-text-stroke: 1px #345eb1;
    font-size: 24px;
    font-weight: 100;
    
}
.textItem2 {
    flex-grow:1;
    color:#a3a3a3
}

.register, .start {
    height: 90px;
}

#textItemsRegister {
    column-gap: 24px;
}

#textItemsPhase {
    font-size: 24px;
    height: auto;
}

.phaseButton {
    position: absolute;
    font-size:20px;
    width: 150px;
    aspect-ratio: 3.5/1;
    background:radial-gradient(circle,rgba(171, 171, 171, 1) 0%, rgba(128, 124, 124, 1) 100%);
    right:0;
    font-family: 'Lilita One', 'sans-serif';
    color: #fff;
    border: 2px solid #4a4949;
    transition-property: background, color;
    transition-duration: 0.2s;
    -webkit-text-stroke: 0.2px black;
    text-shadow: 1px 1px 2px black;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
}

.phaseButton:hover {
    background: radial-gradient(circle,rgb(141, 141, 141) 0%, rgb(98,94,94) 100%);
    color: #dadada;
}

.phaseLogger {
    width:100%;
    background: radial-gradient(circle,rgb(12, 48, 121) 0%, rgb(17, 42, 92) 100%);
    margin-top: 16px;
    border-radius: 4px;
    display:flex;
    flex-direction: column;
    margin-bottom: 48px;
}

.phaseLog {
    height:57.5px;
    display: flex;
    justify-content: space-between;
    padding-inline:20px;
    align-items: center;
    font-size: 26px;
    color: #acacac;
    -webkit-text-stroke: 0.5px black;

    > p:nth-child(4) > span {color:rgb(0, 255, 0);} 
    > p:nth-child(6) > span {color:rgb(255, 0, 0);} 
}

.phaseStats {
    color: #8c8c8c;
    border-top:2.5px solid rgb(46, 65, 102);
    fill-rule: fill stroke;
    text-shadow: 1px 1px 2px black;
}

.winner {
    padding-bottom: 60px;
}
.phaseInformation {
    position:absolute;
    z-index:3;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.phaseInformation h2{
    letter-spacing: -2.5px;
    font-size: 80px;
    -webkit-text-stroke: 0.1px black;
    text-align: center;
    width: 100%;
    padding-block: 32px;
    text-shadow: 1px 1px 2px black;
}


.bracketInformation {
    z-index: 3;
    position: absolute;
    height: 100%;
    width: 100%;
    background-image:url(Images/Background-2.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.9;
    h2 {
        letter-spacing: -2.5px;
        font-size: 80px;
        -webkit-text-stroke: 0.1px black;
        text-align: center;
        width: 100%;
        padding-block: 32px;
        text-shadow: 1px 1px 2px black;
    }
}

.phaseStart {
    font-size:22px;
    border-top: none;
}

.phaseQual {
    justify-content: left;
    padding-left: 0;
    background-color: rgba(255, 145, 0, 0.25);
    font-size: 19px;
    color:orange;
    span {
        font-size: 36px;
        padding-inline: 20px;
    }
}
.phaseGroupsContainer {
    
    padding-top: 32px;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
    z-index: 3;
    row-gap:25px;
    
    button {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        border: none;
        border-right: 3.5px solid #fff;
        font-family: 'Lilita One', 'sans-serif';
        background-color: transparent;
        color: #fff;
        -webkit-text-stroke: 0.5px black;
        text-shadow: 1px 1px 2px black;
        max-height: 35px;
        max-width: 165px;
        height: 35px;
        width: 165px;
    }
    button:last-of-type {
        border:none;
    }
}
.filling-empty {
        height: 0;
        width: 165px;
}

.groupsPhase {
        z-index: 3;
        position: relative;
        background: radial-gradient(circle,rgb(21, 56, 94) 0%, rgba(21, 42, 83, 1) 100%);
        display:flex;
        padding-bottom:16px;
        flex-direction: row-reverse;
}

.backgroundPhase {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image:url(Images/Background-2.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.9;
}

.phaseButtonContainer {
    height: 100%;
    min-width:100px;
    button {
        top:20px;
        left:20px;
        position: relative;
    }
}

.selectedGroup {
    color:#51b8f6 !important;
    font-size: 42px !important;
}

.groupInformation {
    flex-grow: 1;
}

.allPhaseContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}