body, html {
    height: 100%;
    color: #C0C0C0;
    line-height: 1.8;
    background: #31458c;
}
.for_footer{
    position: relative;
    width: 100%;
    bottom: -50px;
    margin-top: 100px;
    background: rgba(255, 81, 110, 0.507);
}
.powerby-size{
    font-size: 12px;
}

.top{
    padding-bottom: 150px;
}

.title{
    margin-top: 50px;
    font-size: 1.5em;
    color: #C0C0C0;
    padding: 10px;
}
.center-shape{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 150px;
    margin-bottom: 200px;
    margin-left: 40px;
}

/* The figures */

/* THIS IS THE HEART ICON SHAPE */
.heart-color{
    color: #31458c;  
}
.heart{
    transform: scale(2, 2);;
    color: red;
    margin-left: 0px;
    animation: heart 7s infinite linear; 
    text-shadow: 0px 1px 10px gainsboro, 0 -2px 8px #d19;
}
.heart2{
    position: relative;
    left: -23px;
    top: -10px;
    transform: scale(0, 0);;
    color: red;
    animation: heart2 7s infinite linear; 
    text-shadow: 0px 1px 10px gainsboro, 0 -2px 8px #d19;
}

@keyframes heart{
    0%{
        transform: scale(2, 2);
        text-shadow: 0px 1px 10px gainsboro, 0 -2px 8px #d19;
        opacity: 1; 
    }
    50%{
        transform: scale(15, 15);
        text-shadow: 0px 1px 10px #A16AE8, 0 -2px 8px #FD49A0;
        opacity: 1; 
    }
    20%{
        transform: scale(15, 15);
        text-shadow: 0px 1px 10px #603F8B, 0 -2px 8px #B4FEE7;
        opacity: 1; 
    }
    0%{
        transform: scale(2, 2);
        text-shadow: 0px 1px 10px gainsboro, 0 -2px 8px #d19;
        opacity: 1; 
    }
}
@keyframes heart2{
    0%{
        transform: scale(0, 0);
        text-shadow: 0px 1px 10px gainsboro, 0 -2px 8px #d19;
        opacity: 1; 
    }
    50%{
        transform: scale(12, 12);
        text-shadow: 0px 1px 10px #A16AE8, 0 -2px 8px #FD49A0;
        opacity: 1; 
    }
    0%{
        transform: scale(0, 0);
        text-shadow: 0px 1px 10px red, 0 -2px 8px #d19;
        opacity: 1; 
    }
}

/* THIS IS THE STAR ICON SHAPE */
.star-color{
    color: #31458c;  
}
.star{
    transform: scale(2, 2);;
    color: red;
    animation: star 7s infinite linear; 
    text-shadow: 0px 1px 10px gainsboro, 0 -2px 8px #d19;
}
.star2{
    position: relative;
    left: -25px;
    transform: scale(0, 0);;
    color: red;
    animation: star2 7s infinite linear; 
    text-shadow: 0px 1px 10px gainsboro, 0 -2px 8px #d19;
}

@keyframes star{
    0%{
        transform: scale(2, 2);
        text-shadow: 0px 1px 10px gold, 0 -2px 8px #B78326;
        opacity: 1; 
    }
    50%{
        transform: scale(15, 15);
        text-shadow: 0px 1px 10px #FF6501, 0 -2px 8px #B78326;
        opacity: 1; 
    }
    20%{
        transform: scale(15, 15);
        text-shadow: 0px 1px 10px #75E6DA, 0 -2px 8px #FF6501;
        opacity: 1; 
    }
    0%{
        transform: scale(2, 2);
        text-shadow: 0px 1px 10px gainsboro, 0 -2px 8px #ECF87F;
        opacity: 1; 
    }
}
@keyframes star2{
    0%{
        transform: scale(2, 2);
        text-shadow: 0px 1px 10px gainsboro, 0 -2px 8px #d19;
        opacity: 1; 
    }
    50%{
        transform: scale(12, 12);
        text-shadow: 0px 1px 10px #B78326, 0 -2px 8px #ECF87F;
        opacity: 1; 
    }
    0%{
        transform: scale(2, 2);
        text-shadow: 0px 1px 10px gold, 0 -2px 8px #d19;
        opacity: 1; 
    }
}


/* THIS IS FOR THE TRIANGLE SHAPE BADLY DESIGNED BY ME */
/* container for triangle */
#container{
    position: relative;
    top: -110px;
    transform: translate(50%, 50%); 
}
.tri1-1, .tri1-2, .tri1-3{
    position: absolute;
    width: 10px;
    height: 100px;
    opacity: 0;
    background: space linear-gradient(10.9deg, blue,
    black, black 10px, black 13px, DodgerBlue 80px );
    box-shadow: -1px -1px 20px 2px SandyBrown; /* direction left-right, direction top-buttom, blur, how much */
}
.tri1-1{ 
    left: -24px;
    height: 100px;
    transform: rotate(31deg);
    animation: move-1 7s infinite linear; 
}
.tri1-2{
    left: 24px; 
    transform: rotate(-31deg);
    animation: move-2 7s infinite linear; 
}
.tri1-3{
    top: 43px;
    height: 95px;
    transform: rotate(90deg);
    animation: move-3 7s infinite linear; 
}

@keyframes move-1{
    50%{
        height: 280px; 
        left: -75Px;
        transform: rotate(33deg);
        opacity: 1; 
    }
}
@keyframes move-2{
    50%{
        height: 280px; 
        left: 75px;
        transform: rotate(-33deg);
        opacity: 1; 
    }
}
@keyframes move-3{
    50%{
        height: 309px; 
        top: 105px;
        transform: rotate(90deg);
        opacity: 1; 
    }
}

.tri2-1, .tri2-2, .tri2-3{
    position: absolute;
    width: 10px;
    height: 50px;
    top: 35px;
    opacity: 1;
    background: space linear-gradient(10.9deg, 
    black, black 10px, black 13px, RoyalBlue 80px );
    box-shadow: -1px -1px 20px 2px DarkTurquoise; /* direction left-right, direction top-buttom, blur, how much */
}
.tri2-1{ 
    left: -13px;
    transform: rotate(32deg);
    animation: exhale-1 7s infinite linear;  
}
.tri2-2{
    left: 13px; 
    transform: rotate(-32deg);
    animation: exhale-2 7s infinite linear;  
}
.tri2-3{
    top: 53px;
    height: 55px;
    transform: rotate(90deg);
    animation: exhale-3 7s infinite linear;
}
@keyframes exhale-1{ /* left */
    50%{
        height: 185px; 
        width: 6px;
        top: 57px;
        left: -45px;
        transform: rotate(30deg); 
        opacity: 1; 
    }
}
@keyframes exhale-2{ /* right */
    50%{
        height: 185px; 
        width: 6px;
        top: 57px;
        left: 45px;
        transform: rotate(-30deg);
        opacity: 1;
    }
}
@keyframes exhale-3{ /* bottom */
    50%{
        height: 185px; 
        width: 6px;
        top: 135px;
        transform: rotate(90deg);
        opacity: 1;
    }
}
.tri3-1, .tri3-2, .tri3-3{
    position: absolute;
    width: 10px;
    height: 20px;
    top: 58px;
    opacity: 0;
    background: space linear-gradient(10.9deg, 
    black, black 10px, black 13px, DodgerBlue 80px );
    box-shadow: -1px -1px 20px 2px DarkTurquoise; 
}
.tri3-1{ 
    left: -5px;
    transform: rotate(32deg);
    animation: inhale-1 7s infinite linear; 
}
.tri3-2{
    left: 5px; 
    transform: rotate(-32deg);
    animation: inhale-2 7s infinite linear; 
}
.tri3-3{
    top: 66px;
    height: 20px;
    transform: rotate(90deg);
    animation: inhale-3 7s infinite linear
}
@keyframes inhale-1{
    50%{
        height: 435px; 
        width: 6px;
        left: -108px;
        top: -95px;
        transform: rotate(30deg);  
        opacity: 1;
    }
}
@keyframes inhale-2{
    50%{
        height: 435px; 
        width: 6px;
        left: 109px;
        top: -95px;
        transform: rotate(-30deg);
        opacity: 1;
    }
}
@keyframes inhale-3{
    50%{
        height: 435px; 
        width: 6px;
        top: 90px;
        transform: rotate(90deg);
        opacity: 1;
    }
}



/* Dropdown Button */
.dropbtn {
    background-color: #7a8fda;
    box-shadow: 0px 2px 10px 2px rgba(196, 205, 213, 0.827);
    color: #C0C0C0;
    padding: 8px;
    font-size: 16px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
}
  
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}
  
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}
  
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(255, 81, 110, 0.507);;
    min-width: 150px;
    left: -10px;
    border-radius: 30px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
  
/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 10px 10px;
    text-decoration: none;
    display: block;
}
  
#triangulo, #corazon, #estrella{
    border-radius: 20px;
    border: none;
    box-shadow: 0px 2px 10px 2px rgba(196, 205, 213, 0.827);
    width: 80%;
    color: #31458c;
}  
#triangulo:hover, #corazon:hover, #estrella:hover{
    background-color: #2980B9;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display:block;
}