body {

   height: fit-content;
   width: 100%;
   max-width: 1500px;
   background-color: black;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
   

  

}


#tomi {

   font-size: 50px;
   margin-left: 0px;
   font-weight: bold;
   color: rgb(30, 172, 153);
   margin-top: 0px;
   width: 450px;
   
   
}


#middle2 {

   margin-left: auto;
   margin-right: auto;
   height: fit-content;
   width: fit-content;
   margin-top: 100px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 100px;

}

#photo {

   width: 300px;
   height: 300px;
   border-top-right-radius: 50%;
   border-bottom-left-radius: 50%;

}

#plc1 {

   font-size: 50px;
   margin-left: 0px;
   margin-top: 0px;
   color: rgb(69, 185, 252);

}

#plc2 {

   font-size: 25px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 250px;
   height: 40px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc3 {

   font-size: 25px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 250px;
   height: 40px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc4 {

   font-size: 20px;
   margin-left: 50px;
   margin-top: 0px;
   color: white;
   
}

#plc5 {

   font-size: 20px;
   margin-left: 50px;
   margin-top: 0px;
   color: white;
   
}


#middle3 {

   margin-left: auto;
   margin-right: auto;
   height: fit-content;
   width: 70%;
   margin-top: 50px; 
   margin-bottom: 100px;

}


#about {

   font-size: 40px;
   color: rgb(69, 185, 252);

}

.sava {

   font-size: 20px;
   color: rgb(255, 255, 255);

}


@media only screen and (min-width:1px) and (max-width:360px) {

body {

   height: fit-content;
   width: 100%;
   min-width: 300px;
   max-width: 360px;
   background-color: black;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
   

  

}

#tomi {

   font-size: 50px;
   margin-left: 0px;
   font-weight: bold;
   color: rgb(30, 172, 153);
   margin-top: 0px;
   width: fit-content;
   
   
}

#middle2 {

   margin-left: 0px;
   margin-right: auto;
   height: fit-content;
   width: 300px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 30px;

}

#photo {

   width: 100px;
   height: 100px;
   border-top-right-radius: 50%;
   border-bottom-left-radius: 50%;
   margin-right: 20px;
   margin-left: 10px;

}

#plc1 {

   font-size: 26px;
   margin-left: 0px;
   margin-top: 0px;
   color: rgb(69, 185, 252);

}

#plc2 {

   font-size: 18px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 150px;
   height: 20px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc3 {

   font-size: 18px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 150px;
   height: 20px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc4 {

   font-size: 16px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   
}

#plc5 {

   font-size: 16px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   
}


#middle3 {

   margin-left: auto;
   margin-right: auto;
   height: fit-content;
   width: 96%;
   margin-top: 50px; 
   margin-bottom: 100px;

}


#about {

   font-size: 26px;
   color: rgb(69, 185, 252);

}

.sava {

   font-size: 18px;
   color: rgb(255, 255, 255);

}   

}

@media only screen and (min-width:361px) and (max-width:399px) {

body {

   height: fit-content;
   width: 100%;
   min-width: 361px;
   max-width: 399px;
   background-color: black;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
   

  

}

#tomi {

   font-size: 50px;
   margin-left: 0px;
   font-weight: bold;
   color: rgb(30, 172, 153);
   margin-top: 0px;
   width: fit-content;
   
   
}

#middle2 {

   margin-left: 0px;
   margin-right: auto;
   height: fit-content;
   width: 356px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 30px;

}

#photo {

   width: 135px;
   height: 135px;
   border-top-right-radius: 50%;
   border-bottom-left-radius: 50%;
   margin-right: 10px;
   margin-left: 10px;

}

#plc1 {

   font-size: 30px;
   margin-left: 0px;
   margin-top: 0px;
   color: rgb(69, 185, 252);

}

#plc2 {

   font-size: 18px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 150px;
   height: 20px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc3 {

   font-size: 18px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 150px;
   height: 20px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc4 {

   font-size: 18px;
   margin-left: 10px;
   margin-top: 0px;
   color: white;
   
}

#plc5 {

   font-size: 18px;
   margin-left: 10px;
   margin-top: 0px;
   color: white;
   
}


#middle3 {

   margin-left: auto;
   margin-right: auto;
   height: fit-content;
   width: 96%;
   margin-top: 50px; 
   margin-bottom: 100px;

}


#about {

   font-size: 30px;
   color: rgb(69, 185, 252);

}

.sava {

   font-size: 18px;
   color: rgb(255, 255, 255);

}   

}

@media only screen and (min-width:400px) and (max-width:500px) {

body {

   height: fit-content;
   width: 100%;
   min-width: 400px;
   max-width: 500px;
   background-color: black;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
   

  

}

#tomi {

   font-size: 50px;
   margin-left: 0px;
   font-weight: bold;
   color: rgb(30, 172, 153);
   margin-top: 0px;
   width: fit-content;
   
   
}

#middle2 {

   margin-left: 10px;
   margin-right: auto;
   height: fit-content;
   width: 360px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 30px;

}

#photo {

   width: 150px;
   height: 150px;
   border-top-right-radius: 50%;
   border-bottom-left-radius: 50%;
   margin-right: 20px;
   margin-left: 10px;

}

#plc1 {

   font-size: 30px;
   margin-left: 0px;
   margin-top: 0px;
   color: rgb(69, 185, 252);

}

#plc2 {

   font-size: 18px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 150px;
   height: 20px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc3 {

   font-size: 18px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 150px;
   height: 20px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc4 {

   font-size: 18px;
   margin-left: 10px;
   margin-top: 0px;
   color: white;
   
}

#plc5 {

   font-size: 18px;
   margin-left: 10px;
   margin-top: 0px;
   color: white;
   
}


#middle3 {

   margin-left: auto;
   margin-right: auto;
   height: fit-content;
   width: 96%;
   margin-top: 50px; 
   margin-bottom: 100px;

}


#about {

   font-size: 30px;
   color: rgb(69, 185, 252);

}

.sava {

   font-size: 18px;
   color: rgb(255, 255, 255);

}   

}

@media only screen and (min-width:501px) and (max-width:700px) {

body {

   height: fit-content;
   width: 100%;
   min-width: 501px;
   max-width: 700px;
   background-color: black;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
    

}


#tomi {

   font-size: 50px;
   margin-left: 0px;
   font-weight: bold;
   color: rgb(30, 172, 153);
   margin-top: 0px;
   width: fit-content;
     
}

#middle2 {

   margin-left: 20px;
   margin-right: auto;
   height: fit-content;
   width: 460px;
   margin-top: 100px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 100px;

}

#photo {

   width: 200px;
   height: 200px;
   border-top-right-radius: 50%;
   border-bottom-left-radius: 50%;
   margin-right: 20px;
   margin-left: 10px;

}

#plc1 {

   font-size: 30px;
   margin-left: 0px;
   margin-top: 0px;
   color: rgb(69, 185, 252);

}

#plc2 {

   font-size: 18px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 150px;
   height: 20px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc3 {

   font-size: 18px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 150px;
   height: 20px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc4 {

   font-size: 18px;
   margin-left: 10px;
   margin-top: 0px;
   color: white;
   
}

#plc5 {

   font-size: 18px;
   margin-left: 10px;
   margin-top: 0px;
   color: white;
   
}


#middle3 {

   margin-left: auto;
   margin-right: auto;
   height: fit-content;
   width: 90%;
   margin-top: 50px; 
   margin-bottom: 100px;

}


#about {

   font-size: 30px;
   color: rgb(69, 185, 252);

}

.sava {

   font-size: 18px;
   color: rgb(255, 255, 255);

}   

}



@media only screen and (min-width:701px) and (max-width:1200px) {

body {

   height: fit-content;
   width: 100%;
   min-width: 701px;
   max-width: 1200px;
   background-color: black;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
   

}

#tomi {

   font-size: 50px;
   margin-left: 0px;
   font-weight: bold;
   color: rgb(30, 172, 153);
   margin-top: 0px;
   width: fit-content;
   
   
}

#middle2 {

   margin-left: 50px;
   margin-right: auto;
   height: fit-content;
   width: 600px;
   margin-top: 100px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 100px;

}

#photo {

   width: 250px;
   height: 250px;
   border-top-right-radius: 50%;
   border-bottom-left-radius: 50%;
   margin-right: 50px;

}

#plc1 {

   font-size: 50px;
   margin-left: 0px;
   margin-top: 0px;
   color: rgb(69, 185, 252);

}

#plc2 {

   font-size: 25px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 250px;
   height: 40px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc3 {

   font-size: 25px;
   margin-left: 0px;
   margin-top: 0px;
   color: white;
   width: 250px;
   height: 40px;
   border-radius: 30px;
   background-color: rgb(69, 185, 252);
   text-align: center;
   align-items: center;
   align-content: center;
   
   
   
}


#plc4 {

   font-size: 20px;
   margin-left: 50px;
   margin-top: 0px;
   color: white;
   
}

#plc5 {

   font-size: 20px;
   margin-left: 50px;
   margin-top: 0px;
   color: white;
   
}


#middle3 {

   margin-left: auto;
   margin-right: auto;
   height: fit-content;
   width: 85%;
   margin-top: 50px; 
   margin-bottom: 100px;

}


#about {

   font-size: 40px;
   color: rgb(69, 185, 252);

}

.sava {

   font-size: 20px;
   color: rgb(255, 255, 255);

}   

}