Home.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.my_page{
  height: 982px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  text-decoration: none;
}

.Header{
  padding: 12px;
  background: #6C9EFE;
  font-weight: bold;
}

.header-menu {display: flex;flex-direction: row;align-items: center;width: 100%;justify-content: space-between;}

.header-menu-small {
display: none;
}

.header-menu-large {display: flex;justify-content: space-between;align-items: center;width: 50%;}

.profilepic{
  width: 70px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover;
}


 .menu{
    height: 68px;
    background-color: #F5F5F5;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 9px;
    font-weight: bold;
 }

 .main_area{
    height: 586px;
    background-image: url('Icons/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 180px 0px 0px 380px;
    line-height: 2;
    color: white;
 }

 .rightside{
   height: 666px;
   background-color: #D9D9D9;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   line-height: 2;
   font-size: 24px;
 }

 .footer{
   background-color:#6090B3;
   padding: 10px;
   display: flex;
   flex-direction: row;
   line-height: 2;
 }

 .contact_info, .follow_me{
   height: 100%;
   width: 50%;
   display: flex;
   flex-direction: column;
   align-content: center;
   padding-left: 10px;
 }

 .contact_info{
   padding-left: 10px;
 }

 .follow_me{
   display: flex;
   flex-direction: row;
   align-items: center;
 }

 .icon-list {
   list-style: none;
   display: flex;
   gap: 20px;
   padding-left: 6px;
}

a{
   text-decoration: none;
   color: black;
}

#linkedin{
  color:#323287 ;
}
#youtube{
  color: #b61021;
}
#facebook{
  color:#204483 ;
}


/* Mobile Styles */
@media only screen and (max-width: 600px) {
    .my_page {
        height: auto;
        max-width: 600px;
        padding: 3px;
    }

    .header-menu-small {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
    }


    .header-menu-large {
      display: none;
    }

    .brandname {
        grid-column: span 1;
        grid-row: 1;
        height: 50px;
        width: 70px;
    }

    .headerlink1,
    .headerlink2 {
        grid-column: span 1;
        grid-row: 2;
        width: auto;
        font-size: 12px;
    }

    .headerlink3{
        grid-row: 2;
        width: auto;
        font-size: 12px;
    }
  

    .headerlink1 {
        justify-self: start;
    }

    .headerlink2 {
        justify-self: center;
    }

    .headerlink3 {
        justify-self: center;
    }

    .profilepic {
        grid-column: 3 / span 2;
        grid-row: 1;
        height: 40px;
        width: 40px;
        justify-self: end;
    }

    .Main{
      display: flex;
       flex-direction: column;
       align-items: flex-start;
       margin: 2px;
    }

    .main_area{
      max-width: 585px;
      max-height: 350px;
      margin: 2px;
      font-size: 12px;
      padding: auto 30px auto auto;


  }

  .menu, .rightside{
    width:585px;
    max-height: 150px;
    margin: 2px;
    font-size: 12px;
  }

  p{
    padding: auto;
  }
  .footer{
    max-width: 585px;
    max-height: 100px;
    font-size: 12px;
    margin: 0px 6px auto 6px;
  }

}


/* Tablets Styles */
@media only screen and (min-width:601px) and (max-width:990px) {
  .my_page{
    height: auto;
    /* max-width: 100%; */
    padding: 6px;
    display: flex;
    flex-direction:column;
  }
.Header{
  max-width: 100%;
  /* max-height: 80px; */
  padding: 12px;
  font-size: 15px;
}

.header-menu-large {
  display: none;
}

.header-menu-small {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.Main{
  max-width: 100%;
  padding: 1px;
}
.brandname {
  grid-column: span 1;
  grid-row: 1;
  height: 50px;
  width: 80px;
}

.profilepic{
  width: 70px;
  height: 65px;
}

.menu{
  width: 100%;
  height: 38px;
  font-size: 12px;
}
.main_area{
  width: 100%;
  height: auto;
  font-size: 12px;
  padding: auto;
  display: flex;
  flex-direction: column;
  justify-items: center;
}

}