body{
overflow-x: hidden;
}

p{
    font-family:"Helvetica",sans-serif;
}
.frame{
display:grid;
grid-template-columns: 35% 35% 30% ;
grid-template-rows: 2;
}

#labproj1{
grid-column:1;
grid-row:1;
}
#tbaproject{
  grid-column:2;
  grid-row:1;  
}
#labproj2{
  grid-column:1;
grid-row:2;
}
#title{
 grid-column-start:3;
grid-column-end:4;
grid-row-start:1;
grid-row-end:3;
overflow-wrap:break-word;
max-width:100%;
text-align:right;
 font-family:"Helvetica",sans-serif;
color:pink;
font-size:2.5vw;
padding-right:3%;
position:sticky;
  top: 0; 
}
span{
  font-family:"Helvetica",sans-serif;
color:pink;
font-size:18;
overflow-wrap:break-word;
}
.link{
    transition-duration: 0.5s;
    padding:7%;
    width:max-content;
}
a{
    text-decoration:none;
}
.link:hover{
transform:scale(1.1);
transform-origin: center;
transition-duration: 0.5s;
}
 
   @media only screen and (max-width: 480px) { /*          here is mobile css  */
.frame{
display:grid;
grid-template-rows: 2fr 1fr 1fr 1fr;
grid-template-columns:1fr 1fr;
text-overflow:wrap;
}
   #title{
 grid-column-start:1;
 grid-column-end:3;
grid-row:1;
font-size: 2.5vh;
  }


#labproj1{
grid-column:1;
grid-row:2;
overflow-wrap:break-word;
width:fit-content;
}
#tbaproject{
  grid-column:1;
  grid-row:3;  
overflow-wrap:break-word;
width:fit-content;
}
#labproj2{
  grid-column:2;
grid-row:2;
overflow-wrap:break-word;
width:fit-content;
}
#labproj3{
  grid-column:2;
grid-row:3;
overflow-wrap:break-word;
width:fit-content;
}
#labproj4{
  grid-column:1;
grid-row:4;
overflow-wrap:break-word;
width:fit-content;
}
#labproj5{
  grid-column:2;
grid-row:4;
overflow-wrap:break-word;
width:fit-content;
}
}