/*
 * Base structure
 */
body {
  font-family: "Work Sans", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  background: #fff;
  color: #555;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#page-wrapper {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Tilt Warp", sans-serif;
  font-weight: 300;
  color: #262443;
  text-align: left;
  padding-bottom: 20px;
}

h1 {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.5rem;  
  line-height: 1;
  letter-spacing: 0;

  /* helpful extras */
  font-synthesis: none;     
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h2 {
  font-size: 3rem;
}

h2.subtitle {
  font-family: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;       /* Regular */
  font-style: normal;
  font-size: 2rem;
  line-height: 1.2;         /* Figma’s 100% */
  letter-spacing: 0;

  /* Helpful extras */
  font-synthesis: none;           /* don’t fake bold/italic */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h3 {
  font-size: 1.3rem;
}

a,
a:focus{
  color: #D12E5C;
}

a:hover {
  background-color: #cceffc;
  color: #555;
}

p {
  font-size: 1.2em;
  margin-bottom:1em;
}

.brand-icon a:hover{
  background-color: #EFEDFF;
}

.statement {
  font-size: 1.5rem;
}

.focus-home {
  background-color: #cceffc;
  padding: 5rem 0;
}

.navbar {
  border-image-slice: 1;
  background: #EFEDFF;
}

.navbar-item {
  font-family: "Quicksand";
  font-weight: 400;
  font-style: Regular;
  line-height: 100%;
  letter-spacing: 0%;
  color: #6D6D6D;
  font-size: 1.2rem;
}

.footer {
  background-color: #0d0c34;
  color: #fff;
}

.footer h4,
.footer a {
  color: #fff;
}

.footer a:hover {
  background-color: #fff;
  color:#555;
}

.brand {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
}

.brand-icon {
    width: 56px;
    height: 56px;
    margin-right: 1rem;
    transition-duration: 172ms;
    will-change: width, height, margin-right;
}

.brand-content{
  font-family: "Quicksand";
  font-family: Quicksand;
  font-weight: 400;
  font-style: Regular;
  line-height: 100%;
  letter-spacing: 0%;
  color: #6D6D6D;
  font-size: 1.2rem;
}

.brand-icon img{
  max-height:100%;
}

.overlay-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background-color: #ffc312;
  font-size: 65%;
  border-radius: 30px;
  padding: 5px;
}

.image-with-sticker {
  position:relative;
}

.sticker-over-image {
  position:absolute;
  top:-20px;
  right:-20px;
  max-width:30%;
}

.register-button-home {
  display: flex;
  justify-content: center;
  align-items: center;
}

a.register-ind{
  background-color: #00adef;
  border-color:#00adef;
  color: white;
}
a.register-teacher{
  background-color: #ef4123;
  border-color:#ef4123;
  color: white;
}

.red-bg {
  background-color: #fcd9d3;
}

.yellow-bg {
  background-color:#fff3d0;
}

.green-bg {
  background-color: #edf5d7;
}

.blue-bg {
  background-color: #3059A3;
}

.grey-bg {
  background-color: #C7D5E4;
}

.red {
  color:#E84C4C;
}

.yellow {
  color: #FABF19;
}

.green {
  color:#a6ce39;
}

.blue {
  color: #00adef;
}

.black {
  color: #555;
}

.hero.is-primary{
  background-image: linear-gradient(141deg, #E84C4C 0%, #00adef 71%, #FABF19 100%);
}

.image-with-sticker {
  position:relative;
}

.sticker-over-image {
  position:absolute;
  top:-20px;
  right:-20px;
  max-width:30%;
}

.thinglist .card-content{
  min-height: 200px;
}

img.card-illustration {
  padding: 3rem;
}



@media screen and (max-width: 768px) {
  img.card-illustration {
    padding: 0.8rem;
  }
  .title.is-4 {
    font-size: 2rem;
  }
}

/* Layout + centering */
.lottie-wrap {
  display: grid;
  place-items: center;
  padding: 2rem;
}

/* Responsive sizing lives here */
.lottie {
  /* Scales with viewport, caps at 500px, never smaller than 240px */
  width: clamp(340px, 60vw, 550px);
  height: auto;         /* let height follow width */
  display: block;       /* avoid baseline gaps */
}

/* .column .subtitle {
  --bulma-subtitle-color: #2F3542;
} */

.columns .card.thinglist { 
  --bulma-card-radius: 3rem;
  max-height: clamp(32rem, 40vh, 32rem);
}

.columns .card.thinglist .card-image {
  flex: 0 0 auto;
  max-height: 20rem;
  overflow: auto;
}

.columns .card.thinglist .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* optional: let cards grow on phones */
@media (max-width: 768px) {
  .columns .card.thinglist { max-height: none; }
}

/* Link button */
.button.is-link-button {
  background-color: #9980FA;
  border-color: #9980FA;
  color: #fff;
}

.button.is-link-button:hover,
.button.is-link-button:focus {
  background-color: #8467f5;
  border-color: #8467f5;
  color: #fff;
}

:root {
  --bulma-strong-color: #2F3542;
}

.graphics-grid .image {
  max-width: 700px;
  margin-inline: auto;
}

.graphics-grid .image img {
  width: 100%;           /* scale down to fit figure */
  height: auto;          /* keep aspect ratio */
}

.sqgrid .image {
  max-width: 300px;      /* how wide each image is allowed to be */
  margin-inline: auto;   /* center inside the cell */
}