<div id="tournamentPage">
	<div class="top-bracket">
		<p id="actuality-tournament">Waiting for opponent...</p>
		<p id="code-tournament">Code : 45HW28</p>
	</div>
	<div class="bracket">
		<div class="left" style="margin-top: 100px;">
			<div class="container">
				<p id="user-1" class="nameText" style="top: 20px">username1</p>
				<div class="circle" id="pfp-1"></div>
				<div class="vertical-line">
					<div class="horizontal-container">
						<div class="horizontal-line"></div>
						<div class="circle" id="pfp-3">
							<div class="container" style="margin-top: 50px;">
								<div class="vertical-line-demi" style="height: 220px">
									<div class="horizontal-container-final" style="margin-left: -105px;">
										<div class="horizontal-line"></div>
										<div class="circle" id="pfp-12"></div>
										<p style="position:absolute; right: 2px; bottom: 32px; color: white; font-size: 35px;">VS</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="circle" id="pfp-2"></div>
				<p id="user-2" class="nameText" style="top: 295px">username2</p>
				<div class="container" style="margin-top: 70px;">
					<p id="user-4" class="nameText" style="top: 520px">username4</p>
					<div class="circle" id="pfp-4"></div>
					<div class="vertical-line">
						<div class="horizontal-container">
							<div class="horizontal-line"></div>
							<div class="circle" id="pfp-9"></div>
						</div>
					</div>
					<div class="circle" id="pfp-5"></div>
					<p id="user-5" class="nameText" style="top: 250px">username5</p>
				</div>
			</div>
		</div>

		<div class="right" style="margin-left: -35px; margin-top: 0px;">
			<div class="container">
				<div class="horizontal-container" style="margin-top: 75px;">
					<div class="circle" id="pfp-58">
					</div>
					<div class="horizontal-line"></div>
					<div class="container" style="margin-left: -25px;">
						<div style="display: flex; flex-direction: row; ">
							<div class="circle" id="pfp-27">
								<div class="horizontal-container" style="position: absolute; left: 170px; transform: translateY(-38%); display: flex; flex-direction: row; align-items: center; justify-items: center; z-index: -1;">
									<div class="horizontal-line"></div>
									<div style="display: flex; flex-direction: column; align-items: center; margin-left: -25px; justify-items: center;">
										<p style="position: absolute; top: -55px" id="user-13" class="nameText">username13</p>
										<div class="circle" id="pfp-13"></div>
										<div class="vertical-line"></div>
										<p style="position: absolute; bottom: -55px;" id="user-14" class="nameText">username14</p>
										<div class="circle" id="pfp-14"></div>
									</div>
								</div>
							</div>
							
						</div>
						<div class="vertical-line-demi" style="height: 260px;">
							<div class="horizontal-container-final"></div>
						</div>
						<div style="display: flex; flex-direction: row;">
							<div class="circle" id="pfp-31">
								<div class="horizontal-container" style="position: absolute; left: 170px;  transform: translateY(-37%); z-index: -1;">
									<div class="horizontal-line"></div>
									<div style="display: flex; flex-direction: column; align-items: center; margin-left: -25px; justify-items: center;">
										<div class="circle" id="pfp-15"></div>
										<p style="position: absolute; top: -55px;" id="user-15" class="nameText">username15</p>
										<div class="vertical-line"></div>
										<p style="position: absolute; bottom: -55px;" id="user-16" class="nameText">username16</p>
										<div class="circle" id="pfp-16"></div>
			
									</div>
		
								</div>
							</div>
						</div>
		
					</div>
				</div>
				
			</div>
		</div>
		<div class="all-tournament">
			<div class="info-tournament">
				<p id="info-title">Informations</p>
				<div class="infoo">
					
				</div>
			</div>
			<div class="chat-tournament">
				<p id="chat-title">Chat</p>
				<div class="chat">
				</div>
				<div class="inputMessageDiv">
					<textarea type="text" id="inputMessage" placeholder="Enter your message here"></textarea>
					<p id="sendButton">></p>
				</div>
			</div>
		</div>
	</div>
	<div class="bottom">
		<div class="buttonStartGame" id="quitButton">
			<p>Quit</p>
		</div>
	</div>
</div>

