/**
 *
 **/

* {
  box-sizing: border-box;
}

/*
  The background color will be #ccc
  at browser widths above 768px
*/

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 20px;
  line-height: 24px;
  background-image: url("../images/Harry-Potter-Train-in-Scotland.jpg");
  background-repeat: no-repeat;
  background-color: white;
  background-size: cover;
  opacity: 0.9;
  size: 960px;
}

/*
  The width of the wrapper will be 1024px
  at browser widths above 768px
*/

.container-head {
  top: 0;
  left: 0;
  background-color: white ;
  width: 100%;
  padding-bottom: 10px;
}

.container-head2 {
  height: 15px;
  background-color: rgb(241, 223, 119);
}
.header-img {
  width: 240px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.header-img2 {
  width: 220px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}

.header-table td {
  padding-left: 20px;
  font-size: 18px;
  line-height: 20px;
  color: rgb(189, 65, 65);
  
}

thead th {
  color: rgb(189, 65, 65);
}

.row {
  margin-top: 20px;
}

.card-header {
  /* background-color: rgb(241, 223, 119); */

  background-color: rgb(181, 15, 15);
  color: rgb(241, 223, 119);
}

/* change border glow to red 
*/
.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}


.wrapper {
  /* Box-model */
  width: 1024px;
  /* Positioning */
  margin: 40px auto;
}

.main-content, .sidebar {
  /* Box-model */
  width: 500px;
  padding: 30px;
}

.main-content {
  /* Positioning */
  float: left;
  /* Visual */
  background: #fff;
}

.sidebar {
  /* Positioning */
  float: right;
  /* Visual */
  background: #eee;
}