html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #545E75;
}

.header{
  
  background-color: #304D6D;
  background-image: url("./images/general/coat3.png");
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: 200px 200px;
  height: 200px;
  width: 100%;
  top: 0;
  border: solid 2pt black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.titletext{
  font-size: 128pt;
  color: white;
  font-family: "Manufacturing Consent", system-ui;
}



.main{
  position: relative;
  background-image: url("./images/general/knights.png");
  display: flex;
  flex-direction: row;
  justify-content: center; 
  
  
  
  margin-bottom: 5%;
  width: 100%;
}

.leftpanel{
  position: absolute;

  left: 0;
  outline: solid 5pt purple;
  height: 500px;
  width: 150px;
  margin-right: 5%;
  
}

.middlepanel{
  display: flex;
  flex-direction: column;
  align-items: center;
  
  padding: 10px;

  background-color: #A7CCED;
  outline: solid 5pt #304D6D;
  height: 850px;
  width: 600px;

  margin-top: 5%;
  margin-bottom: 5%;

  border-radius: 25px;
}

.middletext{
  margin-top: 5%;
  font-size: 20pt;
}

.secondtext{
  font-size: 16pt;
  margin-top: 5%;
  margin-bottom: 5%;
}

.thirdtext{
  font-size: 20pt;
}