/*MENU*/
* {
  border-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav {
  margin: 0;
  margin-left: -4em;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #479654;
  z-index: 10;
}

nav a {
  float: left;
  display: block;
  color: #FFF;
  text-align: center;
  padding: 1em;
  text-decoration: none;
  font-size: 1em;
}
    
nav a:hover {
  background-color: #5DC285;
  font-size: 1em;
}

/* BASIC DOCUMENT SETUP */

    
body {  
  background-color: #6ff285;
  color: #141414;
  padding: 2em;
  margin: 2em;
  font-family: "Playwrite NZ Basic", cursive;
  font-weight: 300;
}

/*CLASSES*/

.centerimg {
  display: block;
  margin: 0 auto;
  padding: 2em;
}

.msp {
    padding: 1.3em;
}

.bulletlist {
    padding: 1em;
    margin: 1em;
}

.conference text{
    padding: .5em;
    margin: 1em;
}

.p {
    padding: .1em;
    margin-left: -.1em;
}

.learnimg {
    float: left;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    justify-content: flex-start;
}

.floodimg {
    float: left;
    margin: 1em;
    padding: 1em;
    justify-content: flex-start;
}

.eelimg {
    border: .05em dashed #141414;
    flex-basis: 42%;
    margin: 1.5em;
    border-radius: 10px;
    padding: 1em;
}

.values {
    border: .05em dashed #141414;
    flex-basis: 42%;
    margin: 1.5em;
    border-radius: 10px;
    padding: 1em;
}

.donate {
    padding: .5em;
}


/*LINKS*/
a {
    color: #0C4755;
}

.tiny {
   font-size: 85%;
}

/*H1*/
h1 {
    font-family: "Great Vibes", cursive;
    font-weight: 200;
    padding: 1em;
}

/*CONTAINER*/

.container {
  display: flex;
  align-items: normal;
  justify-content: center;
  flex-wrap: wrap;
}

.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES */
  flex-basis: 40%;
  margin: 1.5em;
  border: 1px solid #052e0c;
  border-radius: 10px;
  padding: 1em;
}

.box img {
  max-width: 80%;
  display: block;
  margin: auto;
}

.group {
    /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES */
  flex-basis: 40%;
  margin: 1.5em;
  /*border: 1px solid black;*/
  /*border-radius: 10px;*/
  padding: 1em;
}

.group img {
    max-width: 100%;
    display: block;
    margin: auto;
}

div {
    margin: 2em;
}

/*HOVER*/
a:hover {
     background-color: #5DC285;
     color: #141414;
     text-decoration: underline;
}

/*CURSOR*/
.custom {
            cursor:
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="2" d="M9.61 4.45C7.68 11.71 8 9.28 8 18.5c0 .83.67 1.5 1.5 1.5h8.3c.7 0 1.31-.49 1.46-1.17l1.33-6A1.5 1.5 0 0 0 19.13 11h-5.21a1.5 1.5 0 0 1-1.46-1.86l.93-3.71a1.95 1.95 0 0 0-3.78-.98ZM6.5 20h-2A1.5 1.5 0 0 1 3 18.5v-6c0-.83.67-1.5 1.5-1.5h2c.83 0 1.5.67 1.5 1.5v6c0 .83-.67 1.5-1.5 1.5Z"></path></svg>'), auto;
                text-align: center;
        }
        
.paw {
                cursor:
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><g fill="%23000"><path d="M18 7c-3 0-5.5-1.5-9 2s-2 6-2 9c0 5 4.1 5.63 6 5 3-1 1-3 4-6s5-1 6-4c.63-1.9 0-6-5-6Z"></path><circle cx="8.2" cy="4" r="2"></circle><circle cx="4" cy="8.2" r="2"></circle><circle cx="14" cy="3" r="2"></circle><circle cx="3" cy="14" r="2"></circle></g></svg>'), auto;
                text-align: center;

}
        
/*BULLET DESIGN*/
.icon {
  list-style-type: '\2730';
}

li {
    padding-left: 1em;
}

/*ANIMATIONS*/

/* WIGGLE */
/* Create the animation... */
@keyframes wiggling {
   0%,
   7% {
      transform: rotateZ(0);
   }
   15% {
      transform: rotateZ(-15deg);
   }
   20% {
      transform: rotateZ(10deg);
   }
   25% {
      transform: rotateZ(-10deg);
   }
   30% {
      transform: rotateZ(6deg);
   }
   35% {
      transform: rotateZ(-4deg);
   }
   40%,
   100% {
      transform: rotateZ(0);
   }
}

/* ...and then apply it: */
.wiggle {
   animation-duration: 2s;
   animation-name: wiggling;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

/* BOUNCE */
/* Create the animation... */
@keyframes bouncing {
   from {
      transform: translateY(0px);
   }
   to {
      transform: translateY(-20px);
   }
}

/* ...and then apply it: */
.bounce {
   animation-duration: 350ms;
   animation-name: bouncing;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: cubic-bezier(0.2, 0.65, 0.6, 1);
}