body {
  font: Arial, Helvetica, sans-serif;
}

#container {
  width: 1050px;
  margin: 0 auto;
}

h1 a {
  font-size: 50px;
  font-weight: 100;
  color: #861bbf;
  text-decoration: none;
}

#header {
  height: 100px;
  padding: 10px 0;
}

#brand {
  float: left;
}

#searchBox {
  float: right;
  background: linear-gradient(#e4f2b9, #b7e953);
  background: -webkit-linear-gradient(#e4f2b9, #b7e953);
  background: -moz-linear-gradient(#e4f2b9, #b7e953);
  background: -o-linear-gradient(#e4f2b9, #b7e953);
  width: 400px;
  height: 50px;
  padding: 20px 20px 0 20px;
  margin-top: 20px;
}

.text {
  float: left;
  width: 200px;
  padding: 5px;
  font-size: 15px;
  color: #e36a0c;
  background: white
    url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22currentColor%22%20class%3D%22size-6%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22m15.75%2015.75-2.489-2.489m0%200a3.375%203.375%200%201%200-4.773-4.773%203.375%203.375%200%200%200%204.774%204.774ZM21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z%22%20%2F%3E%3C%2Fsvg%3E)
    no-repeat right padding-box;
  border: 1px solid #c8d03e;
}

.submit {
  float: right;
  padding: 5px;
  font-weight: bold;
  color: white;
  background: #a751d6;
  font-size: 15px;
}

.clear {
  clear: both;
}

#menu {
  height: 70px;
  background: linear-gradient(#f8f594, #d5d533);
  background: -webkit-linear-gradient(#f8f594, #d5d533);
  background: -moz-linear-gradient(#f8f594, #d5d533);
  background: -o-linear-gradient(#f8f594, #d5d533);
  padding: 7px 0;
}
ul {
  list-style: none;
}

#menu ul li {
  float: left;
  padding: 0 30px;
  height: 30px;
  border-right: 1px solid #5d12e7;
}

#menu ul li:last-child {
  border-right: none;
}

#menu ul li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 17px;
  color: #5d12e7;
  line-height: 30px;
  transition: font-size 0.3s ease;
  -webkit-transition: font-size 0.3s ease;
  -moz-transition: font-size 0.3s ease;
  -o-transition: font-size 0.3s ease;
  -ms-transition: font-size 0.3s ease;
}

#menu ul li a:hover,
#menu ul li a.active {
  font-size: 20px;
  font-weight: bold;
  color: #c34fdb;
}

#introduction {
  background: linear-gradient(#e5f2bb, #b7e952);
  background: -webkit-linear-gradient(#e5f2bb, #b7e952);
  background: -moz-linear-gradient(#e5f2bb, #b7e952);
  background: -o-linear-gradient(#e5f2bb, #b7e952);
  padding: 30px;
  margin: 15px 0;
}

#introduction h3 {
  font-size: 45px;
  color: #316901;
  font-weight: normal;
}

#introduction p {
  font-size: 25px;
  color: #316901;
  text-align: justify;
}

.sidebar {
  height: 500px;
  width: 450px;
  border: 1px solid #baf46f;
  border-radius: 20px;
  padding: 10px 30px;
}

.sidebar h3 {
  font-size: 30px;
  color: #b314db;
}

.sidebar ul {
  padding-top: 8px;
}

#left-sidebar ul li {
  padding-bottom: 6px;
  padding-left: 40px;
  background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22currentColor%22%20class%3D%22size-6%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22m12.75%2015%203-3m0%200-3-3m3%203h-7.5M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z%22%20%2F%3E%3C%2Fsvg%3E)
    no-repeat left center;
}
.sidebar ul li a {
  text-decoration: none;
  font-size: 20px;
  color: #5d12e7;
  transition: font-size 0.3s ease;
  -webkit-transition: font-size 0.3s ease;
  -moz-transition: font-size 0.3s ease;
  -o-transition: font-size 0.3s ease;
  -ms-transition: font-size 0.3s ease;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
  text-decoration: none;
  color: #c34fdb;
  font-size: 23px;
  font-weight: bold;
}

#left-sidebar {
  float: left;
}

#right-sidebar {
  float: right;
}

#right-sidebar ul li {
  padding: 20px 0 20px 70px;
  background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22currentColor%22%20class%3D%22size-6%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9%2012.75%2011.25%2015%2015%209.75M21%2012c0%201.268-.63%202.39-1.593%203.068a3.745%203.745%200%200%201-1.043%203.296%203.745%203.745%200%200%201-3.296%201.043A3.745%203.745%200%200%201%2012%2021c-1.268%200-2.39-.63-3.068-1.593a3.746%203.746%200%200%201-3.296-1.043%203.745%203.745%200%200%201-1.043-3.296A3.745%203.745%200%200%201%203%2012c0-1.268.63-2.39%201.593-3.068a3.745%203.745%200%200%201%201.043-3.296%203.746%203.746%200%200%201%203.296-1.043A3.746%203.746%200%200%201%2012%203c1.268%200%202.39.63%203.068%201.593a3.746%203.746%200%200%201%203.296%201.043%203.746%203.746%200%200%201%201.043%203.296A3.745%203.745%200%200%201%2021%2012Z%22%2F%3E%3C%2Fsvg%3E)
    no-repeat left center;
}

.footer {
  height: 60px;
  background: linear-gradient(#f6f390, #d5d533);
  background: -webkit-linear-gradient(#f6f390, #d5d533);
  background: -moz-linear-gradient(#f6f390, #d5d533);
  background: -o-linear-gradient(#f6f390, #d5d533);
  padding: 10px 30px;
  margin-top: 15px;
}