.intro{
    background-image: url(../images/1625439720061.jpg);
    position: relative;
    padding: 10px;
    height: 700px;
    background-position: center;
}
.bg{
    background-color: rgba(0, 0, 0, 0.315);
    border-radius: 30px;
    
}
.col_flex{
    display: flex;
    text-align: center;
}
.Bionicles{
    flex: 1;
    text-align: center;
    padding: 15px;
    border: 1px #be1a00 solid;
    border-radius: 30px;
    background-color: rgba(190,26,0,50%);    
}
.Lego{
    flex: 1;
    text-align: center;
    padding: 15px;
    border: 1px #e95e00 solid;
    border-radius: 30px;
    background-color: #e95e0070;
}
.micro{
    flex: 1;
    text-align: center;
    padding: 15px;
    border: 1px #0235a4 solid;
    border-radius: 30px;
    background-color: #0235a470;
}
p{
    text-align: center;
}
body{
    margin: 0px;
    font-family: 'Poppins', sans-serif;
    color: white;
    background: linear-gradient(272deg, #1bd9a8, #d9461b, #5fd91b, #c71bd9);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    -o-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.colections{
    background-image: url(../images/BG_Lego.jpg);
    position: relative;
    padding: 10px;
    height: 700px;
    background-position: top;
    text-align: center;
}
.test{
    height: 100px;
    position: center;
    border-radius: 50px;
    overflow: hidden;
}
.description_me{
    color: white;
    text-align: center;
}
.education{
    background-image: url(../images/65-2.jpg), url(../images/67-2.jpg);
    background-position: left, right;
    background-repeat: no-repeat;
    background-size: 50%;
    height: 700px, 700px;
    position: relative;
    padding: auto;
    color: white;
    
}
.edu_flex{
    display: flex;
}
.school{
    background-color: rgba(190,26,0, 0.39);
    text-align: center;
    padding: 15px;
    border: 1px #0235a4 solid;
    border-radius: 30px;
    width: 500px;
    justify-content: center;
    flex: 1;
    block-size: auto;
    width: 100%;
    max-height: 700px;
}
.college{
    background-color: rgba(28, 0, 190, 0.39);
    text-align: center;
    padding: 15px;
    border: 1px #0235a4 solid;
    border-radius: 30px;
    width: 500px;
    justify-content: center;
    flex: 1;
    max-height: fit-content 700px;
}
h1.Me {
    display: flex;
    justify-content: center;
    color: white;
}
a {
    cursor: pointer;
}
.spam::before {
    content: "Armando";
    animation: animate infinite 3s;
    padding-left: 10px;
}

@keyframes animate {

    0% {
        content: "Armando";
    }

    50% {
        content: "Lara";
    }
}
h2{
    text-align: center;
}
.buttons{
    background-color: rgba(0, 0, 0, 0.315);
    margin-top: 1cm;   
}
.family{
    color: white;
}
.colections{
    color: white;
}
.handy{
    color: white;
}
.final{
    background-color: rgba(0, 0, 0, 0.315);
    margin-bottom: 20px;
    color: white;
}
/*Galeria lista*/ 
.wrapper {
	width: 50%;
	margin: 30px 25%;
    display: inline-block;
}

div.gallery {
	margin-top: 30px;
}

div.gallery ul {
	list-style-type: none;
	margin-left: 35px;
}

div.gallery ul li, div.gallery li img {
	-webkit-transition: all 0.1s ease-in-out;
  	-moz-transition: all 0.1s ease-in-out;
  	-o-transition: all 0.1s ease-in-out;
  	transition: all 0.1s ease-in-out;
}

div.gallery ul li {
	position: relative;
	float: left;
	width: 130px;
	height: 130px;
	margin: 5px;
	padding: 5px;
	z-index: 0;
}
div.gallery ul li:hover {
	z-index: 5;
}

div.gallery ul li img {
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #dddddd;
	padding: 5px;
	width: 130px;
	height: 130px;
	background: #f0f0f0;
}

div.gallery ul li img:hover {
	width: 200px;
	height: 200px;
	margin-top: -130px;
	margin-left: -130px;
	top: 65%;
	left: 65%;
}
/*botones*/
.animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button
{
	position: relative;
	padding: 10px 40px;
    margin: 0px 10px 10px 0px;
    float: left;
	border-radius: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 25px;
	color: #FFF;
	text-decoration: none;	
}

.blue
{
	background-color: #3498DB;
	border-bottom: 5px solid #2980B9;
	text-shadow: 0px -2px #2980B9;
}

.red
{
	background-color: #E74C3C;
	border-bottom: 5px solid #BD3E31;
	text-shadow: 0px -2px #BD3E31;
}

.green
{
	background-color: #82BF56;
	border-bottom: 5px solid #669644;
	text-shadow: 0px -2px #669644;
}

.action-button:active
{
	transform: translate(0px,5px);
    -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}
.buttons{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.logo{
    height: 100px;
    position: left;
    border-radius: 50px;
    overflow: hidden;
}