@import url(_colours.css);
@import url(_fonts.css);
@import url(_size.css);
@import url(_media-player.css);


/*****************************
* GENERAL RULES
*****************************/

body {
     background: var(--background);
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
}

nav,
.md-header {
     background-color: var(--transparent);
}

a.md-header__button {
     display: none !important;
}

.md-typeset a:hover {
     text-decoration: none;
}

.md-header--shadow {
     box-shadow: none;
}

.md-header__topic:first-child {
     display: none;
}

/* Change colour of search highlighting. */
.md-search-result__link:focus,
.md-search-result__link:hover {
     background-color: var(--transparent);
}

.md-typeset mark {
     background-color: var(--transparent);
}

/* This was creating an annoying space at the top. */
article.md-content__inner.md-typeset:before,
article.md-content__inner.md-typeset:after {
     content: none;
}

.md-typeset figcaption {
     max-width: none;
}

/* Hide the repo stuff */
.md-source {
     display: none !important;
}

/*****************************
* BUTTON
*****************************/

div.button {
     font-family: var(--secondary-font);
     border-bottom: 3px solid var(--secondary-colour);
     width: fit-content;
     padding-bottom: 3px;
     font-weight: bold;

     &:hover {
          border-bottom: 3px solid white;
     }
}


/*****************************
* STATUS
*****************************/

div.status-green {
     background-color: #007a5a;
     color: var(--background-colour);
     border-radius: 5px;
     padding: 5px 15px;
     text-transform: uppercase;
     font-family: var(--secondary-font);
     font-weight: 900;
     font-size: 0.8em;
     width: fit-content;
     margin: 0;
     letter-spacing: 0.3em;
     margin-bottom: 15px;
}

/*****************************
* TOOLTIP
*****************************/

.md-annotation__index {
     overflow: inherit;
     vertical-align: inherit;
}

.md-tooltip {
     box-shadow: none;
     border: 1px solid var(--secondary-colour);
     padding: 3px;
     margin: 0;
}

.md-tooltip__inner {
     font-family: var(--secondary-font);
     font-size: 0.8em;
     padding-top: 0;
     padding-bottom: 0;
}

/*****************************
* FOOTER
*****************************/

div.footer {
     margin: 30px 5px 5px 0;
     padding-bottom: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: row;
}

div.footer>*:not(:last-child)::after {
     content: " | ";
     margin: 0 8px;
}

/*****************************
* RESPONSIVE
*****************************/

@media (max-width: 768px) {
     .faces {
          flex-direction: column;
     }


     .three-column {
          grid-template-columns: 1fr;

          .column:nth-child(1) {
               padding-left: 20px;
          }

          .column:nth-child(2) {
               border: none;
          }
     }

}