*{padding:0; margin:0;}

:root {
    --green: #D6FD18;
    --pink: #F21391;
    --orange: #FFB520;
    --red: #E02E2E;
  }

  html {
    scroll-behavior: smooth;
  }

.gochi {
    font-family: "Gochi Hand", cursive;
    font-weight: 400;
    font-style: normal;
}

.just {
    font-family: "Just Another Hand", cursive;
    font-weight: 400;
    font-style: normal;
}

.nerko {
    font-family: "Nerko One", cursive;
    font-weight: 400;
    font-style: normal;
}

.patrick {
    font-family: "Patrick Hand", cursive;
    font-weight: 400;
    font-style: normal;
  }
  

header#header{
    background-image: url(i/banner1.webp);
    background-size: cover;
    background-repeat: no-repeat;
}


.gcallout .glide__slide:not(.glide__slide--active){
    transition: all 0.5s;
    opacity:0.2;
    filter: saturate(0);

}
.gcallout .glide__slide--active{ 
    transition: all 0.5s;
    opacity:1;
}

.gcallout .glide__slide--active+.glide__slide{
    transform: perspective(400px) rotateY(-45deg) scale(0.9);
}
.gcallout .glide__slide:has(+.glide__slide--active){
    transform: perspective(400px) rotateY(45deg)  scale(0.9);
}




.glide__arrow{
	background: white;
    border:none;
    padding: 4px 2px;
}

.glide__arrow:hover{
	background: var(--green);
}



.glide__bullet{
	border-radius: 0;
	background: var(--green);
	box-shadow: none;
	width: 30px;
	height: 20px;
	border: none;
}
.glide__bullet:hover{
	background: #000;
	border: none;
}

.glide__bullet.glide__bullet--active{
	background: var(--pink);
	border: none;
}

.content{
    background: var(--green);
    aspect-ratio: 1/1;
    position: relative;
}
.content .content-stroke{
    position: absolute;
    left:0; top:0; right: 0; bottom:0;
    z-index: 5;
    pointer-events: none;
    background-image: url(i/content-stroke.svg);
    background-size: contain;
}



.contentitem{
    text-align: center;
}
.content *{
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    display:flex;
    justify-content: center;
    align-items: center;
}