@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
/*MENU */
.nombre{
       
      /* height: 50%; */
      /* top: 20%; */
      position: absolute;
       /* right:0px; derecha*/
       left: 20px; /* izquierda */
       top: 20px;
       width: 35%; /* Ancho */
  }
/* FIN MENÚ */
.mipresentacion{
    position: absolute;
    left: 20px;
    top: 170px;
    font-size: 35px;
    color: white;
}

.lenguajesprog{
    position: absolute;
    left: 20px;
    top: 240px;
    font-size: 15px;
    color: white;
    width: 50%;
}

section{
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

    section .circulo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: crimson;
        clip-path: circle(70% at right -20%);

    }
   .botonrojo{
       position: absolute;
       top: 360px;
       left: 62px;
       background-color: red; 
       color: white;
       border:none;
       padding: 10px 20px;
       border-radius: 5px;
   }
   .redes li{
       font-size: 1.5em;
       background-color: black;
       border-radius: 50%;
       transition: 0.5s;
   }

   .redes li:hover{
       background-color: red;
       color: white;
       transform: scale(1.2);
   }

   .redes li a{
       color: white;
       text-decoration: none;
       
   }

    .redes li a:hover {
        color: white;
     }
.posicion {
    position: absolute; /*position:relative*(deja un espacio en blanco al correrla, "absoute", no deja nada.. se se sube todo*/
    top: 20%;
    right:0%;
    left:62%
    /*bottom: 0px;
    right: 0px;
    left: 300px; izquierda*/
    /*width: 60%;  Ancho */
    /*height: 80%; Altura*/
   }
/*---------------------------------RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE ------*/

 @media(max-width: 800px){ /*Para hacer RESPONSIVE como yo ya sabia*/

    .nombre{
            top: 140px;
            width: 50%; /*ancho*/
     }

   img{  /*SON LAS FOTOS QUE VAN PASANDO*/
    width: 90%;
   }
   .text-white mb-2{
    font-size: 5px;
   }

   section .circulo {
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 50%;
        background-color: crimson;
        clip-path: circle(50% at right -10%);
    }

    .posicion {
    position: absolute; /*position:relative*(deja un espacio en blanco al correrla, "absoute", no deja nada.. se se sube todo*/
    top: 20%;
    right:0%;
    left:50%
    /*bottom: 0px;
    right: 0px;
    left: 300px; izquierda*/
}
.mipresentacion{
    font-size: 20px;
    color: white;
    position: absolute; /*position:relative*(deja un espacio en blanco al correrla, "absoute", no deja nada.. se se sube todo*/
    top: 50%;
    right:0%;
}
.lenguajesprog{
    font-size: 14px;
    color: white;
    position: absolute; 
    top: 60%;
    right:0%;
    width: 80%; /*ancho*/
}
.botonrojo{
    position: absolute; /*position:relative*(deja un espacio en blanco al correrla, "absoute", no deja nada.. se se sube todo*/
    top: 80%;
    right:0%;
    width: 30%; /*ancho*/
   }

@media(max-width: 380px){ /*Para mi celular*/ 

.botonrojo{
    
    width: 40%; /*ancho*/
   }

 img{  /*SON LAS FOTOS QUE VAN PASANDO*/
    width: 120%;
   }