@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=Righteous&display=swap');

:root {
  --pink: #E07BB1;
  --yellow: #F1F0A1;
  --teal: #45C2CC;
  --purple: #3B1A53;

  --font-text: 'Dosis', sans-serif;
  --font-header: 'Righteous', sans-serif;

  --fs-sm: clamp(0.86rem, 0.36vw + 0.75rem, 1.25rem);
  --fs-base: clamp(1rem, 0.5vw + 0.75rem, 1.5rem);
  --fs-md: clamp(1.17rem, 1.51vw + 0.72rem, 1.83rem);
  --fs-lg: clamp(1.38rem, 2.94vw + 0.65rem, 2.28rem);
  --fs-xl: clamp(1.65rem, 4.96vw + 0.51rem, 2.87rem);
  --fs-2xl: clamp(1.99rem, 7.79vw + 0.28rem, 3.66rem);
  --fs-3xl: clamp(2.41rem, 11.74vw + -0.09rem, 4.71rem);
}

/* #region Base */
.pink {
  color: var(--pink);
}

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

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

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

.bg-pink {
  background-color: var(--pink);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-teal {
  background-color: var(--teal);
}

.bg-purple {
  background-color: var(--purple);
}

.fst-text {
  font-family: var(--font-text);
}

.fst-header {
  font-family: var(--font-header);
}

.fs-sm {
  font-size: var(--fs-sm);
}

.fs-base {
  font-size: var(--fs-base);
}

.fs-md {
  font-size: var(--fs-md);
}

.fs-lg {
  font-size: var(--fs-lg);
}

.fs-xl {
  font-size: var(--fs-xl);
}

.fs-2xl {
  font-size: var(--fs-2xl);
}

.fs-3xl {
  font-size: var(--fs-3xl);
}

/* #endregion */

html {
  font-size: var(--fs-base);
}

body {
  font-family: var(--font-text);
  font-weight: 600;
  background-color: var(--purple);
  line-height: 1.25;
}

h1,
h2,
h3 {
  font-family: var(--font-header);
}


/* #region Navbar */
nav {
  background-color: var(--pink);
  padding: 1.5rem .25rem !important;
}

.navbar-brand {
  width: min(24rem, 80%);
}

.navbar-nav {
  width: min(32rem, 100%);
  justify-content: space-evenly;
}

.nav-link {
  font-family: var(--font-header);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--yellow);
}

.navbar-toggler {
  font-size: var(--fs-lg);
  color: var(--yellow);
}

/* #endregion */

.home-banner {
  border-image-slice: 6 100 6 100;
  border-image-width: 0 var(--fs-2xl);
  border-image-repeat: stretch stretch;
  border-image-source: url('../img/BannerBorder.png');

  padding: 1rem 4rem;
}

figure.main-logo {
  text-align: center;
  font-size: .8rem;
  width: min(20rem, 100%);
  justify-self: center;
}

.video-frame {
  aspect-ratio: 16/9;
  width: min(100%, 35rem);
  margin: auto;
}

/* #region Buttons, Links */
.btn,
.btn:hover,
.btn:focus-visible {
  background-color: var(--pink);
  color: var(--yellow);
  text-transform: uppercase;
  font-family: var(--font-header);
  font-size: var(--fs-base);
  border: .2rem solid var(--purple);
  border-radius: 2rem;
  transition: scale 500ms;
  padding: .5rem .75rem;
}

.btn:hover,
.btn:focus-visible {
  box-shadow: 0 0 .33rem var(--purple);
  scale: 1.025;
}

.btn:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: .2rem;
  scale: 1;
}

.btn:active {
  background-color: var(--pink) !important;
}

/* #endregion */

@media(min-width:1024px) {

  .row:not(.row.homebanner),
  nav,
  footer {
    width: clamp(982px, 90vw + .925rem, 80rem);
    margin: auto;
  }

  nav {
    width: clamp(982px, 90vw + .925rem, 85rem);
  }
}

@media(min-width:1200px) {
  .row.homebanner {
    width: clamp(982px, 90vw + .925rem, 80rem);
    margin: auto;
  }
}


/* #region TimeCircles */
#myTimeCircles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.125rem;
  width: min(45rem, 100%);
  margin: auto;
}

.time-circle {
  background: var(--pink);
  border: 0.125rem solid var(--purple);
  border-radius: 50%;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(10.5rem, 100%);
}

.time-circle div {
  text-align: center;
}

.time-circle div * {
  margin: 0;
}

.time-circle div h1 {
  color: var(--yellow);
  line-height: 0.9;
  font-family: var(--font-header);
  font-size: var(--fs-2xl);
}

.time-circle div p {
  color: var(--purple);
  font-size: var(--fs-base);
}

@media(min-width:600px) {
  #myTimeCircles {
    gap: clamp(1.5rem, 2vw + 1rem, 5rem);
  }
}

/* #endregion */

/* #region Footer */
footer {
  font-family: var(--font-header);
  color: var(--yellow);
  font-size: var(--fs-base);
  text-align: center;
  padding: 12px 0 6px;
}

footer>* {
  margin: 24px 0;
}

footer a:hover {
  filter: brightness(95%);
}

#footer-logo,
.logo-top {
  max-width: 14rem;
  margin: auto;
}

#footer-socials ul {
  list-style: none;
  display: inline-flex;
  padding: 0;
}

#footer-socials ul li {
  max-width: 2.75rem;
  padding: 2px 6px;
}

@media(min-width: 768px) {
  footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr auto;
  }

  #footer-logo {
    grid-area: 1 / 1 / 2 / 2;
  }

  #footer-contact {
    grid-area: 1 / 2 / 2 / 3;
  }

  #footer-socials {
    grid-area: 1 / 3 / 2 / 4;
  }

  #footer-cc {
    grid-area: 2 / 1 / 3 / 4;
  }
}

/* #endregion */