body{
  padding: 0;
  margin: 0;
  margin-bottom: 32px;
  background-color: var(--color-background);
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 16px;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 33%; /* 33% because 3 colums - 25% for 4 - so its even -Ryan 8/25/2021 */
  padding: 0 16px;
}

.column img {
  margin-top: 32px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
 
.theme-light {
  --color-background: #f2f3f7;
  --color-button: #f2f3f7;
  --color-icon: #03c04a; 
  --var1: rgba(255, 255, 255, 1);
  --var2: rgba(255, 255, 255, 0.5);
  --var3: rgba(255, 255, 255, 0.15);
  --var4: rgba(0, 0, 0, 0.15);
}

.theme-dark {
  --color-background: #575757;
  --color-button: #575757;
  --color-icon: #03c04a; 
  --var1: rgba(125,125,125,1);
  --var2: rgba(125,125,125,.5);
  --var3: rgba(125,125,125,.15);
  --var4: #181818;
}

.theme-light-pink {
  --color-background: #f2f3f7;
  --color-button: #f2f3f7;
  --color-icon: #ff69b4; 
  --var1: rgba(255, 255, 255, 1);
  --var2: rgba(255, 255, 255, 0.5);
  --var3: rgba(255, 255, 255, 0.15);
  --var4: rgba(0, 0, 0, 0.15);
}
.theme-dark-pink {
  --color-background: #575757;
  --color-button: #575757;
  --color-icon: #ff69b4; 
  --var1: rgba(125,125,125,1);
  --var2: rgba(125,125,125,.5);
  --var3: rgba(125,125,125,.15);
  --var4: #181818;
}

img { 		/* Makes image rounded - Ryan September 3 2021 */
  border-radius: 30px;
   box-shadow: 
	-2px -2px 8px var(--var1),
	-2px -2px 12px var(--var2),
	inset 2px 2px 4px var(--var3),
	2px 2px 4px var(--var4);
}



.middle{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}
.btn{
  display: inline-block;
  width: 225px;
  height: 225px;
  background: var(--color-button);
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 30%;
  box-shadow: 0 5px 15px -5px var(--color-shadow);
  color: var(--color-button-hover);
  overflow: hidden;
  position: relative;
}

.btn i{
  line-height: 225px;
  font-size: 65px;
  transition: 0.2s linear;
}
.btn:hover i{
  transform: scale(1.3);
  color: var(--color-icon-hover);
}
.btn::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: var(--color-button-hover);
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}
.btn:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}
@keyframes aaa {
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%;
  }100%{
    top: -10%;
    left: -10%;
  }
}

.btn2{
  display: inline-block;
  width: 113px;
  height: 113px;
  background: var(--color-button);
  margin-top: 8px;
  margin-bottom: -22px;
  border-radius: 100%;
  box-shadow: 0 5px 15px -5px var(--color-shadow);
  color: var(--color-button-hover);
  overflow: hidden;
  position: relative;
}

.btn2 i{
  line-height: 113px;
  font-size: 33px;
  transition: 0.2s linear;
}
.btn2:hover i{
  transform: scale(1.3);
  color: var(--color-icon-hover);
}
.btn2::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: var(--color-button-hover);
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}
.btn2:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}

FF69B4 03c04a 343434 333333 03c04a