/* 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." */

/* Calling fonts for universal use */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Pinyon+Script&family=Spicy+Rice');
.instrument-serif-regular {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.instrument-serif-regular-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}
.pinyon-script-regular {
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-style: normal;
}
.spicy-rice-regular {
  font-family: "Spicy Rice", serif;
  font-weight: 400;
  font-style: normal;
}

/* Text treatment */

h1 {
  background: linear-gradient(0deg, #ff579f, #BAB700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: "Spicy Rice";
}

h2 {
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: #ff579f;
	font-family: "Pinyon Script";
	color: #14342B;
}

ul {
  list-style-image: url('pinata-emoji.png') ;
  text-align: right;
  font-family: "Instrument Serif", serif;
  vertical-align: middle;
}

p {font-family: "Instrument Serif", serif;
}

a {text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: #ff579f;
	color: #ff579f;
  }
  
a:hover {text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: #ff579f;
	font-family: "Spicy Rice", serif;
  }



.h2box { background-color: #BAB700;
            padding: 2px;
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
            border: 1px solid #14342B;
            border-radius: 1px;
            position: relative;
            text-align: left;
            align-items: flex-start;
            margin: 2px;
            rotate: -5deg;
            animation: wiggle 10s infinite
}

@keyframes wiggle {
        0% { transform: skewX(0deg); }
        10% { transform: skewX(-2deg); }
        20% { transform: skewX(0deg); }
        30% { transform: skewX(-4deg); }
        40% { transform: skewX(2deg); }
        50% { transform: skewX(-3deg); }
        60% { transform: skewX(1deg); }
        70% { transform: skewX(-2deg); }
        80% { transform: skewX(1deg); }
        90% { transform: skewX(-1deg); }
        100% { transform: skewX(0deg); }
    }

body{
  background-image: url("grass.jpg");
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  position: relative;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  flex-direction: column;
        }

.mainbox {
            background-color: #14342B;
            padding: 10px;
            padding-left: 20px;
            padding-right: 20px;
            box-sizing: border-box;
            border: 2px double #BAB700;
            border-radius: 20px;
            position: relative;
            text-align: left;
            color: #BBDFC5;
            margin: 5px;
           
        } 
        
  div.gallery {
  display: flex;
  align-content: space-between;
  background: #ff579f;
  border-radius: 5px;
  margin: 20px;
  
}

div.gallery-item {
  margin: 5px;
  width: 300px;
  background-image: radial-gradient(circle,#BBDFC5 0%, #ff579f 60%);
  border-radius: 5px;
}


div.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  animation: wiggle2 10s infinite;
  &:hover {
    animation-play-state: paused;
  }
}


div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
  color: #14342B;
}

.h1box { background-color: #ff579f;
            padding: 2px;
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
            border: 1px solid #14342B;
            border-radius: 5px;
            position: relative;
            text-align: left;
            align-items: flex-start;
            margin: 2px;
            rotate: -1.5deg;
            animation: wiggle2 10s infinite
}

@keyframes wiggle2 {
        0% { transform: translate(0px, 5px); }
        50% { transform: translate(0px, -5px);}
        100% { transform: translate(0px, 5px); }
    }