html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}



@media screen and (max-width: 30rem) {
    html {
        /* font-size: 14px; */
    }
}

@media screen and (max-width: 20rem) {
    html {
        /* font-size: 12px; */
    }
}

html {
    /* background: #b4706f; */
    /* background: #819d74; */
    /* background: #6f8e61; */
    background: #618f80;
}

body {
    /* background: #b4706f; */
    font-family: "Grandstander", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.typography {
}

.typography--centered {
    text-align: center;
}

.typography .pre-title {
    display: block;
    font-weight: bolder;
    color: #999;
    letter-spacing: 0.1rem;
    margin-bottom: 1rem;
}

.typography h1,
.typography h2,
.typography h3 {
    font-weight: bolder;
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;

    font-family: "Grandstander", cursive;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.typography h1 {
    font-size: 4rem;
}

.typography h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.typography h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1rem;
}

.typography p {
    font-size: 1.25rem;
    letter-spacing: 0.01rem;
    line-height: 1.75rem;
}

.typography p + p {
    margin-top: 1rem;
}

.typography p.small {
    font-size: 0.75rem;
    letter-spacing: 0.05rem;
}



section {
    /* padding: 4rem 1rem; */
}

section.highlight {
    /* background: #44489a; */
    /* padding-top: 9rem; */
}

@media screen and (max-width: 30rem) {
    section.highlight {
        /* padding: 4rem 0; */
    }
}


.program-title {
    /* position: absolute; */
    /* z-index: 10; */

    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    /* margin: auto; */

    /* transform: translateX(-2rem); */

    /* max-width: 30rem; */
}

.program-title img {
    width: 100%;
    max-width: 30rem;
    margin-top: 5rem;
    animation: wobble 5s infinite;
}




.banner {
    max-width: 70rem;
    position: relative;
    line-height: 0;
    margin: auto;
    margin-bottom: 1rem;
}


.banner img {
    width: 100%;
    overflow: hidden;
}

@media screen and (max-width: 30rem) {
    .banner {
        margin-top: 2rem;
        padding: 0 1rem;
    }
    .banner img {
        border-radius: 1rem;
    }
}

.banner__logo {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;

    position: absolute;
    bottom: -2rem;
    margin: auto;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
}

.banner__logo img {
    width: 100%;
    height: 100%;
}

.social {
    display: inline-flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.social__icon {
    width: 2rem;
    height: 2rem;
}

/* .social__icon img { */
.social__icon svg {
    width: 100%;
    height: 100%;
}


.events-wrapper {
    position: relative;
    max-width: 70rem;
    position: relative;
    line-height: 0;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 0 1rem;

    aspect-ratio: 1 / 1.80;
    max-width: 32rem;

    border-radius: 1rem;
    overflow: hidden;
    /* border: 0.25rem solid #171937; */
    cursor: pointer;
    transition: transform 0.2s;
}

/* .highlight { */
/*     animation: wobble 5s infinite; */
/* } */

.events-wrapper:hover {
    /* animation: pop 0.5s, jitter 1s; */
    animation: jitter-pop 0.5s;
    /* animation: jitter-pop 1.0s; */
}

/* .events-wrapper:hover .event__avatar { */
/*     animation: spin 0.7s ease-out; */
/* } */




@keyframes pop {
    0% { transform: scale(100%); }
    50% { transform: scale(102%); }
    100% { transform: scale(100%); }
}

@keyframes jitter {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

@keyframes jitter-pop-old {
    0% { transform: rotate(0deg) scale(100%); }
    20% { transform: rotate(-3deg); }
    50% { transform: rotate(2deg) scale(102%); }
    70% { transform: rotate(-1deg); }
    100% { transform: rotate(0deg) scale(100%); }
}

@keyframes jitter-pop {
    0% { transform: rotate(0deg) scale(100%); }
    10% { transform: rotate(-1deg); }
    /* 20% { transform: rotate(-3deg); } */
    25% { transform: rotate(-1deg) scale(102%); }
    50% { transform: rotate(1deg) scale(100%); }
    70% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}


@media screen and (max-width: 30rem) {
    .events-wrapper {
        padding: 4rem 1rem;
        border: 0;
        border-radius: 0;
        border-top: 0.25rem solid #171937;
        border-bottom: 0.25rem solid #171937;
    }
}


/* .events { */
/*     height: 100%; */

/*     border-radius: 1rem; */
/*     overflow: hidden; */
/*     display: flex; */
/*     flex-direction: column; */
/*     justify-content: top; */
/*     align-items: center; */
/*     margin-top: 10rem; */
/* } */


.container {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    padding: 0 1rem;
    padding-top: 2rem;
}

.content {
    position: relative;
    width: 100%;
    max-width: 30rem;
    aspect-ratio: 602 / 1240;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phone-wrapper {
    position: relative;
    width: 100%;
}
/* .phone-wrapper:hover { */
/*     animation: phone-shake 0.5s ease-in-out; */
/* } */



@keyframes phone-shake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-0.5px, 0.3px) rotate(-0.15deg); }
  40%  { transform: translate(0.6px, -0.4px) rotate(0.2deg); }
  60%  { transform: translate(-0.4px, 0.5px) rotate(-0.1deg); }
  80%  { transform: translate(0.3px, -0.2px) rotate(0.1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.phone {
    position: relative;
    cursor: pointer;
    animation: wobble 5s infinite;

    position: absolute;
    width: 100%;
}
@keyframes wobble {
    0% { transform: translateY(-0.5rem); }
    50% { transform: translateY(0.5rem); }
    100% { transform: translateY(-0.5rem); }
}


.phone__notification-wrapper {
    position: absolute;
    width: 100%;

    top: 20%;
    transform: translateY(-50%);
}

.phone__notification-content {
    padding: 0 10%;
}

.phone__image {
    width: 100%;
}
.phone__image img {
    width: 100%;
}

.phone:hover .notification__avatar {
    animation: spin 0.7s ease-out;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(1080deg); }
}

.phone:hover .notification__book-ticket::after {
  animation: underline-blink 1.2s steps(1) infinite;
}

@keyframes underline-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.phone-shadow {
  height: 1rem;
  width: 80%;

  margin-top: 2rem;

  background: rgba(0, 0, 0, 0.35);
  filter: blur(0.5rem);
  border-radius: 50%;

  position: absolute;
  bottom: -4rem;
  /* animation: wobble-shadow 5s infinite; */
}

@keyframes wobble-shadow {
    0% {
        width: 80%;
        height: 1.5rem;
        background: rgba(0, 0, 0, 0.2);
    }
    50% {
        width: 90%;
        height: 1rem;
        background: rgba(0, 0, 0, 0.4);
    }
    100% {
        width: 80%;
        height: 1.5rem;
        background: rgba(0, 0, 0, 0.2);
    }
}

.notification {
    position: relative;
    color: white;
    /* background-color: rgba(0, 0, 0, 0.8); */
    background-color: #666;

    background: #1c004cdb;
    background: #00000066;

    text-align: left;

    width: 100%;
    /* max-width: 20rem; */
    padding: 0.5rem 0;
    /* border: 0.25rem solid black; */
    border-radius: 1rem;
    /* border-top: 0; */
    opacity: 0;
      animation: reveal 0.2s forwards; /* trigger on page load */
      animation-delay: 0.5s;
}


@keyframes reveal {
  from {
      transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.notification a span {
    color: white;
}


.notification__content {
    padding: 1rem;
    padding-left: 4rem;
}

.notification__avatar {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    margin: auto;

    /* width: 3rem; */
    /* height: 3rem; */
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
    background: white;
    /* color: #444; */
}

.notification__avatar img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    right: 0;

    bottom: 0;
    width: 100%;
}


.notification__title {
    display: block;
    font-weight: bolder;
    font-size: 1.3rem;
    line-height: 1.5rem;
}

.notification__date-time {
    display: block;
    /* font-weight: bolder; */
    font-size: 1.0rem;
    line-height: 1.5rem;
}

.notification__book-ticket {
    font-weight: bold;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    /* margin-top: 1rem; */
    /* margin-bottom: 0.5rem; */
    display: inline-block;

    position: relative;
    color: #ff5ea0!important;
}


@media screen and (min-width: 23rem) {
    .container {
        padding-top: 3rem;
    }
    .notification__content {
        padding-left: 4.5rem;
    }

    .notification__avatar {
        width: 2.5rem;
        height: 2.5rem;
    }

    .notification__title {
        font-size: 1.4rem;
        line-height: 1.75rem;
    }

    .notification__date-time {
        font-size: 1.15rem;
        line-height: 1.5rem;
    }

    .notification__book-ticket {
        font-size: 1rem;
        margin-top: 0.6rem;
    }
}

@media screen and (min-width: 25rem) {
    .container {
        padding-top: 4rem;
    }
    .notification__content {
        padding-left: 5rem;
    }

    .notification__avatar {
        width: 3rem;
        height: 3rem;
    }

    .notification__title {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .notification__date-time {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .notification__book-ticket {
        font-size: 1.2rem;
        margin-top: 0.75rem;
    }
}

.notification__book-ticket::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  opacity: 0;
}

/* .event__intro { */
/*     padding-top: 2rem; */
/*     padding-bottom: 1.5rem; */
/*     text-align: center; */
/* } */

/* .event__intro p { */
/*     padding: 0 1rem; */
/*     color: #eee; */
/*     font-size: 1.2rem; */
/*     line-height: 2rem; */
/* } */



/* .notification span { */
/*     display: block; */
/* } */


.notification a {
    text-decoration: none;
    /* color: black; */
}

/* .notification a:hover { */
/*     text-decoration: underline; */
/* } */


/* .event__location { */
/*     font-size: 1rem; */
/*     line-height: 1.25rem; */
/*     color: #ccc!important; */
/* } */


/* .infobox { */
/*     font-size: 1rem; */
/*     margin-bottom: 2rem; */
/*     color: #ccc; */
/* } */


footer {
    padding: 2rem 1rem;
    color: #111;
    margin-top: 6rem;
    /* background: #8b88cb; */
}

footer a {
    color: #111;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}