@font-face {
    font-family: "Ubuntu";
    src: url(static('core/fonts/Ubuntu/Ubuntu-R.ttf'));
}
@font-face {
    font-family: "Ubuntu";
    src: url(static('core/fonts/Ubuntu/Ubuntu-RI.ttf'));
    font-style: italic;
}
@font-face {
    font-family: "Ubuntu";
    src: url(static('core/fonts/Ubuntu/Ubuntu-B.ttf'));
    font-weight: bold;
}
@font-face {
    font-family: "Ubuntu";
    src: url(static('core/fonts/Ubuntu/Ubuntu-BI.ttf'));
    font-style: italic;
    font-weight: bold;
}
@font-face {
    font-family: "UbuntuMono";
    src: url(static('core/fonts/Ubuntu/UbuntuMono-R.ttf'));
}

h1, h2, h3, h4, h5, h6 {
    font-family: Ubuntu, sans;
    font-weight: bold;
}
h1 {
}
h2 {
    font-size: 26px;
}
h3 {
    font-size: 20px;
}
h4 {
    font-size: 16px;
}
blockquote p {
    font-size: 100%;
    font-weight: normal;
}
aside {
    font-size: 12px;
}

:root {
    --cosmosim-blue: #0088cc;
    --cosmosim-blue-rgb: 0, 136, 204;
    --cosmosim-text-color: #00295d;
    --cosmosim-darkblue: #2e6da4;
    --cosmosim-darkblue-rgb: 46, 109, 164;
    --bs-primary: var(--cosmosim-blue);
    --bs-primary-rgb: var(--cosmosim-blue-rgb);
    --bs-primary-bg: var(--cosmosim-blue);
    --bs-primary-bg-rgb: var(--cosmosim-blue-rgb);
    --bs-link-color: var(--cosmosim-blue);
    --bs-link-color-rgb: var(--cosmosim-blue-rgb);
    --footer-content-color: #fff;
    --footer-content-background-color: rgba(0, 0, 0, 0.5);
    --footer-content-link-color: #99b7ce;
    --footer-content-link-color-visited: var(--footer-content-link-color);
    --footer-content-link-color-hover: var(--footer-content-link-color);
    --footer-content-link-color-focus: var(--footer-content-link-color);
}

body {
    color: var(--cosmosim-text-color);
    background-color: #000;
    background-image: url('/static/cosmosim/img/background.png');
}


main {
    padding-top: 10px;
    padding-bottom: 10px;
}

main section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1em;
    padding: 20px;
    margin-bottom: 20px;
}

.query {
    background: none;
    border-radius: 1em;
    padding: 20px;
    margin-bottom: 20px;
}

.card {
    --bs-card-color: var(--cosmosim-text-color);
}


aside section {
    border-radius: 1em;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    font-size: 14px;

    color: var(--footer-content-color);
    background-color: var(--footer-content-background-color);

    h1, h2, h3, h4, h5, h6 {
        color: var(--footer-content-color);
    }

    a {
        color: var(--footer-content-link-color);

        &:visited {
            color: var(--footer-content-link-color-visited);
        }
        &:hover {
            color: var(--footer-content-link-color-hover);
        }
        &:focus {
            color: var(--footer-content-link-color-focus);
        }

        &.fa {
            text-decoration: none;
        }
    }

    ul.sidebar-nav {
        padding-left: 0;

        a {
            color: var(--footer-content-color);
        }
        li {
            list-style: none;
        }
        ul {
            padding-left: 20px;
        }

        > li > a {
            font-weight: bold;
        }
    }
}


.home-page {
    h1 {
        padding-top: 20px;
        padding-bottom: 20px;
        line-height: 80px;
    }
    h1 a,
    h1 a:visited,
    h1 a:hover {
        font-size: 60pt;
        font-weight: bold;
        color: #1b1b1b;
        text-decoration: none;
        text-shadow: 0 0 20px #eee;
    }

    aside {
        .image-wrapper {
            display: flex;
            flex-direction: column;

            margin-bottom: 20px;

            img {
                align-self: center;
                border-radius: 5px;
                width: 120px;

                &.aip-logo {
                    width: 80px;
                }
            }
        }

        .register {
            margin-top: 0;

            input {
                width: 100%;
            }
        }
        > :last-child,
        > :last-child > :last-child {
            margin-bottom: 0;
        }
    }
}

.navbar-nav .nav-link {
    color: #99b7ce;;
}

.navbar {
    font-size: 1.2rem;
    background-color: black !important;
}

.navbar .nav-link:hover {
    color: #ffffff !important;
}

.aip-logo {
    width: 300px;
    max-width: 300px;
    margin-bottom: 20px;
}

.gavo-logo {
    width: 250px;
    max-width: 250px;
}

.announcement {
    border-radius: 1em;
    padding: 20px;
    margin-bottom: 20px;
}


.terms-of-use > li::marker {
  font-weight: bold;
}
.terms-of-use > li {
  margin-bottom: 0.5em;
}


.projects {
  display: flex;
  flex-direction: column;
  gap: 20px;

  @media (min-width: 768px) {
      flex-direction: row;
      justify-content: center;
  }

  margin-top: 20px;
  margin-bottom: 20px;

  .project {
      display: flex;
      flex-direction: column;

      width: 240px;
      height: 260px;

      @media (max-width: 768px) {
          align-self: center;
      }
      .project-img {
          img {
              width: 240px;
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;
          }
      }
      .project-body {
          flex-grow: 2;

          background-color: #eee;
          border-right: 1px solid darkgray;
          border-bottom: 1px solid darkgray;
          border-left: 1px solid darkgray;
          border-bottom-right-radius: 5px;;
          border-bottom-left-radius: 5px;;
          padding: 10px;

          p {
              text-align: justify;
              font-size: small;
          }
          ul {
              text-align: center;
          }
       }
    }
}

.btn-primary {
    --bs-btn-bg: var(--cosmosim-blue);
    --bs-btn-border-color: var(--cosmosim-blue);
    --bs-btn-hover-bg: var(--cosmosim-darkblue);
    --bs-btn-hover-border-color: var(--cosmosim-darkblue);
    --bs-btn-active-bg: var(--cosmosim-darkblue);
    --bs-btn-active-border-color: var(--cosmosim-darkblue);
    --bs-btn-disabled-bg:var(--cosmosim-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--cosmosim-blue);
    --bs-btn-border-color: var(--cosmosim-blue);
    --bs-btn-hover-bg: var(--cosmosim-blue);
    --bs-btn-hover-border-color: var(--cosmosim-blue);
    --bs-btn-active-bg: var(--cosmosim-blue);
    --bs-btn-active-border-color: var(--cosmosim-blue);
}

.btn-outline-form {
    background: #fff;
}


footer .content {
  color: #fff;
  background-color: rgba(0,0,0,0.5);
}