@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Poppins:wght@400;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}
html, body{
    position: relative;
    
    width: 1440px;
    height: 1489px;
    background: #FFFFFF;
    box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    
}

.header{
    color: #000000;
    position: absolute;
    width: 350px;
    height: 47px;
    left: 243px;
    top: 110px;
    font-family: PT Serif;
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -0.0045em;
      
}

/*IMAGENES********************************/
.imagenes{
    height: 340px;
    width: 238px;

   
}
#imagen1{
    position: absolute;
    left: 240px;
    top: 330px;
    margin: 0;
    background-color: #333333;
        
    }
#imagen2{
    position: absolute;
    left: 571px;
    top: 429px;
}
#imagen3{
    position: absolute;
    left: 901px;
    top: 330px;
}
#imagen4{
    position: absolute;
    left: 241px;
    top: 845px;
}
#imagen5{
    position: absolute;
    left: 571px;
    top: 944px;
}
#imagen6{
    position: absolute;
    left: 902px;
    top: 845px;
}


.titulo{
    color: #000000;
    position: absolute;
    width: 117px;
    height: 27px;
    left: 736px;
    top: 110px;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
    
    text-align: left;
    text-transform: uppercase;
    
}

p{
    color: #4F4F4F;
    position: absolute;
    width: 439px;
    height: 87px;
    left: 736px;
    top: 147px;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    line-height: 27px;
    letter-spacing: -0.035em;
    text-align: left;
  
}
/*NOMBRES BAJO LAS FOTOS***********************************************/

.nombres{
    color:#000000;
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
}

#BillMahoney{
    position: absolute;
    width: 117px;
    height: 27px;
    left: 240px;
    top: 686px;
}
#SabaCabrera{
    position: absolute;
    width: 128px;
    height: 27px;
    left: 571px;
    top: 791px;
}

#ShaeLe{
    position: absolute;
    width: 70px;
    height: 27px;
    left: 901px;
    top: 686px;
}
#SkylahLu{
    position: absolute;
    width: 86px;
    height: 27px;
    left: 241px;
    top: 1201px;
}
#GriffRichards{
    position: absolute;
    width: 124px;
    height: 27px;
    left: 571px;
    top: 1306px;
  
}
#StanJohn{
    position: absolute;
    width: 92px;
    height: 27px;
    left: 902px;
    top: 1201px;
   
}

/* PUESTOS  EN LA EMPRESA *****************************************/ 
.puestos{
    color : #000000;
    font-family: PT Serif;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    transform:rotate(90deg);
    transform-origin: top left;
   
}
#Productowner{
    position: absolute;
    width: 102px;
    height: 30px;
    left: 504px;
    top: 330px;
  
   
   
}

#Artdirector{
    position: absolute;
    width: 185px;
    height: 16px;
    left: 835px;
    top: 429px;
    
}
#TechLead{
    position: absolute;
    width: 65px;
    height: 16px;
    left: 1165px;
    top: 330px;
    
}
#UXDesigner{
    position: absolute;
    width: 77px;
    height: 16px;
    left: 504px;
    top: 845px;
    
}
#Developer{
    position: absolute;
    width: 68px;
    height: 16px;
    left: 835px;
    top: 944px;
    
}
#Developer2{
    position: absolute;
    width: 76px;
    height: 16px;
    left: 1165px;
    top: 845px;
    
}
/*my footer---------------------------------------------------------*/

 /* unvisited link */
 .footer:link {
    
    text-decoration: none;
  }
  
  /* visited link */
  .footer:visited {
    color:orange;
    text-decoration: none;
  }
  
  /* mouse over link */
  .footer:hover {
    transition: color .2s;
    color: purple;
    text-decoration: none;
      
} 
  /* selected link */
  .footer:active {
    text-decoration: none;
  } 


/**********************************************************************/
  

 footer{
    position: absolute;
    width: 287px;
    height: 17px;
    left: 577px;
    top: 1448px;
 }

/*********************media query******************************************/

 @media (max-width: 400px) {
    
    body{
        margin: 0;
        background-color: #FFFFFF;
    }
    html, body{
        position: relative;
        width: 375px;
        height: 1400px;
        
        
        background: #FFFFFF;
        box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
    
    .imagenes{
        height: 220px;
        width: 139px;
    
       
    }
    #imagen1{
        position: absolute;
        left: 19px;
        top: 318px;
                
            
    }
    #imagen2{
        position: absolute;
        left: 202px;
        top: 366px;
    }
    #imagen3{
        position: absolute;
        left: 19px;
        top: 619px;
    }
    #imagen4{
        position: absolute;
        left: 200px;
        top: 667px;
    }
    #imagen5{
        position: absolute;
        left: 19px;
        top: 930px;
    }
    #imagen6{
        position: absolute;
        left: 201px;
        top: 979px;
    }
    
    
    
    .header{
        color: #000000;
        position: absolute;
        width: 300px;
        height: 47px;
        left: 12px;
        top: 71px;
        font-family: PT Serif;
        font-style: normal;
        font-weight: bold;
        font-size: 36px;
        line-height: 48px;
        letter-spacing: -0.0045em;
          
    }
    
    .titulo{
        color: #000000;
        position: absolute;
        width: 117px;
        height: 27px;
        left: 12px;
        top: 156px;
        font-family: Poppins;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 27px;
        
        text-align: left;
        text-transform: uppercase;
        
    }
    
    p{
        color: #4F4F4F;
        position: absolute;
        width: 333px;
        height: 87px;
        left: 12px;
        top: 193px;
        font-family: Poppins;
        font-size: 18px;
        font-style: normal;
        font-weight: normal;
        line-height: 27px;
        letter-spacing: -0.035em;
        text-align: left;
      
    }
    /*NOMBRES BAJO LAS FOTOS***********************************************/
    
    .nombres{
        color:#000000;
        font-family: Poppins;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 21px;
    }
    
    #BillMahoney{
        position: absolute;
        width: 128px;
        height: 18px;
        left: 19px;
        top: 547px;
    }
    #SabaCabrera{
        position: absolute;
        width: 141px;
        height: 18px;
        left: 200px;
        top: 595px;
    }
    
    #ShaeLe{
        position: absolute;
        width: 111px;
        height: 14px;
        left: 20px;
        top: 852px;
    }
    #SkylahLu{
        position: absolute;
        width: 109px;
        height: 17px;
        left: 200px;
        top: 898px;
    }
    #GriffRichards{
        position: absolute;
        width: 97px;
        height: 21px;
        left: 19px;
        top: 1170px;
      
    }
    #StanJohn{
        position: absolute;
        width: 100px;
        height: 21px;
        left: 200px;
        top: 1213px;
       
    }
    
    /* PUESTOS  EN LA EMPRESA *****************************************/ 
    .puestos{
        color : #000000;
        font-family: PT Serif;
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        line-height: 13px;
        text-transform: uppercase;
        transform:rotate(90deg);
        transform-origin: top left;
       
    }
    #Productowner{
        position: absolute;
        width: 130px;
        height: 11px;
        left: 175px;
        top: 318px;
      
       
       
    }
    
    #Artdirector{
        position: absolute;
        width: 122px;
        height: 10px;
        left: 357px;
        top: 366px;
        
    }
    #TechLead{
        position: absolute;
        width: 84px;
        height: 9px;
        left: 173px;
        top: 619px;
        
    }
    #UXDesigner{
        position: absolute;
        width: 69px;
        height: 10px;
        left: 354px;
        top: 667px;
        
    }
    #Developer{
        position: absolute;
        width: 57px;
        height: 13px;
        left: 173px;
        top: 930px;
        
    }
    #Developer2{
        position: absolute;
        width: 63px;
        height: 13px;
        left: 355px;
        top: 979px;
        
    }
    /*my footer---------------------------------------------------------*/
    
     /* unvisited link */
     .footer:link {
        
        text-decoration: none;
      }
      
      /* visited link */
      .footer:visited {
        color:orange;
        text-decoration: none;
      }
      
      /* mouse over link */
      .footer:hover {
        transition: color .2s;
        color: purple;
        text-decoration: none;
          
    } 
      /* selected link */
      .footer:active {
        text-decoration: none;
      } 
    
    
    /**********************************************************************/
      
    
     footer{
        position: absolute;
        width: 287px;
        height: 17px;
        left: 90px;
        top: 1368px;
     }
    
    
  }