styles.scss

$panel-black: #1e1f26;
@import "~normalize-scss";

@import './styles/index';

// body {
//   margin: 0;
//   padding: 0;
//   background-image: url(https://wow.zamimg.com/uploads/screenshots/normal/151056-explore-duskwood.jpg);
//   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
// }

.main {
  max-width: 960px;
  margin: 5px auto;
  background: $panel-black;
  padding-bottom: 20px;
  .row {
    display: flex;
  }
}

.create-post-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  * {
    font-size: 18px;
    padding: 5px;
    margin: 5px 15px;
  }
  button {
    width: 25%;
    align-self: flex-end;
  }
  h2 {
    color: white;
  }
  span.feature {
    color: white;
  }
}

.about,
.login,
.apply,
.members,
.applicant,
.profile,
.events {
  color: white;
  padding: 15px;
}
.events h4 a {
  color: white;
}
.btn {
  padding: 5px;
  cursor: pointer;
  margin-right: 5px;
  &.btn-primary {
    border: 1px solid darken(#087bc1, 5%);
    background: #087bc1;
    color: white;
    &:hover {
      background: darken(#087bc1, 5%);
    }
  }
  &.btn-danger {
    border: 1px solid darken(#e83030, 5%);
    background: #e83030;
    color: white;
    &:hover {
      background: darken(#e83030, 10%);
    }
  }
  &.btn-success {
    border: 1px solid darken(#248c46, 5%);
    background: #248c46;
    color: white;
    &:hover {
      background: darken(#248c46, 5%);
    }
  }
}
table.selector {
  width: 100%;
  border: 1px solid $panel-black;
  border-collapse: collapse;
  td {
    background: lighten($panel-black, 5%);
    color: white;
    padding: 5px 10px;
    text-align: center;
    border: 1px solid $panel-black;
  }
  thead td {
    background: lighten($panel-black, 10%);
  }
  tbody tr:hover {
    cursor: pointer;
    td {
      background: lighten($panel-black, 20%);
    }
  }
}
table.info  {
    color: white;
    margin-bottom: 15px;
    border-collapse: collapse;
    td {
        padding: 5px 15px;
        border: 2px solid $panel-black;
        background: lighten($panel-black, 5%);
        margin: 1px;
        &:first-child {
            background: lighten($panel-black, 10%);
        }
    }
}
table.form  {
    color: white;
    margin-bottom: 15px;
    border-collapse: collapse;
    &.apply-form {
        width: 100%;
        td:first-child {
            width: 30%;
            max-width: 30%;
        }
    }
    td {
        border: 2px solid $panel-black;
        background: lighten($panel-black, 5%);
        margin: 1px;
        padding: 5px 10px;
        select {
            width: 100%;
            padding: 5px;
        }
        input {
            padding: 5px;
            width: calc(100% - 15px);
        }
        textarea {
            width: calc(100% - 5px);
        }
        &:first-child {
        padding: 5px 10px;
            text-align: right;
            background: lighten($panel-black, 10%);
        }
    }
    tr:last-child {
        td {
            padding: 10px;
        }
    }
}
table.accepted {
  width: 100%;
  color: white;
  border-collapse: collapse;
  margin-bottom: 15px;
  thead {
      background: lighten($panel-black, 10%)
  }
  td {
      padding: 5px 10px;
      border: 1px solid $panel-black;
      text-align: center;
  }
}