* {
  box-sizing: border-box;
}

body {
    color: #777777;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    background: url("../images/seigaiha.png");
}

nav {
  width: 100%;
  padding: 15px;
}

.navbar {
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #5B2A8C;
  height: 70px;
}

.nav-link {
  color: #a395b4;
}

.nav-link:active {
  color: #ffffff;
}

.greyLink:hover {
  color: #762EA6;
}

.portolinks {
  color: #762EA6;
}

#logo {
  color: #ffffff;
  background-color: #5B2A8C;
  font-weight: bold;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: x-large;
  padding: 10px;
  margin-left: 20px;
}

.container {
  background-color: #ffffff;
  width: 768px;
  margin: 60px 30px 60px 30px;
  padding: 15px;
  border: 1px solid #A993BF;
}

main {
  min-height: calc(100vh - 70px);
}

.titlebox {
  background-color: #ffffff;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #A993BF;
  margin: 10px 10px 10px 0px;
}

h1 {
  color: #762EA6;
  font-family: Georgia, Times, Times New Roman, serif;
  font-weight: bold;
}

#moreInfo {
  margin-top: 10px;
}

.projects {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #000000;
  font-weight: bold;
}

.main-content {
  background-color: #ffffff;
}

.form-group {
  width: 75%;
}

.dark {
  font-weight: 600;
}

.mellow{
  font-weight: lighter;
}

.btn-primary {
  background-color: #762EA6;
  color: #ffffff;
  font-size: 15px;
  padding: 15px 30px;
  border: 1px solid #762EA6;
  border-radius: 0;
  margin-bottom: 10px;
}

footer {
  background-color: #A395B4;
  color: #ffffff;
  text-align: center;
  width: 100%;
  padding: 15px;
  height: 50px;
  border-top: 3px solid #5B2A8C;
}

@media screen and (max-width: 576px) {

  .container {
    width: 100%;
    padding: 20px;
  }

  .main-content,
  .titlebox {
    width: 100%;
  }

}