.container{
    width: 80%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}
.team-members{
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 65%;
    margin: 0 auto;
}

.team-members-container h1{
    color: white;
    font-family: 'Ranchers', cursive;
    letter-spacing: 3px;
}

@keyframes displayMembers {
    0%   {opacity: 0%;}
    25%  {opacity: 25%;}
    50%  {opacity: 50%;}
    100% {opacity: 100%;}
}

.member{
    padding:12px;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
    border-radius: 15px;
    color: white;
    animation-name: displayMembers;
    animation-duration: 1.5s;
    font-family: 'Ranchers', cursive;
    letter-spacing: 1px;
    margin: 5px
}

.team-groups{
    display: none;
    flex-direction: row;
    position: absolute;
    bottom: 10px;
    justify-content: center;
    width: 100%;
}

.saved-teams{
    display: none;
}

.team-groups-homepage{
    display: flex;
    flex-direction: row;
    bottom: 10px;
    justify-content: center;
    width: 100%;
}

.team-groups p, .team-groups-homepage p{
    margin-top: 10px
}
html{
    height: -webkit-fill-available;
    overflow: hidden;
}

body{
    background-image: url('https://cutewallpaper.org/21/jeopardy-wallpapers/Blue-Xmas-Looping-Background-Stock-Footage-Video-100-Royalty-free-605761-Shutterstock.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: -webkit-fill-available
}

.welcome h1{
    color: white;
    font-family: 'Ranchers', cursive;
    font-size: 65px;
}

button{
    font-family: 'Ranchers', cursive;
    font-size:20px;
    border-radius: 25px;
    padding: 10px;
    cursor: pointer
}
.team{
    background-color:transparent;
    height: 550px;
    width: 20%;
    font-size: 20px;
    padding: 10px;
    border: 1px solid white;
}

.team-creation-container{
    display: flex;
    flex-direction: column;
    position: unset !important;
}

.group-header{
    width: 100%;
    text-align: center;
    border-bottom: 1px solid white;
    text-decoration: underline;
    margin: 0;
    color: white;
    font-family: 'Ranchers', cursive;
}
.start-randomization{
    display: none;
    margin: 0 auto;
}

.randomization-container{
    display: none;
}

@keyframes dropConfetti{
    0%{height: 0%}
    1%{height: 1%}
    2%{height: 2%}
    3%{height: 3%}
    4%{height: 4%}
    5%{height: 5%}
    6%{height: 6%}
    7%{height: 7%}
    8%{height: 8%}
    9%{height: 9%}
    10%{height: 10%}
    11%{height: 11%}
    12%{height: 12%}
    13%{height: 13%}
    14%{height: 14%}
    15%{height: 15%}
    16%{height: 16%}
    17%{height: 17%}
    18%{height: 18%}
    19%{height: 19%}
    20%{height: 20%}
    21%{height: 21%}
    22%{height: 22%}
    23%{height: 23%}
    24%{height: 24%}
    25%{height: 25%}
    26%{height: 26%}
    27%{height: 27%}
    28%{height: 28%}
    29%{height: 29%}
    30%{height: 30%}
    31%{height: 31%}
    32%{height: 32%}
    33%{height: 33%}
    34%{height: 34%}
    35%{height: 35%}
    36%{height: 36%}
    37%{height: 37%}
    38%{height: 38%}
    39%{height: 39%}
    40%{height: 40%}
    41%{height: 41%}
    42%{height: 42%}
    43%{height: 43%}
    44%{height: 44%}
    45%{height: 45%}
    46%{height: 46%}
    47%{height: 47%}
    48%{height: 48%}
    49%{height: 49%}
    50%{height: 50%}
    51%{height: 51%}
    52%{height: 52%}
    53%{height: 53%}
    54%{height: 54%}
    55%{height: 55%}
    56%{height: 56%}
    57%{height: 57%}
    58%{height: 58%}
    59%{height: 59%}
    60%{height: 60%}
    61%{height: 61%}
    62%{height: 62%}
    63%{height: 63%}
    64%{height: 64%}
    65%{height: 65%}
    66%{height: 66%}
    67%{height: 67%}
    68%{height: 68%}
    69%{height: 69%}
    70%{height: 70%}
    71%{height: 71%}
    72%{height: 72%}
    73%{height: 73%}
    74%{height: 74%}
    75%{height: 75%}
    76%{height: 76%}
    77%{height: 77%}
    78%{height: 78%}
    79%{height: 79%}
    80%{height: 80%}
    81%{height: 81%}
    82%{height: 82%}
    83%{height: 83%}
    84%{height: 84%}
    85%{height: 85%}
    86%{height: 86%}
    87%{height: 87%}
    88%{height: 88%}
    89%{height: 89%}
    90%{height: 90%}
    91%{height: 91%}
    92%{height: 92%}
    93%{height: 93%}
    94%{height: 94%}
    95%{height: 95%}
    96%{height: 96%}
    97%{height: 97%}
    98%{height: 98%}
    99%{height: 99%}
    100%{height: 100%}
}

#world{
    display: none;
    position:absolute;
    width:100%;
    animation: dropConfetti 3s
}

.welcome-message{
    display: none;
}

.team-header{
    font-family: 'Ranchers', cursive;
    text-decoration: underline;
}

.save{
    display: none;
    margin: 0 auto
}