/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@import "https://unpkg.com/open-props@1.6.17/easings.min.css";

body {
  background-image: url("background.jpeg");
  background-position: top right;
  background-repeat: no-repeat;
  background-color: #5AB0C7;
  font-family: Arial;
}

@font-face {
  font-family: "Silkscreen";
  src:
    local("Silkscreen"),
    url("slkscr.ttf") format("truetype") tech(color-COLRv1),
}

@font-face {
  font-family: "Nintender";
  src:
    local("Nintender"),
    url("Nintender.ttf") format("truetype") tech(color-COLRv1),
}


.head {
    font-family:nintender;
    font-weight:normal;
    font-size:160px;
    text-shadow:3px 3px 0px #68bce9;
    line-height:3rem;
    color:#efefef;
    transform:rotate(-3deg);
    position:absolute;
    top:4%;
    left:-1%;
}

.container{
    position:absolute;
    top:50%;
    left:50%;
    width:1000px;
    transform:translate(-50%,-50%);
}

.jittert1{
    animation:jitter 1.19s steps(1,end) infinite;
    display:inline-block;
    position:absolute;
    margin:0px;
}


.jittert2{
    animation:jitter 1.31s steps(1,end) infinite;
    display:inline-block;
    position:absolute;
    margin:0px;
}

.ca{
  font-size: 11px;
  font-family:oceanside, monospace;
  position:relative;
  padding:12px;
  transform:rotate(-3deg);
}

.float{
  transform:rotate(-3deg);
  left: 75%;
}

a:link {
  color: #FFF;
}


a:visited {
  color: #DDD;
}

.box-background {
  background-image: url("cryptobg2.png");
  object-fit: fill;
  border-radius: 25px;
}

.box {
    color:#fff;
    width:400px;
    border-radius: 25px;
    outline: 2px solid #fff;
    margin:auto;
    position:relative;
    transform:rotate(-3deg);
    line-height:3rem;
}

.box-text {
  padding: 12px;
  font-family: nintender, monospace;
  font-size:40px;
  text-shadow:3px 3px 0px #000;
  color: #000;
}

.sprite {
 align-items: center;
 margin-right: 12px;
}

.footer {
  position:absolute;
  bottom: 1%;
  width: 100%;
  transform:rotate(-3deg);
}

.tinyfont {
 font-size: 8px;
 color: #FFF;
 height: 8px;
 line-height: 1rem;
}

.carousel-primary,
.carousel-secondary {
  left: 100%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.carousel-primary img {
  margin-left: 20px;
  border-radius: 14px;
  outline: 2px solid #000;
}

.carousel-primary {
  display: flex;
  justify-content: space-around;
  animation: scroll-horizontal 20s linear infinite;
}

.carousel-secondary {
  animation: scroll-horizontal 20s linear infinite;
  animation-delay: 10s;
}

@keyframes glow {
  50% {
    box-shadow: 0 0 120px hsl(0, 100%, 50%);
  }
}

.textbanner {
  color: #FFF;
 animation: blink 1s infinite; 
 font-family: silkscreen;
 font-size: 40px;
 width: 100%;
}

.yes {
  position: absolute;
  bottom: 15%;
 left: 85%;
 transform:rotate(-3deg);
}

.yes-inner {
  overflow: hidden;
  border-radius: 50%;
  animation: float 2s ease-in-out infinite;
}

.bubble {
  position: relative;    
  display: inline-block;
}

.bubble {
    background-color: #fff0a0;
    background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:         linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    border-radius: 5px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
                3px 3px 0 hsla(0,0%,0%,.1);
    color: #333;
    display: inline-block;
    font: 16px/25px sans-serif;
    padding: 15px 25px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
    animation: float 2s ease-in-out 0.2s infinite;
}
.bubble:after, .bubble:before {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff0a0;
    bottom: -25px;
    content: '';
    position: absolute;
    right: 130px;
}
.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 127px;
}

@keyframes float {
    0% {transform: translate(0,0) scale(1,1);}
    50% {transform: translate(0px,10px) scale(1.05,1);}
    100% {transform: translate(0,0) scale(1,1);}
}

[anim="glow"]:not(.toggled) {
  animation: glow var(--ease-elastic-in-1) 600ms infinite alternate;
}

@keyframes jitter
		{
		0%	{ transform: skew(-7deg) translate(0px, 0px) scalex(1) scaley(1.03) rotate(0deg);}
		10%	{ transform: skew(0.3deg) translate(-1px, 0px) scalex(1.07) scaley(1) rotate(0deg); }
		20%	{ transform: skew(2deg) translate(3px, 0px) scalex(1) scaley(1) rotate(0deg); }
		30%	{ transform: skew(0deg) translate(0px, 2px) scalex(1.08) scaley(1) rotate(0deg); }
		40%	{ transform: skew(-0.5deg) translate(1px, -5px) scalex(1) scaley(1.004) rotate(0deg); }
		50%	{ transform: skew(-0.5deg) translate(0px, 0px) scalex(1.1) scaley(1) rotate(0deg); }
		60%	{ transform: skew(0deg) translate(-3px, 0px) scalex(1) scaley(1) rotate(0deg); }
		70%	{ transform: skew(0.5deg) translate(-1px, -4px) scalex(0.95) scaley(1) rotate(0deg); }
		80%	{ transform: skew(3deg) translate(3px, 0px) scalex(1) scaley(1.03) rotate(0deg); }
		90%	{ transform: skew(1deg) translate(0px, 0px) scalex(1.08) scaley(1) rotate(0deg); }
		100%	{ transform: skew(-0.5deg) translate(1px, 5px) scalex(1) scaley(1.12) rotate(0deg); }
		}
		
@keyframes scroll-horizontal {
  0% {
    left: 100%;
  }

  100% {
    left: -100%;
  }
}

@keyframes blink {
  0% {
  color: #fff;
}
100% {
  color: #000;
}