@font-face {
  font-family: Bebas;
  src: url('../Fonts/BebasKai-Regular.otf');
}
*{
    margin: 0;
    padding: 0;
}

body {
    background-image: url('bn.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
  }
#bib{
  margin-top: 3%;
}
.back a{
  position: absolute;
  top: 1%;
  left: 1%;
  color: #fff;
  font-family: "Arial";
  font-size: 2rem;
  padding: 10px;
  border: 5px solid rgb(48, 48, 48);
  transition: all 0.5s ease-in-out;
  text-decoration: none;
  margin-left: 90%;
}
.back a:hover{
  color: orange;
  border: 10px solid rgb(90, 90, 90);
}
.info-container {
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 93%, rgba(255,255,255,0) 100%) ;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  text-align: left;
  height: 60%;
  position: absolute;
  margin-bottom: 0%;
  width: 100%;
  margin-top: 40%;

}
.text-container{
  font-family: Montserrat, Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 1rem;
color: white;
margin-top: 0%;
height: fit-content;

}
p.text-container {

  margin-top: 3rem;
  
}
#bib{
  margin-top: 3%;
}
.back a{
  position: absolute;
  top: 1%;
  left: 1%;
  color: #fff;
  font-family: "Arial";
  font-size: 2rem;
  padding: 10px;
  border: 5px solid rgb(48, 48, 48);
  transition: all 0.5s ease-in-out;
  text-decoration: none;
  margin-left: 90%;
}
.back a:hover{
  color: orange;
  border: 10px solid rgb(90, 90, 90);
}
h1{
  text-align: center;
  margin-top: 5%;
  color: white;
}
p{
  color: beige;
  margin-top: 5%;
  text-align: center;
}
p1{
  color: white;
  margin-left: 5%;
}
p2{
  color: gold;
}
p3{
  margin-left: 5%;
  color: beige;
}
p4{
  margin-left: 5%;
  color: beige;
}
p5{
  margin-left: 5%;
  color: white;
}
pp{
  color: gold;
}
pp1{
  color: white;
  margin-left: 5%;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: orange;
color: #444;
cursor: pointer;
padding: 18px;
width: 25%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
margin-top: 7%;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: orange;
}

/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: orange;
}
.collapsible:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: orange;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
h2{
  text-align: left;
  margin-top: 5%;
  color: beige;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}