/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: "Open Sans", sans-serif;
  color: #444444;
  background-color: #fddb1d;
  background-image: url("../img/backpattern.png");
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul{
  list-style: none;
}

:root{

  --primary-red: #8e0a13;

  --primary-yellow: #fddb1d;

}

/*--------------------------------------------------------------
# theBox
--------------------------------------------------------------*/
#theBox{
  padding-top: 50px;
}

#header{
  margin-bottom: 35px;
}

#header h1{
  font-weight: bolder;
  color: white;
}

#header h2{
  font-weight: 300;
  font-style: italic;
  color: white;
  font-size: 25px;
}

#logo{
  width: 120px;
  height: 120px;
  align-self: center;
  margin-bottom: 25px;
}

#logo img{
  border-radius: 70px;
  border: 4px solid var(--primary-red);
}

/*--------------------------------------------------------------
# insideBox
--------------------------------------------------------------*/
#ulTitle{
  font-weight: bolder;
  color: var(--primary-red);
  font-size: 18px;
  margin-bottom: 20px;
  align-self: center;
}

.myButton {
  box-shadow: 0px 10px 14px -7px var(--primary-red);
  background-color:var(--primary-red);
  border-radius:4px;
  border:1px solid var(--primary-red);
  display:inline-block;
  cursor:pointer;
  color:white;
  font-size:20px;
  font-weight:bolder;
  width: 350px;
  height: 56px;
  text-decoration:none;
  text-shadow:0px 1px 0px #5b8a3c;
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.myButton:hover {
  background-color:white;
  color: var(--primary-red);
  box-shadow:unset;
}
.myButton:active {
  position:relative;
  top:1px;
}