h1 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: black;
    margin-bottom: 0px;
}
hr {
    line-height: 2px;
    color: black;
}
h2, h3 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: black;
    margin:0px
}
h4 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: black;
    margin-bottom: 30px;
    margin-top: 0px;
}
div.kotak0 {
    display: flex;
    flex-direction: row;
    position: absolute;
}
div.kotak1 {     
    display: block;
    width: 250px;
    height: 400px;
    border: none;
    padding: 5px; 
    margin-right: 18px;
}

div.round1 {
    display: block;    
    margin-bottom: 50px; 
}


div.round1 .player1 {
    position: relative; /* Menambahkan posisi relative agar ::after bisa diposisikan relatif terhadap elemen ini */
    display: block; 
    width: 260px;
	height: 70px;
	border-radius: 20px;    
    border: 2px solid red;
    border-right: 20px solid red;
	padding-top:0px;
    padding-left: 0px;
    text-align: left;
	font-family: Arial;
	font-weight: bold;
    font-size: small;
    margin-bottom: 40px;
	margin-top: 0px
}

div.round1 .player1::after {
    content: "AKA";
    position: absolute;
    right: -1px; /* Posisi di luar area border-right */
    top: 0; /* Posisi di bagian atas elemen induk */
    bottom: 0; /* Mengisi hingga bagian bawah elemen induk */
    width: 40px; /* Sesuaikan dengan lebar border-right */
    background: red; /* Warna latar belakang yang sama dengan border-right */
    color: white; /* Warna teks putih agar kontras dengan latar belakang merah */
    font-size: 17px; /* Sesuaikan ukuran font sesuai kebutuhan */
    font-weight: bold; /* Membuat teks lebih menonjol */
    display: flex; /* Menggunakan flexbox untuk vertikal dan horizontal alignment */
    align-items: center; /* Menyelaraskan teks secara vertikal */
    justify-content: center; /* Menyelaraskan teks secara horizontal */
}


div.round1 .player2 {
    position: relative; /* Menambahkan posisi relative agar ::after bisa diposisikan relatif terhadap elemen ini */
    display: block; 
    width: 260px;
	height: 70px;
	border-radius: 20px;    
    border: 2px solid blue;
    border-right: 20px solid blue;
	padding-top:0px;
    padding-left: 0px;
    text-align: left;
	font-family: Arial;
	font-weight: bold;
    font-size: small;
	margin-top: 0px;
    margin-bottom: -40px;
}

div.round1 .player2::after {
    content: "AO";
    position: absolute;
    right: -1px; /* Posisi di luar area border-right */
    top: 0; /* Posisi di bagian atas elemen induk */
    bottom: 0; /* Mengisi hingga bagian bawah elemen induk */
    width: 40px; /* Sesuaikan dengan lebar border-right */
    background: blue; /* Warna latar belakang yang sama dengan border-right */
    color: white; /* Warna teks putih agar kontras dengan latar belakang merah */
    font-size: 17px; /* Sesuaikan ukuran font sesuai kebutuhan */
    font-weight: bold; /* Membuat teks lebih menonjol */
    display: flex; /* Menggunakan flexbox untuk vertikal dan horizontal alignment */
    align-items: center; /* Menyelaraskan teks secara vertikal */
    justify-content: center; /* Menyelaraskan teks secara horizontal */
}

div.bracketr1 {
    width: 305px;
    height: 100px;
    border-top:none;
    border-bottom:none;
    border-left:none;
    border-right: 3px solid black; 
    border-radius: 30px;   
    margin-top: -90px;
    margin-left: 0px;   
    
  }
  div.garisbracketr1 {
    width: 25px;
    border-bottom: 3px solid black;
    margin-top: -50px;
    margin-left: 305px;   
  }

  div.kotak2 { 
    display: block;    
    width: 250px;
    height: 400px;    
    padding: 5px; 
}

div.round2 {
    display: block;     
}

div.round2 .player1 {
    position: relative; /* Menambahkan posisi relative agar ::after bisa diposisikan relatif terhadap elemen ini */
    display: block; 
    width: 260px;
	height: 70px;
	border-radius: 20px;    
    border: 2px solid red;
    border-right: 20px solid red;
	padding-top:0px;
    padding-left: 0px;
    text-align: left;
	font-family: Arial;
	font-weight: bold;
    font-size: small;
    margin-top: 40px; 
    margin-bottom: 120px;
	margin-left	:50px;
}

div.round2 .player1::after {
    content: "AKA";
    position: absolute;
    right: -1px; /* Posisi di luar area border-right */
    top: 0; /* Posisi di bagian atas elemen induk */
    bottom: 0; /* Mengisi hingga bagian bawah elemen induk */
    width: 40px; /* Sesuaikan dengan lebar border-right */
    background: red; /* Warna latar belakang yang sama dengan border-right */
    color: white; /* Warna teks putih agar kontras dengan latar belakang merah */
    font-size: 17px; /* Sesuaikan ukuran font sesuai kebutuhan */
    font-weight: bold; /* Membuat teks lebih menonjol */
    display: flex; /* Menggunakan flexbox untuk vertikal dan horizontal alignment */
    align-items: center; /* Menyelaraskan teks secara vertikal */
    justify-content: center; /* Menyelaraskan teks secara horizontal */
}

div.round2 .player2 {
    position: relative; /* Menambahkan posisi relative agar ::after bisa diposisikan relatif terhadap elemen ini */
    display: block; 
    width: 260px;
	height: 70px;
	border-radius: 20px;    
    border: 2px solid blue;
    border-right: 20px solid blue;
	padding-top:0px;
    padding-left: 0px;
    text-align: left;
	font-family: Arial;
	font-weight: bold;
    font-size: small;
    margin-top: -70px;  
    margin-bottom: 90px;
	margin-left	:50px;
}

div.round2 .player2::after {
    content: "AO";
    position: absolute;
    right: -1px; /* Posisi di luar area border-right */
    top: 0; /* Posisi di bagian atas elemen induk */
    bottom: 0; /* Mengisi hingga bagian bawah elemen induk */
    width: 40px; /* Sesuaikan dengan lebar border-right */
    background: blue; /* Warna latar belakang yang sama dengan border-right */
    color: white; /* Warna teks putih agar kontras dengan latar belakang merah */
    font-size: 17px; /* Sesuaikan ukuran font sesuai kebutuhan */
    font-weight: bold; /* Membuat teks lebih menonjol */
    display: flex; /* Menggunakan flexbox untuk vertikal dan horizontal alignment */
    align-items: center; /* Menyelaraskan teks secara vertikal */
    justify-content: center; /* Menyelaraskan teks secara horizontal */
}

div.bracketr2 {
    width: 305px;
    height: 170px;
    border-top:none;
    border-bottom:none;
    border-left:none;
    border-right: 3px solid black; 
    border-radius: 30px;    
    margin-top: -160px;
    margin-bottom: 0px;
    margin-left: 50px;   
  }
  div.garisbracketr2 {
    width: 20px;
    border-bottom: 3px solid black;
    margin-top: -80px;
    margin-bottom: 110px;
    margin-left: 355px;
  }

  div.kotak3 { 
    display: block;    
    width: 250px;
    height: 700px;    
    padding: 5px;     
    margin-left: 15px;
}
  div.round3 {
    display: block;     
}

div.round3 .player1 {
    position: relative; /* Menambahkan posisi relative agar ::after bisa diposisikan relatif terhadap elemen ini */
    display: block; 
    width: 260px;
	height: 70px;
	border-radius: 20px;    
    border: 2px solid red;
    border-right: 20px solid red;
	padding-top:0px;
    padding-left: 0px;
    text-align: left;
	font-family: Arial;
	font-weight: bold;
    font-size: small;
	margin-bottom:220px;
	margin-left:100px;
	margin-top:130px;
}

div.round3 .player1::after {
    content: "AKA";
    position: absolute;
    right: -1px; /* Posisi di luar area border-right */
    top: 0; /* Posisi di bagian atas elemen induk */
    bottom: 0; /* Mengisi hingga bagian bawah elemen induk */
    width: 40px; /* Sesuaikan dengan lebar border-right */
    background: red; /* Warna latar belakang yang sama dengan border-right */
    color: white; /* Warna teks putih agar kontras dengan latar belakang merah */
    font-size: 17px; /* Sesuaikan ukuran font sesuai kebutuhan */
    font-weight: bold; /* Membuat teks lebih menonjol */
    display: flex; /* Menggunakan flexbox untuk vertikal dan horizontal alignment */
    align-items: center; /* Menyelaraskan teks secara vertikal */
    justify-content: center; /* Menyelaraskan teks secara horizontal */
}

div.round3 .player2 {
    position: relative; /* Menambahkan posisi relative agar ::after bisa diposisikan relatif terhadap elemen ini */
    display: block; 
    width: 260px;
	height: 70px;
	border-radius: 20px;    
    border: 2px solid blue;
    border-right: 20px solid blue;
	padding-top:0px;
    padding-left: 0px;
    text-align: left;
	font-family: Arial;
	font-weight: bold;
    font-size: small;
	margin-top:135px;
	margin-bottom:260px;	
	margin-left:100px;
}

div.round3 .player2::after {
    content: "AO";
    position: absolute;
    right: -1px; /* Posisi di luar area border-right */
    top: 0; /* Posisi di bagian atas elemen induk */
    bottom: 0; /* Mengisi hingga bagian bawah elemen induk */
    width: 40px; /* Sesuaikan dengan lebar border-right */
    background: blue; /* Warna latar belakang yang sama dengan border-right */
    color: white; /* Warna teks putih agar kontras dengan latar belakang merah */
    font-size: 17px; /* Sesuaikan ukuran font sesuai kebutuhan */
    font-weight: bold; /* Membuat teks lebih menonjol */
    display: flex; /* Menggunakan flexbox untuk vertikal dan horizontal alignment */
    align-items: center; /* Menyelaraskan teks secara vertikal */
    justify-content: center; /* Menyelaraskan teks secara horizontal */
}

div.bracketr3 {
    width: 305px;
    height: 350px;
    border-top:none;
    border-bottom:none;
    border-left:none;
    border-right: 3px solid black; 
    border-radius: 30px;    
    margin-top: -280px;    
    margin-left: 100px;  
  }
  div.garisbracketr3 {
    width: 30px;
    border-bottom: 3px solid black;
    margin-top: -170px;
    margin-left: 405px;
  }

  div.kotak4 { 
    display: block;    
    width: 250px;
    height: 700px;    
    padding: 5px;     
    margin-left: 110px;
    margin-top: -50px;
}
  div.round4 {
    display: block;     
}
  div.picr4p1 {
	display: block;
	width: 60px;
	height: 60px;
	margin-left:10px;
	margin-top:-75px;
	position: relative;
  }
  div.picr4p2 {
	display: block;
	width: 60px;
	height: 60px;
	margin-left:10px;
	margin-top:-75px;
	position: relative;
  }
  
div.round4 .player1 {
    position: relative; /* Menambahkan posisi relative agar ::after bisa diposisikan relatif terhadap elemen ini */
    display: block; 
    width: 260px;
	height: 70px;
	border-radius: 20px;    
    border: 2px solid red;
    border-right: 20px solid red;
	padding-top:0px;
    padding-left: 10px;
    text-align: left;
	font-family: Arial;
	font-weight: bold;
    font-size: small;
	margin-left:-240px;
	margin-top:320px;
}

div.round4 .player1::after {
    content: "AKA";
    position: absolute;
    right: -1px; /* Posisi di luar area border-right */
    top: 0; /* Posisi di bagian atas elemen induk */
    bottom: 0; /* Mengisi hingga bagian bawah elemen induk */
    width: 40px; /* Sesuaikan dengan lebar border-right */
    background: red; /* Warna latar belakang yang sama dengan border-right */
    color: white; /* Warna teks putih agar kontras dengan latar belakang merah */
    font-size: 17px; /* Sesuaikan ukuran font sesuai kebutuhan */
    font-weight: bold; /* Membuat teks lebih menonjol */
    display: flex; /* Menggunakan flexbox untuk vertikal dan horizontal alignment */
    align-items: center; /* Menyelaraskan teks secara vertikal */
    justify-content: center; /* Menyelaraskan teks secara horizontal */
}

div.round4 .player2 {
    position: relative; /* Menambahkan posisi relative agar ::after bisa diposisikan relatif terhadap elemen ini */
    display: block; 
    width: 260px;
	height: 70px;
	border-radius: 20px;        
    border: 2px solid blue;    
    border-right: 20px solid blue;
    padding-top:0px;
    padding-left: 10px;
    text-align: left;
    font-family: Arial;
	font-weight: bold;
    font-size: small;
	margin-top: 130px;
	margin-left:-240px;
}

div.round4 .player2::after {
    content: "AO";
    position: absolute;
    right: -1px; /* Posisi di luar area border-right */
    top: 0; /* Posisi di bagian atas elemen induk */
    bottom: 0; /* Mengisi hingga bagian bawah elemen induk */
    width: 40px; /* Sesuaikan dengan lebar border-right */
    background: blue; /* Warna latar belakang yang sama dengan border-right */
    color: white; /* Warna teks putih agar kontras dengan latar belakang merah */
    font-size: 17px; /* Sesuaikan ukuran font sesuai kebutuhan */
    font-weight: bold; /* Membuat teks lebih menonjol */
    display: flex; /* Menggunakan flexbox untuk vertikal dan horizontal alignment */
    align-items: center; /* Menyelaraskan teks secara vertikal */
    justify-content: center; /* Menyelaraskan teks secara horizontal */
}

div.bracketr4 {
    width: 305px;
    height: 710px;
    border-top:none;
    border-bottom:none;
    border-left:none;
    border-right: 3px solid black; 
    border-radius: 30px;    
    margin-top: -40px;
	margin-left:-220px;
  }
  div.garisbracketr4 {
    width: 30px;
    border-bottom: 3px solid black;
    margin-left: 130px;
	margin-top: -180px;
  }

  div.kotak5 { 
    display: block;    
    width: 250px;
    height: 700px;    
    padding: 5px;     
    margin-left: -390px;
}
  div.round5 {
    display: block;     
}

div.round5 .player1 {
    position: relative; /* Menambahkan posisi relative agar ::after bisa diposisikan relatif terhadap elemen ini */
    display: block; 	
    width: 250px;
	height: 70px;
	border-radius: 20px;        
    border: 2px solid gold;
    border-right: 20px solid  gold;
    padding-top:10px;
    padding-left: 10px;
    text-align: left;
    font-family: Arial;
	font-weight: bold;
    font-size: small;
    margin-top: 680px; 
    margin-bottom: 60px;
	margin-left: 220px;
}

div.round5 .player1::after {
    content: "WIN";
    position: absolute;
    right: -1px; /* Posisi di luar area border-right */
    top: 0; /* Posisi di bagian atas elemen induk */
    bottom: 0; /* Mengisi hingga bagian bawah elemen induk */
    width: 40px; /* Sesuaikan dengan lebar border-right */
    background: gold; /* Warna latar belakang yang sama dengan border-right */
    color: black; /* Warna teks putih agar kontras dengan latar belakang merah */
    font-size: 17px; /* Sesuaikan ukuran font sesuai kebutuhan */
    font-weight: bold; /* Membuat teks lebih menonjol */
    display: flex; /* Menggunakan flexbox untuk vertikal dan horizontal alignment */
    align-items: center; /* Menyelaraskan teks secara vertikal */
    justify-content: center; /* Menyelaraskan teks secara horizontal */
}

div.judul {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    text-align: center;
    font-weight: bold;
    margin: 20px;
}

div.logo-forki {
    display: block; 	
    width: 80px;
    height: 100px;
    margin-top: 650px; 
    margin-left: 220px;
}
div.logo-perguruan {
    display: block; 	
    width: 100px;
    height: 100px;
    margin-top: 650px; 
    margin-left: 205px;
}