base.less

@import './about.less';
@import './board.less';
@import './colors.less';
@import './teams.less';
@import './dimensions.less';
@import './errors.less';
@import './eventList.less';
@import './eventDetails.less';
@import './filteredListPage.less';
@import './footer.less';
@import './frontpage.less';
@import './header.less';
@import './images.less';
@import './infobox.less';
@import './legalNotice.less';
@import './mediaquery.less';
@import './profile.less';
@import './studydocList.less';
@import './studydocQuickFilter.less';
@import './studydocNew.less';
@import './fileUpload.less';
@import './filterView.less';
@import './jobofferList.less';
@import './jobofferDetails.less';

* {
  box-sizing: border-box;
}

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  background-color: #fff;

  @media @tablet, @mobile {
    font-size: 18px;
  }

  > div {
    width: 100%;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      'header'
      'content'
      'footer';
  }
}

section {
  width: 100%;
  margin: 3em 0 0;

  > * {
    max-width: @dimension-max-content-width;
    padding: 0 1em;
    margin: 0 auto;
  }

  &.blue {
    background-color: @color-dark-blue;
  }
}

main {
  position: relative;
  width: 100%;

  > * {
    max-width: @dimension-max-content-width;
    padding: 0 1em;
    margin: 0 auto;
  }

  > .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  > .error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    font-size: 2em;
    color: rgba(0, 0, 0, .54);
  }
}

h1 {
  margin: 2em 0;
}

.centered {
  text-align: center;
}

.external-link {
  position: relative;
  top: .13em;
  width: 1em;
  height: 1em;
  padding: 0 0 0 .25em;
}