.aoc-banner-container {
  width: auto;
  height: fit-content;
  background: radial-gradient(50% 50% at 50% 50%, rgba(21, 28, 43, 1) 0%, rgba(26, 35, 52, 1) 100%);
}

.aoc-banner-background {
  min-height: 18.375rem;
  background-image: url('https://assets.tryhackme.com/img/banners/aoc-internal-banner-mobile.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}

@media screen and (min-width: 768px) {
  .aoc-banner-background {
    background-image: url('https://assets.tryhackme.com/img/banners/aoc-internal-banner-tablet.png');
    min-height: 14.125rem;
  }
}

@media screen and (min-width: 1024px) {
  .aoc-banner-background {
    background-image: url('https://assets.tryhackme.com/img/banners/aoc-internal-banner.png');
    min-height: 12.5rem;
  }
}

@font-face {
  font-family: 'GrinchedFont';
  font-weight: normal;
  src: url('/css/fonts/grinchedregular.woff2') format('woff2'), url('/css/fonts/grinchedregular.woff') format('woff');
}

.aoc-banner-wrapper {
  display: flex;
  padding: 2rem 1rem;
  margin: 0 auto;
}

.aoc-banner-wrapper p,
.aoc-banner-wrapper h1 {
  color: #f9f9fb;
  text-align: center;
}

.aoc-banner-wrapper h1 {
  margin-bottom: 0.75rem;
}

.aoc-banner-wrapper p {
  margin-bottom: 1.5rem;
}

.aoc-banner-wrapper h1 > span {
  color: #a3ea2a;
  text-align: center;
  display: block;
}

.aoc-banner-wrapper h1 {
  font-family: 'GrinchedFont', sans-serif;
  font-size: 2.875rem;
  margin-bottom: 0.75rem;
}

.aoc-banner-wrapper div:first-child button {
  width: 100%;
  color: #000000;
}

.aoc-banner-wrapper div:first-child button:hover {
  color: #ffffff;
  border-color: #a3ea2a;
  background-color: rgba(163, 234, 42, 0.3) !important;
}

.aoc-banner-wrapper div:first-child button span {
  font-weight: 900;
}

.aoc-banner-wrapper > div:last-child {
  position: absolute;
  right: 1.812rem;
}

.aoc-banner-wrapper > div:last-child svg {
  position: absolute;
  top: -20px;
  right: -14px;
}

@media screen and (min-width: 768px) {
  .aoc-banner-wrapper {
    padding: 1.875rem 2rem;
  }

  .aoc-banner-wrapper > div:first-child {
    flex: 2;
  }

  .aoc-banner-wrapper > div:last-child {
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex: 1;
  }

  .aoc-banner-wrapper > div:last-child svg {
    right: -40px;
    top: -10px;
  }

  .aoc-banner-wrapper span,
  .aoc-banner-wrapper h1,
  .aoc-banner-wrapper p {
    text-align: left;
  }

  .aoc-banner-wrapper h1 > span {
    display: inline;
  }

  .aoc-banner-wrapper div:first-child button {
    width: 10.188rem;
    height: 2.25rem;
  }
}

@media screen and (min-width: 1024px) {
  .aoc-banner-wrapper {
    padding: 1.718rem 0.5rem 1.781rem 0.75rem;
    max-width: 960px;
    margin: 0 auto;
  }

  .aoc-banner-wrapper > div:last-child {
    position: absolute;
    right: 1.812rem;
  }

  .aoc-banner-wrapper > div:last-child svg {
    right: 0;
    top: -3px;
  }
}

@media screen and (min-width: 1200px) {
  .aoc-banner-wrapper {
    max-width: 1240px;
  }
}

.aoc-banner-close-button {
  all: unset;
  cursor: pointer;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUgMy41ODZMMS43MDcuMjkzLjI5MyAxLjcwNyAzLjU4NiA1IC4yOTMgOC4yOTNsMS40MTQgMS40MTRMNSA2LjQxNGwzLjI5MyAzLjI5MyAxLjQxNC0xLjQxNEw2LjQxNCA1bDMuMjkzLTMuMjkzTDguMjkzLjI5MyA1IDMuNTg2eiIgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSIjNzc3Ii8+PC9zdmc+);
  background-size: cover;
  background-repeat: no-repeat;
  height: 0.87rem;
  width: 0.87rem;
}

.aoc-banner-close-button:hover {
  filter: invert(1) brightness(2);
}

.navbar > .container {
  padding: 0 1rem;
}