@import url('https://fonts.cdnfonts.com/css/euclid-circular-a');
@import url('./typography.css');
@import url('./blocks.css');
@import url('./mainpage.css');

:root {
  --blue: #0085ef;
  --blue-dark: #000853;
  --blue-light: #9fd9ff;

  --rounded-md: 15px;
}

:root {
  --body-background-color: var(--blue);
  --navigation-link-color: white;
  --navigation-link-active: var(--blue);
  --navigation-link-active-bg: white;

  --header-padding: 25px;

  --gradient-start: #082B63;
  --gradient-middle: #00aeff;
  --gradient-end: #0064b5;

  --footer-color: #ffffff;
  --footer-bg: #008aff;

  --text-light: white;
}

body {
  font-family: var(--font-face);
  background: linear-gradient(0deg, var(--gradient-start) 0%, var(--gradient-middle) 61%, var(--gradient-end) 100%);
  background-color: var(--blue);

  &:before {
    content: '';
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    box-shadow: 0 0 196px inset rgba(0, 0, 0, 0.46);
    mix-blend-mode: multiply;
    border: solid 1px red;
  }
}

#application {
  position: relative;
  z-index: 1;
}

#header {
  > .row {
    height: 64px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: stretch;

    #siteLogo, #languages {
      padding-left: var(--header-padding) !important;
      padding-right: var(--header-padding) !important;
    }

    #navigation {
      flex-grow: 8;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;

      a {
        color: var(--navigation-link-color);
        display: inline-block;
        padding: 10px;
        border-radius: 10px;

        & + a {
          margin-left: 10px;
        }

        &.active {
          font-weight: bold;;
          background-color: var(--navigation-link-active-bg);
          color: var(--navigation-link-active);
        }
      }
    }

    #languages {
      text-align: right;
      justify-content: flex-end;
      padding: 15px !important;

      a {
        padding: 5px;
      }

      img {
        width: 20px;
      }
    }
  }


  svg {
    width: 190px;

    path {
      fill: #ffffff;
    }
  }
}

#footer {
  background-color: var(--footer-bg);

  &, a {
    color: var(--footer-color);
  }

  a {
    text-decoration: underline;
  }
}