/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    body {
        background-color: rgb(0, 0, 0);
      }
.gigi
{
    padding-right: 100%;
}
.va{

padding-left: -500px;
}

.vb
{
    padding-left: -50%;
}
.vf
{
    padding-left: -50%;
}

      .la
      {
          width: 1800px;
          
          padding-top: 30%;
           opacity: 20%;
           float: right;
          
           margin-right: -10%;
      }
.pj
{
    font-size: 2px;
}
.ma
{
    margin-top: -90%;
    width: 184%;
     
}
.mb{

    margin-left: 4%;
    margin-top: -20%; 
    font-size: 145%;

}
.mb br {

    display: none;
}
.mc
{
    font-size: 90%;
    margin-left: 4%; 
    margin-top: 6%;
}

.mc br {

    display: none;
}

.md
{
margin-left: 2%;
}

.me
{
    margin-left: 4%;
    font-size: 160%;
}

.mf  br {

    display: none;
}
.mf {

    padding-left: 4%;
}
.mg
{
    margin: top 20px; 
    padding-left: 4%;
}
.mg  br {

    display: none;
}
 .mh  br {

    display: none;
}
.mh{

    margin-left: -8.5%;
}
.mi
{
    margin-left: 6%;
    font-size: 160%;
    margin-top: 50%;
}
.mj
{
    margin-left: 5%;
}

.mk
{
    margin-top: 7%;
    width: 70%;
    margin-left: 14%;
}
.ml
{
    padding-left: 6%;
    font-size: 100%;
}
.mm
{
    margin-left: 6%;
}  
.mn
{
    margin-left: 6%;
    margin-top: 11%;
    color: black;
    width: 90%;
}
.mo
{
 margin-left: 1%;
}
.mp{

    margin-left: 6%;
}
.mp br
{
display: none;
}
.mq{
    margin-left: 6%;
    font-weight: bolder;
}
.mz
{
    margin-left: 6%;
    font-weight:bolder ;
}
.ms br
{
 display: none;
}
.ms
{
    margin-left: 6%;
}
.zz
{
    margin-top: -30%;
}                                     

.la
{
    margin-top: -100%;
    opacity: 20%;
    
}
                                         /*project 2 */           
.EA  br {
display: none;

}
.EA{
    font-size: 160%;
    margin-left: 7%;

}
.eb
{
    margin-left: 7%;
}
.ec br{
     display: none;
}
.ec
{
    font-size: 160%;
    margin-left: 7%;
    color: rgb(0, 0, 0);
}
.ed
{
    width: 70%;
    margin-left: 16%;
    margin-top: 10%;
}
.ef
{
    width: 70%;
    margin-top: -20%;
    margin-left: 16% ;
}
 
                   /*project 3 */
.aa
{
    margin-left: 4%;
    font-size: 165%;
}
.ab
{
    margin-left: 4%;
}
.ab br
{
display: none;
}
.ac
{
    margin-top: 60%;
    margin-left: -172px;
}
.ac br {
    display: none;
}
.yy 
{
    display: block;
}
.yy{
    margin-top: 9%;
    background-color: rgb(0, 0, 0);
}
.ad
{
    height: 10px;
}
                 /* PROJECT 4*/     
.ca  br
{
 display: none;
}
.ca {
     font-size: 30px;
     margin-left: 4%;
}
.cb
{
    margin-left: 4%;
}
.cd
{
    width: 80%;
    margin-left: 10%;
}
.ce
{
    margin-left: 4%;
}
.cf
{
    margin-left: 5%;
}
.cg{
    margin-left: 4%;
}
.ch
{
    width: 80%;
    margin-left: 10%;
}
.ci
{
    width: 80%;
    margin-left: 10%;
    margin-top: 12%;

}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    body {
        background-color: rgb(0, 0, 0);
      }

.la
{
    opacity: 20%;
    margin-left: 10%;
   
}      
.ma{
    width: 180%;
  margin-top:-45% ; 
}
.mb br {

    display: none;
}
.mb{

    margin-left: 6%;
}
.mc br {

    display: none;
}
.mc{
    margin-left: 6%;
    margin-right: 9%;
    font-size: 80%;
}
.md{
    margin-left: 1.5%;
}
.me{
margin-left: 7%;
font-size: 160%;
}
.mf{
    margin-left: 7%;
}
.mg{
    padding-left: 7%;
}
.mh{
    margin-left: -6.5%;
}
.mi
{
    margin-left: 7%;
    font-size: 160%;
}
.mj{

    margin-left: 7%;
    margin-right: 6%;
}
.mj br {
    display: none;
}
.mk
{
    width: 50%;
    margin-left: 26%;
}
.ml{
    margin-left: 7%;
    margin-right: 7%;
}
.mn br {

    display: none;
}

.mm
{
    margin-left:7% ;
    margin-right: 7%;
}
.mn
{
    margin-left: 7%;
    color: black;
}
.mq{
    margin-left: 7%;
}
.mp
{
    margin-left: 7%;
}
.mq
{
    margin-top: 60%;
    font-weight: bolder;
     font-size:90% ;
      margin-left: 7%;
}
.mz{
    margin-left: 7%;
    font-weight: bolder;
}
.ms
{
    margin-left: 7%;
}

                                   /*landing page */
.la
{
     margin-top: -200%;
     padding-top: -100;
}
 
.EA{
    margin-left: 7%;
    font-size: 155%;
}
.eb br
{
   display: none;
}
.eb
{
    margin-left: 7%;
    margin-right: 6%;
}
.ec
{
    margin-top: 10%;
    margin-left: 29%;
    font-size: 155%;   
}
.ed
{
    width: 70%;
    margin-left: 14.5%;
    margin-top: 5;
}
.ef
{
    width: 70%;
    margin-left: 14.5%;
    margin-top: -0%;

}

   
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {


 
      .la
      {
        opacity: 20%;

        
      }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    body {
        background-color: rgb(0, 0, 0);
      }
      .la
{
    width: 90%;
    height: 870px;
     opacity: 20%;
     float: right;
     margin-top: -66%; 
     margin-right: -10%;
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1280px) {

    body {
        background-color: rgb(0, 0, 0);
      }

.ma
{
   
    
      margin-top:-10% ; 
}      
.mb{

    margin-left: 4%;
    margin-top: 17%; 
    font-size: 125%;

}
.mc
{
    font-size: 60%;
    margin-left: 35%; 
    margin-top: -8%;
}

.md
{


    margin-left: 14%;
}
.me
{
    font-size: 165%;
    margin-left: 41%;
     margin-top: 10%;
}

.mf
{
    margin-left: 9%;
}

.mg
{
  padding-left: 9%; 
  margin-top: 5%;
}
.mh
{
    float: right;
    margin-top: -20.9%;
    margin-right: 10%;
}
.mi
{
    margin-left: 09%;
    margin-top: 8%;
}

.mj
{
    margin-left: 9%;
}
.mj  br {

display: inline-block;
}
.mk
{
    float: right;
     width: 25%;
     margin-top: -29%;
     margin-right: 10%;
}
.ml{

    margin-left: 9%;
    margin-top: 5%;
    font-weight: bolder;
}
.mm
{
    margin-left: 9%;
}
.mn{

    margin-left: 7.5%;
    margin-top: 5%;
    font-size: 90%;
    display: block;
    
}
.mo{
    padding-left: 9%;
    width: 90%; 
}
.mp
{
    margin-left: 18%; 
    font-size: 72%; 
}
.mq
{
    font-weight: bolder;
     font-size:90% ;
      margin-left: 18%;
}
.mz
{
    font-weight: bolder;
    font-size:90% ;
     margin-left: 13%;
} 

.mr{
    
    margin-left: 52%;
     margin-top: -22%
}
.ms

{
    margin-left: 13%;
     font-size: 72%;
}

                                               /*landing page */

.la
{
    width: 140%;
    height: 1100px;
     opacity: 20%;
     float: right;
     margin-top: -66%; 
     margin-right: -10%;
}
.EA
{
    margin-left: 6%;
    margin-top: 10%;
    font-weight: bolder;
}
.eb
{
    margin-left: 28%;
    margin-top: -10%;
}
.ec
{
    margin-left: 6%;
    margin-top: 10%;
    font-weight: bolder;
    color: black;
    padding-top: 20%;
}
.pp
{
    width: 60%;
    margin-left: 30%;
    margin-top: -25%;
}
.ef
{
    margin-left:17%;
     width: 65%;
     height: auto;
}
.ed
{
    width: 65%;
     margin-left: 17%;
      margin-top: 7%;
}


                       /* PROJECT 3 */
.aa

{
    margin-left: 41%;margin-top: 10%;
}
.ab
{
    margin-left: 9%;
}
.ac
{
    margin-left: 13%;
}
.ca 
{
    margin-left: 4%;
     margin-top: 15%;
     font-size: 185%;
}
.cb
{
    margin-left: 26%;
    margin-top: -10%;
}
.cd
{
    width: 900px;
    height: 600px;
     margin-left: 19%;
      margin-top: 10%;
}
.ce
{
    margin-left: 20%;
    margin-top: -8%;
}
.cf
{
    width: 1100px; 
    padding-left: 25%;
}
.cg
{
    margin-left: 13%;
     margin-top: 10%;
}
.ch
{
    width: 1100px;
     height: 500px;
      padding-left: 25%;
}
.ci
{
    width: 1200px;
     height: 600px;
      padding-left: 11%;
       padding-top: 9%;
}
}