body {
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
    width: 100%;
}

a {
    color: #9b45bf;
}

a:hover {
    color: #de31de;
}

a.item:hover,
a.item:hover > h3 > .amethyst.content,
a.item:hover > .content > .news.header {
    color: #9b45bf !important;
}

a.wireframe.column {
    background-color: transparent; 
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75) inset !important;
    border-radius: .28571429rem;
    margin: 0 1em;
    padding: 1em 0 0 0 !important;
    width: 8em !important;
    height: 2.25em !important;
    -webkit-transition: box-shadow 0.1s, color 0.1s;
    transition: box-shadow 0.1s, color 0.1s;
}

a.wireframe.column:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1.0) inset !important;
}

.command {
    font-family: monospace;
    white-space: pre;
    background-color: #f5f5f5;
    border-radius: 2px;
    padding: 0 3px;
}

.hero.image {
    background:
        linear-gradient(
            to bottom right,
            rgba(163, 3, 171, 0.9),
            rgba(62, 1, 154, 0.9)
        ),
        url('/assets/amethyst.svg');
    border: 0;
}

.hero.container {
    margin: 8em 0.5em 8em 0.5em;
}

.branch.item.active {
    font-weight: 600;
}

.vertically.centered {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.header, h1, h2, h3, h4, h5, h6, b {
    font-family: 'Rajdhani', sans-serif;
}

.head {
    background-color: #ffffff;
}

i.icon {
    font-family: "Icons" !important;
}

.item > .icon {
    padding-top: 0.25em;
}

.push {
    padding-top: 2em;
    padding-bottom: 2em;
}

.push.bottom {
    padding-top: 0em;
    padding-bottom: 2em;
}

.push.far {
    padding-top: 4em;
    padding-bottom: 4em;
}

.push.bottom.far {
    padding-top: 0em;
    padding-bottom: 4em;
}

.site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.amethyst {
    padding: 0 !important;
}

.following.bar {
    border-bottom: 1px solid #DDDDDD;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);
    z-index: 10;
}

.main.container {
    flex: 1;
    padding-top: 0em;
    padding-bottom: 0.5em;
}

.footer.segment {
    padding-top: 3em;
    padding-bottom: 3em;
}

.news.header {
    font-size: 18px;
}

.ui.header {
    position: relative;
}

.date.description {
    font-size: 12px;
}

.missing.container {
    padding-top: 6em;
    padding-bottom: 6em;
}

.ui.menu .branch.active.item {
    font-weight: 600 !important;
    background-color: #e0e0e0;
}

/* Changing input placeholder text color to something easier to see */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #777 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #777 !important;
    opacity: 1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #777 !important;
    opacity: 1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #777 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: #777 !important;
}

.ui.menu {
    box-shadow: 0 0 0 0;
    border-radius: 0px;
}

.post.prompt {
    border-radius: 0px !important;
    border-bottom-width: 0px !important;
    border-top-width: 0px !important;
    border-right-width: 0px !important;
}

.post.prompt:focus {
    border-left-color: rgba(34, 36, 38, 0.15) !important;
}

.spanning.link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.spanning.link:hover {
    background: rgba(0.0, 0.0, 0.0, 0.08);
}

.item {
    transition: color 0s ease, padding-left 0s ease, background-color 0s ease !important;
}

.selection.list > .item:hover {
    background-color: rgba(0.0, 0.0, 0.0, 0.08) !important; 
}

blockquote {
    border-left-color: rgba(220, 220, 220);
    border-left-style: solid;
    border-left-width: 5px !important;
    margin: 0px 0px 15px 3px;
    padding-left: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 16px;
}

/* Prevent annoying highlighting */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* Mobile */

@media only screen and (max-width: 542px) {
  .ui.menu.bar { 
      display: block;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      padding-bottom: 1em;
  }

  .ui.menu.bar > .header.item {
      width: 50%;
  }

  .ui.menu.bar > .ui.right.github.item {
      position: absolute;
      right: -1em;
      top: -1em;
  }
}

@media only screen and (max-width: 767px) {
    .ui.container {
        width: auto !important;
        margin-left: 1em !important;
        margin-right: 1em !important;
    }

    .ui.grid.container {
        width: auto !important;
    }

    .ui.relaxed.grid.container {
        width: auto !important;
    }

    .ui.very.relaxed.grid.container {
        width: auto !important;
    }
}

/* Tablet */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ui.container {
        width: 600px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ui.grid.container {
        width: calc( 600px  +  2rem ) !important;
    }

    .ui.relaxed.grid.container {
        width: calc( 600px  +  3rem ) !important;
    }

    .ui.very.relaxed.grid.container {
        width: calc( 600px  +  5rem ) !important;
    }
}

/* Small Monitor */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ui.container {
        width: 800px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ui.grid.container {
        width: calc( 800px  +  2rem ) !important;
    }

    .ui.relaxed.grid.container {
        width: calc( 800px  +  3rem ) !important;
    }

    .ui.very.relaxed.grid.container {
        width: calc( 800px  +  5rem ) !important;
    }
}

/* Large Monitor */

@media only screen and (min-width: 1200px) {
    .ui.container {
        width: 950px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ui.grid.container {
        width: calc( 950px  +  2rem ) !important;
    }

    .ui.relaxed.grid.container {
        width: calc( 950px  +  3rem ) !important;
    }

    .ui.very.relaxed.grid.container {
        width: calc( 950px  +  5rem ) !important;
    }
}