.buffer{
    font-size: 2em;
    margin-top: 10vh;
    margin-bottom: 90vh;
}

.tabs-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    margin-bottom: .8em;
    border-bottom: .08em solid var(--lowink-orange);
}

.tab{
    all: unset;
    margin: 0 .5em;
    padding: .6em;
    padding-bottom: .4em;
    margin-top: .2em;
    border: .1em solid var(--lowink-orange-glow);
    border-radius: 1em 1em 0 0;
    border-bottom: none;
    cursor: pointer;
    transition-duration: .1s;
    font-weight: 600;
}

.tab:hover{
    border-color: var(--lowink-orange);
}

@media only screen and (max-width: 900px) {
    .tabs-wrapper{
        flex-wrap: wrap;
        padding-bottom: 1em;
    }

    .tab{
        border: .1em solid var(--lowink-orange-glow);
        border-radius: .75em;
        margin: .2em;
        padding: .4em;
    }
}

.active{
    background: var(--lowink-orange);
}

.register-content{
    font-size: 1.2em;
}

.register-button{
    all: unset;
    margin: 0 .5em 1em 0;
    padding: .6em;
    border: .1em solid var(--lowink-orange);
    border-radius: .8em;
    cursor: pointer;
    transition-duration: .1s;
    font-weight: 700;   
    font-size: 1.2em;
}
.register-button:hover{
    transform: scale(1.08);
}

.team-count{
    text-align: center;
    font-size: 2em;
    margin-bottom: .5em;
}

.teams-box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

.tourney-schedule p{
    margin: .1em;
    text-align: center;
}

.teams-body{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

.team-modal{
    display: none;
    flex-direction: column;
    position: fixed;
    z-index: 200;
    overflow: auto;
    background: var(--lowink-modal-bg);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
    animation-duration: .2s;
    animation-name: fadeIn;
}

.team-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--lowink-darkgrey);
    border-radius: 1em;
    box-shadow: 0 0 3em .5em var(--lowink-orange-glow);
    padding: 1em;
    border: .1em solid var(--lowink-orange);
    line-height: 1.6em;
    text-align: center;
    animation-duration: .25s;
    animation-name: openModal;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    max-height: 60vh;
    min-width: 25vw;
    overflow: auto;
    position: relative;
}
@media (prefers-reduced-motion) {
    .team-modal-content {
        animation: none;
    }
}

.team-modal-content h2 {
    margin: .3em;
}

.team-modal-content p {
    margin: .3em;
}

.team-modal-content img{
    margin: .3em;
    object-fit: cover;
    width: 8em;
    height: 8em;
    border-radius: 100%;
}

.team-modal-close {
    font-size: 4em;
    cursor: pointer;
    position: fixed;
    text-shadow: 0 0 .1em var(--lowink-orange);
    top: .25em;
    left: .25em;
}

.team-modal-button{
    border: .1em solid var(--lowink-orange-glow);
    border-radius: 1em;
    padding: .5em;
    margin: .25em;
    max-width: 160px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    user-select: none;
    flex: 1 1 15ch;
    transition-duration: .1s;
}
@media only screen and (max-width: 500px) {
    .team-modal-button{
        flex-direction: row;
        max-width: 100%;
        margin: .5em 0 0 0;
        border-width: .1em;
    }
}
.team-modal-button:hover{
    box-shadow: 0 0 1em .2em var(--lowink-orange-glow);
    border-color: var(--lowink-orange);
    transform: scale(1.03);
}
.team-modal-button:active{
    transform: scale(1.01);
}

.team-modal-button img{
    border-radius: 100%;
    margin: 0;
    object-fit: cover;
    width: 3.5em;
    height: 3.5em;
}
.team-modal-button p{
    text-align: center;
    margin: 0;
    max-width: 12ch;
    overflow-wrap: break-word;
}
@media only screen and (max-width: 500px) {
    .team-modal-button p{
        margin: auto;
    }
}

@keyframes openModal {
    from {
        top: 8%;
    }
    to{
        top: 0%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0%;
    }
    to {
        opacity: 100%;
    }
}

.section-box-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 0;
}

.section-box-content{
    animation: fadeIn .4s;
}

@keyframes fadeIn {
    from {
        opacity: 0%;
    }
    to {
        opacity: 100%;
    }
}

.tourney-rules{
    font-size: .8em;
    line-height: 1.4em;
    font-weight: 500;
}

.tourney-rules a{
    word-break: break-all;
}