.penguin {
   margin-left: auto;
  margin-right: auto;
  position: center;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 2px #1a0c1a) drop-shadow(0 0 .2px #ffffff);
 animation: glow 1.5s ease-in-out infinite alternate;
 
}

.ridge {

   border-style: ridge;
    border-style: dotted solid double dashed;
  border-color: rgb(0, 255, 149) rgb(0, 128, 117) blue yellow; /* red top, green right, blue bottom and yellow left */
  border-block-width: initial;
 
}

.border {

border: 10px solid transparent; /* Required for border-image */
  padding: 5px;
  border-image: url(heartwind.gif) 30 round;
  border-image-repeat: round;
}
ul.breadcrumb {
  padding: 8px;
 
}

ul.breadcrumb li {display: inline;}
ul.breadcrumb li a {color: rgb(15, 73, 15);}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

 div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes myAnimation {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

.roundedimg {

   border-radius: 80%;
   border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;

}

.imghover {
   box-shadow: 0 0 2px rgba(0, 140, 186, 0.5);
}

.buttonstyle {
   padding-left: 5%;
}
.button{
   background-color: #04AA6D;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.disabledbutton {
 opacity: 0.6;
cursor: not-allowed;
}

.back2planet2 {
   position:sticky;
bottom: 0;
width: 100%;
text-align: center; }