body{
  width: 100%;
  border: 0.5px #ec74d0 solid;
  }
*{
  margin: auto;
  box-sizing: border-box;
}
/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: #920e74;
  padding: 20px 10px;
  border-radius: 1%;
}
/* Style the header links */
.header a {
  float: left;
  color: white;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 22px;
  line-height: 25px;
  border-radius: 4px;
}

.header h3 {
  float: left;
  color: white;
  text-align: center;
  padding: 12px;
  font-size: 22px;
  line-height: 25px;
  border-radius: 4px;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

.container1 {
  overflow: hidden;
  background-color: #ec74d0;
  padding: 20px 10px;
}

.container1 h1{
  text-align: center;
  color: whitesmoke;
}

.container1 h2{
  text-align: center;
  color: whitesmoke;
}
.container2 {
  overflow: hidden;
  background-color: #f8f4f7;
  padding: 20px 10px;
  height: 600px; 
}

.container2 h2{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container2 h3{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container2 a{
  overflow: hidden;
  color: rgb(85, 30, 109);
  text-align: center;
  list-style-type: none;
  text-decoration: none;
  margin: 0;
  font-size: large;
  padding: 5px 5px;
  font-family:inherit;
}

form{
  display: flex;
  flex-direction: column; 
  
}
.container2 form input{
  border-color: #ec74d0;
  margin: initial;
  border-radius: 4px;
  padding: 12px 20px;
}
.container2 form button{
  padding: 12px 20px;
  background-color: coral;
}
.column .container2 form select{
  min-width: 120px;
}

.container3 {
  overflow: hidden;
  background-color: #f8f4f7;
  padding: 20px 10px;
  height: 800px; 
}

.container3 h2{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container3 h3{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container3 a{
  overflow: hidden;
  color: rgb(85, 30, 109);
  text-align: center;
  list-style-type: none;
  text-decoration: none;
  margin: 0;
  font-size: large;
  padding: 5px 5px;
  font-family:inherit;
}

.container3 form input{
  border-color: #ec74d0;
  margin: initial;
  border-radius: 4px;
  padding: 12px 20px;
}
.container3 form button{
  padding: 12px 20px;
  background-color: coral;
}
.column .container3 form select{
  min-width: 120px;
}

.container4 {
  overflow: hidden;
  background-color: #f8f4f7;
  padding: 20px 10px;
  height: 650px; 
}

.container4 h2{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container4 h3{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container4 p{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container4 a{
  overflow: hidden;
  color: rgb(85, 30, 109);
  text-align: center;
  list-style-type: none;
  text-decoration: none;
  margin: 0;
  font-size: large;
  padding: 5px 5px;
  font-family:inherit;
}

.container4 form input{
  border-color: #ec74d0;
  margin: initial;
  border-radius: 4px;
  padding: 12px 20px;
}
.container4 form button{
  padding: 12px 20px;
  background-color: coral;
}
.column .container4 form select{
  min-width: 120px;
}

.container5 {
  overflow: hidden;
  background-color: #f8f4f7;
  padding: 20px 10px;
  height: 850px; 
  width: 100%;
}

.container5 h2{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container5 h3{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container5 p{
  text-align: center;
  font-size: 16px;
  color: rgb(85, 30, 109);;
}

.container5 a{
  overflow: hidden;
  color: rgb(85, 30, 109);
  text-align: center;
  list-style-type: none;
  text-decoration: none;
  margin: 0;
  font-size: large;
  padding: 5px 5px;
  font-family:inherit;
}

.container5 form input{
  border-color: #ec74d0;
  margin: initial;
  border-radius: 4px;
  padding: 12px 20px;
}
.container5 form button{
  padding: 12px 20px;
  font-size: 22px;
  background-color: coral;
  color: white;
}
.column .container5 form select{
  min-width: 120px;
}

.container6 {
  overflow: hidden;
  background-color: #f8f4f7;
  padding: 20px 10px;
  width: 100%;
  height: 580px; 
}

.container6 h2{
  text-align: center;
  color: rgb(170, 31, 230);;
}

.container6 h3{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container6 p{
  text-align: center;
  color: rgb(85, 30, 109);;
}

.container6 a{
  overflow: hidden;
  color: white;
  text-align: center;
  list-style-type: none;
  text-decoration: none;
  margin: 0;
  font-size: large;
  padding: 5px 5px;
  font-family:inherit;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  height: auto; /* Should be removed. Only for demonstration */
}

.column .container2 form select#course{
  margin: initial;
} 

.column .container2 form select#Programme{
  margin: initial;
}
.column .container2 form select#RecoveryQ{
  margin: initial;
}
.column .container2 form label{
  color: rgb(85, 30, 109);
}
.submitmsg .a:link {
  color: rgb(85, 30, 109);
  
}

#label1{
  color: rgb(85, 30, 109);
}

#label2{
  color: rgb(85, 30, 109);
}

#label3{
  color: rgb(85, 30, 109);
}

#email{
  font-size: small;
  color: gray;
  border-color: #ec74d0;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  padding: 12px 20px;
  width: 75%;
}

#password{
  font-size: small;
  color: gray;
  border-color: #ec74d0;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  padding: 12px 20px;
  width: 75%;
}

#studentid{
  font-size: small;
  color: gray;
  border-color: #ec74d0;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  padding: 12px 20px;
  width: 75%;
}

#surname{
  font-size: small;
  color: gray;
  border-color: #ec74d0;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  padding: 12px 20px;
  width: 75%;
}

#firstname{
  font-size: small;
  color: gray;
  border-color: #ec74d0;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  padding: 12px 20px;
  width: 75%;
}

#recoverya{
  font-size: small;
  color: gray;
  border-color: #ec74d0;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  padding: 12px 20px;
  width: 75%;
}

#course{
  font-size: small;
  color: gray;
  border-color: #ec74d0;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  padding: 12px 20px;
  width: 75%;
}

#semester{
  font-size: large;
  color: darkblue;
  border-color: rgb(212, 144, 42);
  border-radius: 4px;
  margin: initial;
  padding: 12px 20px;
  width: 30%;
  text-align: left;
  display: block;
  margin: 0 auto;
}

#programme{
  font-size: small;
  color: gray;
  border-color: #ec74d0;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  padding: 12px 20px;
  width: 75%;
}

#recoveryq{
  font-size: small;
  color: gray;
  border-color: #ec74d0;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  padding: 12px 20px;
  width: 75%;
}

.btn{
  font-size: large;
  cursor: pointer;
}

.btn1{
  font-size: large;
  cursor: pointer;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.btn2{
  font-size: large;
  cursor: pointer;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.btn:hover{
  background-color: #ec74d0;
}

a:hover{
  background-color: #ec74d0;
}

#tab1{
  align-items: center;
  text-align: center;
  font-size: 18px;
  width: 45%;
  color:orangered;
  border: 1px solid ;
  padding-right: 10px; 
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  border-color: rgb(212, 144, 42);
}

#tab2{
  align-items: center;
  text-align: left;
  text-indent: 15px;
  font-size: 18px;
  text-justify: distribute;
  padding-right: 40px; 
  padding-top: 100px;
  padding-bottom: 100px;
  padding-left: 50px;
  width: 70%;
  color:orangered;
  border: 1px solid;
  border-color: rgb(212, 144, 42);
}

#tab3{
  align-items: center;
  text-align: left;
  text-indent: 15px;
  font-size: 22px;
  text-justify: distribute;
  padding-right: 40px; 
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 90px;
  width: 45%;
  color:orangered;
  border: 1px solid;
  border-color: rgb(212, 144, 42);
}


#grade1 {
  font-size: large;
  color: orangered;
  border-color: rgb(212, 144, 42);
  margin: initial;
  border-radius: 4px;
  padding: 8px 20px;
  width: 20%;
}

#grade2 {
  font-size: large;
  color: orangered;
  border-color: rgb(212, 144, 42);
  margin: initial;
  border-radius: 4px;
  padding: 8px 20px;
  width: 20%;
}

#grade3 {
  font-size: large;
  color: orangered;
  border-color: rgb(212, 144, 42);
  margin: initial;
  border-radius: 4px;
  padding: 8px 20px;
  width: 20%;
}

#grade4 {
  font-size: large;
  color: orangered;
  border-color: rgb(212, 144, 42);
  margin: initial;
  border-radius: 4px;
  padding: 8px 20px;
  width: 20%;
}

#total {
  font-size: large;
  color: orangered;
  border-color: rgb(212, 144, 42);
  margin: initial;
  border-radius: 4px;
  padding: 12px 10px;
  width: 20%;

}

.footer {
  overflow: hidden;
  background-color: #920e74;
  padding: 20px 10px;
  border-radius: 1%;
  height: 150px;
  color: white;
  text-align: center;
}

footer a{    
  color: white; 
  line-height: 50px; 
  font-size: xx-large;
   
}

.fa {
  padding: 10px;
  font-size: 40px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

.fa:hover {
 background-color: #ec74d0;
}


.fa-facebook {
  background: inherit;
  color: white;
 }


.fa-instagram {
  background: inherit;
  color: white;
}


.fa-linkedin {
  background: inherit;
  color: white;
}
  
    
.fa-twitter {
  background: inherit;
  color: white;
}