@charset "UTF-8";
.row {
  margin-top: 4em;
  display: flex;
  flex-direction: column; }

.columns {
  display: flex;
  gap: 3em;
  flex-direction: row; }
  .columns > * {
    flex: 1; }
  .columns--grow-0 > * {
    flex: 0; }
  .columns--center {
    justify-content: center; }
  .columns--grow-first > * {
    flex: 1; }
    .columns--grow-first > *:first-child {
      flex: 1.5; }

ul.columns {
  padding: 0; }

.center {
  align-items: center; }

.p-relative {
  position: relative; }

.g-5 {
  gap: 5em; }

.g-4 {
  gap: 4em; }

.g-3 {
  gap: 3em; }

.g-2 {
  gap: 2em; }

.g-1 {
  gap: 1em; }

.g-0 {
  gap: 0; }

.m-5 {
  margin: 5em; }

.m-4 {
  margin: 4em; }

.m-3 {
  margin: 3em; }

.m-2 {
  margin: 2em; }

.m-1 {
  margin: 1em; }

.m-0 {
  margin: 0; }

.mb-5 {
  margin-bottom: 5em; }

.mb-4 {
  margin-bottom: 4em; }

.mb-3 {
  margin-bottom: 3em; }

.mb-2 {
  margin-bottom: 2em; }

.mb-1 {
  margin-bottom: 1em; }

.mb-0 {
  margin-bottom: 0; }

.mt-5 {
  margin-top: 5em; }

.mt-4 {
  margin-top: 4em; }

.mt-3 {
  margin-top: 3em; }

.mt-2 {
  margin-top: 2em; }

.mt-1 {
  margin-top: 1em; }

.mt-0 {
  margin-top: 0; }

.p-5 {
  padding: 5em; }

.p-4 {
  padding: 4em; }

.p-3 {
  padding: 3em; }

.p-2 {
  padding: 2em; }

.p-1 {
  padding: 1em; }

.p-0 {
  padding: 0; }

.pb-5 {
  padding-bottom: 5em; }

.pb-4 {
  padding-bottom: 4em; }

.pb-3 {
  padding-bottom: 3em; }

.pb-2 {
  padding-bottom: 2em; }

.pb-1 {
  padding-bottom: 1em; }

.pb-0 {
  padding-bottom: 0; }

.pt-5 {
  padding-top: 5em; }

.pt-4 {
  padding-top: 4em; }

.pt-3 {
  padding-top: 3em; }

.pt-2 {
  padding-top: 2em; }

.pt-1 {
  padding-top: 1em; }

.pt-0 {
  padding-top: 0; }

.w-100 {
  width: 100%; }

.w-75 {
  width: 75%; }

.w-66 {
  width: 66%; }

.w-50 {
  width: 50%; }

.w-33 {
  width: 33%; }

.w-25 {
  width: 25%; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading), serif;
  font-weight: var(--heading-weight);
  font-style: var(--heading-style);
  text-align: center; }
  h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
    margin-top: 0; }

a {
  color: var(--color-highlight);
  text-decoration: none; }
  a:hover {
    color: var(--color-highlight);
    text-decoration: underline; }

a[target="_blank"]:not(:has(img)):not(.file__link) {
  position: relative; }
  a[target="_blank"]:not(:has(img)):not(.file__link)::after {
    position: absolute;
    top: calc(50% - 0.5em);
    right: -0.5em;
    width: 1em;
    height: 1em;
    content: '';
    pointer-events: none;
    background-color: var(--color);
    mask: url("../icons/external-link-svgrepo-com.svg") center/contain no-repeat;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.2s ease; }
  a[target="_blank"]:not(:has(img)):not(.file__link):hover::after {
    opacity: 1; }

ul {
  padding-left: 0; }

figure {
  margin: 1em;
  text-align: center; }
  figure img {
    width: 100%; }
  figure figcaption {
    color: var(--color-secondary);
    font-size: 0.8em; }

.highlight {
  color: var(--color-highlight); }

.text--justify {
  text-align: justify; }

.text--center {
  text-align: center; }

/* based on Example Six - https://css-tricks.com/examples/CSSTabs/
  <div class="accordion">
    <div id="card-1" class="card card--open">
      <a class="card__title" href="#card-1">Card 1</a>
      <article class="card__body">
      </article>
    </div>
    <div id="card-2" class="card">
      <a class="card__title" href="#card-2">Card 2</a>
      <article class="card__body">
      </article>
    </div>
  </div>
 */
.accordion {
  width: 100%;
  border: 0.15rem solid var(--color);
  border-radius: 0.5rem; }

.accordion > .card:not(:first-child) {
  border-top: 0.05rem solid var(--color); }

.accordion > .card > * {
  margin: 0; }

.accordion > .card .card__title {
  display: block;
  margin: 0;
  padding: 0 0.5rem;
  text-decoration: none;
  color: var(--color); }
  .accordion > .card .card__title::before {
    display: inline-block;
    content: '\00BB';
    width: 1em;
    text-align: center; }

.accordion:not(:has(> .card:target)) > .card.card--open .card__title,
.accordion > .card:target .card__title {
  color: var(--color-highlight);
  border-bottom: 0.05rem solid var(--color); }
  .accordion:not(:has(> .card:target)) > .card.card--open .card__title::before,
  .accordion > .card:target .card__title::before {
    transform: rotate(90deg); }

.tabs > .tab:target .tab__title {
  color: var(--color-highlight); }
  .tabs > .tab:target .tab__title::before {
    transform: rotate(90deg); }

.accordion > .card > .card__content {
  padding: 0 2em;
  height: 0;
  overflow: hidden; }

.accordion:not(:has(> .card:target)) > .card.card--open > .card__content,
.accordion > .card:target > .card__content {
  height: auto;
  overflow: initial; }

/*
  <div class="files">
    <h2>Title of File List</h2> <!-- optional -->
    <ul class="file__list">
      <li class="file">
        <h3 class="file__name">File name</h3>
        <div class="file__date">upload date</div>
        <a class="file__link" href="files/file.ext">download</a>
        <div class="file__size">Size MiB</div>
      </li>
    </ul>
  </div>
 */
.files > ul {
  list-style: none;
  padding: 0; }

.file__list {
  --file-name-width: 1fr;
  display: grid;
  grid-template-columns: var(--file-name-width) max-content max-content max-content;
  column-gap: 1.5em;
  font-family: var(--files-font), sans-serif; }
  .file__list--name-25 {
    --file-name-width: 25%; }
  .file__list--name-33 {
    --file-name-width: 33%; }
  .file__list--name-50 {
    --file-name-width: 50%; }
  .file__list--name-66 {
    --file-name-width: 66%; }
  .file__list--name-75 {
    --file-name-width: 75%; }

.file {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-column-gap: 0.75em;
  align-items: start; }
  .file__name {
    margin: 0;
    padding: 0;
    font-size: 1.1em;
    font-family: var(--files-font-title), sans-serif;
    font-weight: 900;
    text-align: left; }
  .file__date {
    text-align: right; }
  .file__link {
    display: inline-flex;
    gap: 0.35em;
    align-items: center;
    text-align: right; }
    .file__link::after {
      width: 1em;
      height: 1em;
      background-color: var(--color);
      content: "";
      mask: url("../icons/pdf-file-svgrepo-com.svg") center/contain no-repeat; }
  .file__size {
    text-align: right; }

@media (max-width: 900px) {
  .file__list {
    grid-template-columns: 1fr;
    row-gap: 1em; }
  .file {
    grid-column: auto;
    grid-template-columns: 1fr repeat(2, max-content); }
    .file__name {
      grid-column: 1 / -1; }
    .file__date {
      text-align: left; } }

.institution {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8em;
  text-align: center;
  line-height: 1.5em; }
  .institution__title {
    margin-bottom: 0; }
  .institution__locality {
    color: var(--color-secondary);
    font-size: 0.8em;
    font-weight: 500;
    text-transform: uppercase; }
  .institution__logo {
    max-width: 20em; }
    .institution__logo > img {
      width: 100%; }
  .institution__affiliation {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1em; }
  .institution figcaption {
    font-size: 0.95em; }

/*
  <figure class="person">
    <img src="img.jpeg" alt="Given Family">
    <figcaption>
      <span class="person__name">
        <span class="person__name--given">Given</span>
        <span class="person__name--family">Family</span>
      </span>
      <span class="person__role">
        Project role
      </span>
      <span class="person__affiliation">
        Affiliation
      </span>
    </figcaption>
  </figure>
 */
.person {
  display: flex;
  gap: 0.2em;
  max-width: 20em; }
  .person img {
    align-self: flex-start;
    width: 5em; }
  .person figcaption {
    flex: 1;
    display: block;
    width: 100%; }
  .person__name {
    display: block;
    font-weight: 500; }
    .person__name--family {
      text-transform: uppercase; }
  .person__role {
    display: block; }
  .person__affiliation {
    display: block;
    border-top: 1px solid var(--color);
    font-size: 0.8em; }
  .person--former img {
    filter: grayscale(1) blur(0.1em);
    transition: filter 0.2s ease; }
    .person--former img:hover {
      filter: none; }

@media (max-width: 900px) {
  .person {
    max-width: 100%; } }

/*
  <footer>
    <div class="footer__content">
      Footer Content
    </div>
    <div class="footer__copyright">
      © Copyright Holder 2016 &mdash; 2026. All rights reserved
    </div>
    <div class="footer__implementation">
      Implementer
    </div>
  </footer>
 */
footer {
  margin: 4em auto 0;
  padding: 2em;
  border-top: 2px solid var(--color);
  background-color: var(--background-footer);
  color: var(--color-white); }

.footer__content {
  display: flex;
  gap: 2em;
  justify-content: center; }
  .footer__content h1 {
    border-bottom: 2px solid var(--color-highlight);
    margin: 0;
    font-size: 1.2rem;
    text-align: center; }
  .footer__content img {
    padding-top: 0.5em;
    width: 22em;
    height: auto; }

.footer__copyright {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem; }

.footer__implementation {
  display: flex;
  gap: 1em;
  justify-content: center;
  margin-top: 0.5rem;
  font-size: 0.7rem; }
  .footer__implementation a {
    color: var(--color-white); }

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

/*
  <div class="hero">
    <h1 class="hero__title">
      Hero Title
    </h1>
    <div class="hero__text">
      Some additional text
    </div>
  </div>
 */
.hero {
  min-height: 20em;
  background-image: url("../images/hero.jpg");
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--color);
  border-bottom: 1px solid var(--color); }
  .hero__title {
    max-width: var(--page-width);
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-gray-darker);
    font-family: 'Raleway', sans-serif;
    font-size: 4em;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 24px; }
  .hero__text {
    max-width: var(--page-width);
    margin: 0;
    text-align: center;
    color: var(--color-gray-darker);
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    font-style: italic;
    font-weight: 300; }

.theme-selection {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: flex-end; }

/* container must be positioned relative!
  <div class="theme-selection">
    <div class="theme-selector" role="group" aria-label="Color theme">
      <label><input id="theme-light" type="radio" name="theme"><span>Light</span></label>
      <label><input id="theme-dark" type="radio" name="theme"><span>Dark</span></label>
      <label><input id="theme-reset" type="radio" name="theme"><span>Reset</span></label>
    </div>
  </div>
 */
.theme-selector {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--color-gray-darker);
  border-radius: 1rem;
  background-color: var(--color-white); }
  .theme-selector label {
    cursor: pointer; }
    .theme-selector label:has(#theme-reset) {
      display: none; }
  .theme-selector input {
    position: absolute;
    opacity: 0; }
    .theme-selector input:focus-visible + span {
      outline: 2px solid var(--color-highlight);
      outline-offset: -2px; }
    .theme-selector input:checked + span {
      background-color: var(--color-highlight);
      color: var(--color-white); }
  .theme-selector span {
    display: block;
    padding: 0.15rem 0.65rem;
    color: var(--color-gray-darker);
    font-size: 0.8rem; }

:root[data-theme] .theme-selector label:has(#theme-reset) {
  display: block; }

/* container must be positioned relative!
  <div class="theme-selection">
    <label class="theme-slider">
      <span>Light</span>
      <input id="theme-slider" type="checkbox"><span class="theme-slider__track"></span>
      <span>Dark</span>
    </label>
  </div>
 */
.theme-slider {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  color: var(--color-gray-darker);
  cursor: pointer;
  font-size: 0.8rem; }
  .theme-slider input {
    position: absolute;
    opacity: 0; }
    .theme-slider input:checked + .theme-slider__track {
      background-color: var(--color-highlight); }
      .theme-slider input:checked + .theme-slider__track::before {
        transform: translateX(1.25rem); }
    .theme-slider input:focus-visible + .theme-slider__track {
      outline: 2px solid var(--color-highlight);
      outline-offset: 2px; }
  .theme-slider__track {
    position: relative;
    width: 2.5rem;
    height: 1.25rem;
    border: 1px solid var(--color-gray-darker);
    border-radius: 1rem;
    background-color: var(--color-white);
    transition: background-color 0.2s ease; }
    .theme-slider__track::before {
      position: absolute;
      top: 0.125rem;
      left: 0.125rem;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      content: '';
      background-color: var(--color-gray-darker);
      transition: transform 0.2s ease; }

/* container must be positioned relative!
  <div class="theme-selection">
    <div class="theme-toggle" role="group" aria-label="Color theme">
      <button id="theme-icon-toggle" class="theme-toggle__toggle" type="button">
        <span class="theme-toggle__icon" aria-hidden="true"></span>
      </button>
      <button id="theme-button-reset" class="theme-toggle__reset" type="button">
        Reset
      </button>
    </div>
  </div>
 */
.theme-toggle {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--color-gray-darker);
  border-radius: 1rem;
  background-color: var(--color-white); }
  .theme-toggle button {
    display: grid;
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    border: 0;
    place-items: center;
    background-color: var(--color-white);
    color: var(--color-gray-darker);
    cursor: pointer; }
    .theme-toggle button:focus-visible {
      outline: 2px solid var(--color-highlight);
      outline-offset: 2px; }
  .theme-toggle__icon {
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    mask: url("../icons/dark-theme-svgrepo-com.svg") center/contain no-repeat;
    transition: transform 0.2s ease; }
  .theme-toggle__toggle[data-theme-action="light"] .theme-toggle__icon {
    transform: rotate(180deg); }
  .theme-toggle__reset {
    font-size: 0.8rem; }

.theme-toggle button.theme-toggle__reset {
  border-left: 1px solid var(--color-gray-darker); }

:root:not([data-theme]) .theme-toggle__reset {
  display: none; }

/*
   <nav class="main-menu">
    <a class="menu__title" href="index.html">
      Page Title
    </a>
    <ul class="menu--horizontal">
      <li class="menu-item menu-item--active"><a href="index.html">Home</a></li>
      <li class="menu-item"><a href="page1.html">Page 1</a></li>
      <li class="menu-item"><a href="page2.html">Page 2</a></li>
    </ul>
  </nav>
 */
.main-menu {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color);
  background-color: var(--background-color);
  padding: 1em; }
  .main-menu .menu__title {
    font-size: 1.5rem;
    font-weight: 400; }
  .main-menu a.menu__title {
    text-decoration: none;
    color: var(--color); }
  .main-menu .menu--horizontal {
    display: flex;
    list-style: none;
    gap: 0;
    justify-content: end;
    margin: 0; }
    .main-menu .menu--horizontal .menu-item + .menu-item {
      border-left: 1px solid var(--color); }
  .main-menu .menu-item {
    padding: 0 1.3em;
    text-align: center; }
    .main-menu .menu-item a {
      color: var(--color);
      font-size: 1.0rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-decoration: none;
      text-transform: uppercase; }
      .main-menu .menu-item a:hover {
        border-bottom: 2px solid var(--color-highlight);
        color: var(--color-highlight); }
    .main-menu .menu-item--active a {
      border-bottom: 2px solid var(--color-highlight);
      color: var(--color-highlight); }

@media (max-width: 900px) {
  .main-menu .menu--horizontal {
    justify-content: center; }
  .main-menu .menu-item {
    padding: 0 0.5em; } }

img {
  padding: 0;
  border: 0.1em outset var(--color-gray-lighter);
  border-radius: 0.5rem;
  box-sizing: border-box;
  background-color: var(--color-white); }

a img {
  transition: filter 0.2s ease; }

a:hover img {
  filter: brightness(0.9); }

.unieuk--uni {
  font-weight: 300;
  color: var(--color-unieuk-uni); }

.unieuk--euk {
  font-weight: 500;
  color: var(--color-unieuk-euk); }

.unieuk__partners img, .unieuk__funders img {
  margin-top: 0.5em;
  padding: 0.3em; }

.unieuk__workflow img {
  padding: 0.3rem; }

.unieuk__workflow img {
  padding: 0.3rem; }

.card__title h3 {
  display: inline; }

.hero .unieuk--euk {
  color: var(--color-unieuk-dark); }

:root {
  --background-color: var(--color-white);
  --background-footer: var(--color-gray-darker);
  --color: var(--color-gray-darker);
  --color-inverse: var(--color-white);
  --color-secondary: var(--color-gray-light);
  --color-highlight: var(--color-unieuk-blue);
  --color-unieuk-uni: var(--color-unieuk-blue);
  --color-unieuk-euk: var(--color-unieuk-dark); }

:root:has(#theme-light:checked),
:root[data-theme="light"] {
  color-scheme: light;
  --background-color: var(--color-white);
  --background-footer: var(--color-gray-darker);
  --color: var(--color-gray-darker);
  --color-inverse: var(--color-white);
  --color-secondary: var(--color-gray-light);
  --color-highlight: var(--color-unieuk-blue);
  --color-unieuk-uni: var(--color-unieuk-blue);
  --color-unieuk-euk: var(--color-unieuk-dark); }

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: var(--color-gray-darker);
    --background-footer: var(--color-gray-darker);
    --color: var(--color-white);
    --color-inverse: var(--color-gray-darker);
    --color-secondary: var(--color-gray-lighter);
    --color-highlight: var(--color-unieuk-blue);
    --color-unieuk-uni: var(--color-unieuk-blue);
    --color-unieuk-euk: var(--color-unieuk-light); }
  .menu__title .unieuk--uni {
    font-weight: 400; } }

:root:has(#theme-dark:checked),
:root[data-theme="dark"] {
  color-scheme: dark;
  --background-color: var(--color-gray-darker);
  --background-footer: var(--color-gray-darker);
  --color: var(--color-white);
  --color-inverse: var(--color-gray-darker);
  --color-secondary: var(--color-gray-lighter);
  --color-highlight: var(--color-unieuk-blue);
  --color-unieuk-uni: var(--color-unieuk-blue);
  --color-unieuk-euk: var(--color-unieuk-light); }
  :root:has(#theme-dark:checked) .menu__title .unieuk--uni,
  :root[data-theme="dark"] .menu__title .unieuk--uni {
    font-weight: 400; }

@media (max-width: 900px) {
  .columns {
    flex-direction: column;
    gap: 1em; }
  ul.columns {
    padding-left: 1em; }
  .unieuk__funders,
  .unieuk__partners {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; } }

:root {
  color-scheme: light dark;
  --color-gray-darker: #303030;
  --color-gray-dark: #606060;
  --color-gray-light: #909090;
  --color-gray-lighter: #e0e0e0;
  --color-white: #ffffff;
  --color-unieuk-blue: #3d75f7;
  --color-unieuk-light: #fafafa;
  --color-unieuk-dark: var(--color-gray-darker);
  --page-width: 70rem;
  --font-size: 1.2em;
  --font-family: 'Roboto';
  --font-style: normal;
  --font-weight: 300;
  --line-height: 1.66;
  --files-font: 'Raleway';
  --files-font-title: 'Josefin Slab';
  --heading: 'Josefin Slab';
  --heading-weight: 900;
  --heading-style: normal; }

body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  color: var(--color);
  font-family: var(--font-family), sans-serif;
  font-size: var(--font-size);
  font-style: var(--font-style);
  font-weight: var(--font-weight);
  line-height: var(--line-height); }

main {
  max-width: var(--page-width);
  margin: auto;
  padding: 0 2em; }

.notice {
  position: absolute;
  top: 3em;
  margin-bottom: 3em;
  font-weight: 600;
  text-align: center;
  color: red;
  font-size: 1em; }

/*# sourceMappingURL=unieuk.css.map */