style.css

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

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

.main_container {
  font-size: 10px;
  padding: 20px;
}

.navbar_container {
  display: flex;
  gap: 2em;
  justify-content: space-between;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.alexsmith_Container {
  display: flex;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.alex_photo img {
  border-radius: 50%;
  height: 60px;
  width: 60px;
  border: 5px solid white;
}

.alex_Intro {
  margin-left: 20px;
  width: 70%;
}

div.alex_Intro p {
  margin-top: 10px;
}

.table_Container td {
  border-top: 1px solid rgb(202, 202, 202);
  padding: 2px;
  width: 200px;
}

.sales_Container {
  flex-basis: 300px;
}

.sales_Container img {
  background-color: #fff;
  width: 100%;
  height: 30px;
}

.body_container {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

div.left_side_bar h1 {
  font-size: 15px;
  margin-bottom: 10px;
}

div.about_alex {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}
div.about_alex:hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

.about_alex div {
  display: flex;
}
.online{
  display: flex;
  align-items: center;
}
div.greenball {
  background-color: #00d70e;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

div.about_alex span {
  margin-left: 10px;
}

div.followers_friends {
  margin-top: 15px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}
div.followers_friends:hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

div.followers_friends img {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  margin: 2px;
}

div.personal_friends {
  margin-top: 15px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}
div.personal_friends:hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

div.personal_friends .pr1, .pr2, .pr3, .pr4, .pr5, .pr6 {
  border: 1px solid rgb(188, 188, 188);
  margin: 5px;
  height: 20px;
  display: flex;
  align-items: center;
}

div.personal_friends img {
  width: 10px;
  height: 10px;
  margin: 5px;
}

div.private_message {
  margin-top: 15px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

div.private_message p {
  margin: 5px 0;
}

div.private_message form input, textarea, button {
  width: 100%;
  margin: 5px 0;
  padding: 8px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 3px;
}

div.private_message form label {
  font-weight: bold;
}

div.private_message button {
  background-color: rgb(0, 177, 0);
  color: white;
  font-weight: 600;
  padding: 5px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
div.private_message button:hover {
  background-color: rgb(0, 104, 0);
  color: white;
}
div.center_bar {
  margin: 0 40px 0 20px;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

div.andrew_williams_1, .andrew_williams_2 {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

div.andrew_williams_1_top, .andrew_williams_2_top {
  font-size: 8px;
  border-bottom: 1px solid rgb(177, 177, 177);
  background-color: #fff;
  padding: 15px;
  border-radius: 5px 5px 0 0;
}

div.andrew_williams_1_top .intro, .andrew_williams_2_top .intro {
  display: flex;
}

div.andrew_williams_1_top img, .andrew_williams_2_bottom .intro img {
  width: 30px;
  height: 30px;
  margin: 2px;
}

div.andrew_williams_1_top .intro section, .andrew_williams_2_bottom .intro section {
  margin-left: 10px;
}

div.andrew_williams_1_top .intro section h2, .andrew_williams_2_bottom .intro section h2 {
  color: rgb(29, 132, 228);
}

div.andrew_williams_1_top .intro section p, .andrew_williams_2_bottom .intro section p {
  font-size: 8px;
}

div.andrew_williams_1_top p, .andrew_williams_2_bottom p {
  font-size: 9px;
  font-weight: 400;
}

div.andrew_williams_1_top div.like_this, .andrew_williams_2_bottom div.like_this {
  display: flex;
}

div.andrew_williams_1_top div.like_this a, .andrew_williams_2_bottom div.like_this a {
  border: 1px solid;
  color: rgb(116, 116, 116);
  padding: 2px 5px;
  text-decoration: none;
  border: 1px solid #ddd;
}

div.andrew_williams_1_top div.like_this a:hover:not(.active), .andrew_williams_2_bottom div.like_this a:hover:not(.active) {
  background-color: #ddd;
}

div.andrew_williams_1_top div.like_this a img, .andrew_williams_2_bottom div.like_this a img {
  height: 8px;
  width: 8px;
}

div.andrew_williams_1_top div.like_this a span, .andrew_williams_2_bottom div.like_this a span {
  font-size: 9px;
}

div.andrew_williams_1_bottom, .andrew_williams_2_bottom {
  font-size: 8px;
  background-color: rgb(237, 237, 237);
  padding: 12px;
}
div.andrew_williams_1_bottom button, div.andrew_williams_2_bottom button {
  background-color: rgb(0, 177, 0);
  color: white;
  font-weight: 600;
  padding: 5px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  width: 20%;
  margin-left: 10px;
}
div.andrew_williams_1_bottom button:hover , div.andrew_williams_2_bottom button:hover{
  background-color: rgb(0, 104, 0);
  color: white;
}

div.andrew_williams_1_bottom .intro, .andrew_williams_2_bottom .intro {
  display: flex;
}

div.andrew_williams_1_bottom .intro img, .andrew_williams_2_bottom img {
  width: 25px;
  height: 25px;
  margin: 2px;
}

div.andrew_williams_1_bottom .intro section, .andrew_williams_2_bottom .intro section {
  margin-left: 5px;
}

div.andrew_williams_1_bottom .intro section h3, .andrew_williams_2_bottom .intro section h3 {
  display: inline;
  color: rgb(29, 132, 228);
}

div.andrew_williams_1_bottom .intro section p, .andrew_williams_2_bottom .intro section p {
  font-size: 8px;
  display: inline;
}

div.andrew_williams_1_bottom .intro section img, .andrew_williams_2_bottom .intro section img {
  height: 8px;
  width: 8px;
}

div.andrew_williams_1_bottom .intro section .p2 a, .andrew_williams_2_bottom .intro section .p2 a {
  color: rgb(29, 132, 228);
  text-decoration: none;
}

div.andrew_williams_1_bottom .comment, .andrew_williams_2_bottom .comment {
  display: flex;
  margin-top: 15px;
}

div.andrew_williams_1_bottom img, .andrew_williams_2_bottom img {
  width: 25px;
  height: 25px;
  margin: 2px;
}

div.andrew_williams_1_bottom .comment section, .andrew_williams_2_bottom .comment section {
  margin-left: 5px;
}

div.andrew_williams_1_bottom .comment section h3, .andrew_williams_2_bottom .comment section h3 {
  display: inline;
  color: rgb(29, 132, 228);
}

div.andrew_williams_1_bottom .comment section p, .andrew_williams_2_bottom .comment section p {
  font-size: 8px;
  display: inline;
}

div.andrew_williams_1_bottom .comment section img, .andrew_williams_2_bottom .comment section img {
  height: 8px;
  width: 8px;
}

div.andrew_williams_1_bottom .comment section .p2 a, .andrew_williams_2_bottom .comment section .p2 a {
  color: rgb(29, 132, 228);
  text-decoration: none;
}

div.andrew_williams_1_bottom .comment_write, .andrew_williams_2_bottom .comment_write {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

div.andrew_williams_1_bottom .comment_write textarea, .andrew_williams_2_bottom .comment_write textarea {
  width: 100%;
  height: 30px;
  font-size: 10px;
  margin-left: 5px;
  border: none;
}

div.andrew_williams_2 {
  margin-top: 15px;
}

div.andrew_williams_2_top img {
  width: 30px;
  height: 30px;
  margin: 2px;
}

div.andrew_williams_2_top .intro section {
  margin-left: 10px;
}

div.andrew_williams_2_top .intro section h2 {
  color: rgb(29, 132, 228);
}

div.andrew_williams_2_top .intro section p {
  font-size: 8px;
}

div.andrew_williams_2_top p {
  font-size: 9px;
  font-weight: 400;
}
div.nature img{
  width: 100%;
  height: 300px;
}

div.andrew_williams_2_top div.like_this {
  display: flex;
}

div.andrew_williams_2_top div.like_this a {
  border: 1px solid;
  color: rgb(116, 116, 116);
  padding: 2px 5px;
  text-decoration: none;
  border: 1px solid #ddd;
}

div.andrew_williams_2_top div.like_this a:hover:not(.active) {
  background-color: #ddd;
}

div.andrew_williams_2_top div.like_this a img {
  height: 8px;
  width: 8px;
}

div.andrew_williams_2_top div.like_this a span {
  font-size: 9px;
}

div.andrew_williams_2_bottom {
  font-size: 8px;
  border-bottom: 1px solid rgb(177, 177, 177);
  padding: 12px;
}
.footer {
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  font-family: Arial, sans-serif;
}
.footercontainer {
  width: 80%;
  margin: 0 auto;
  max-width: 1200px;
}
.footer p {
  font-size: 14px;
}

@media screen and (min-width: 671px) and (max-width: 1080px) {
  .main_container {
    font-size: 12px;
  }
  .table_Container td {
    border-top: 1px solid rgb(202, 202, 202);
    padding: 2px;
    width: 300px;
  }
  .body_container {
    display: block;
  }
  div.left_side_bar {
    margin-bottom: 20px;
  }
  div.center_bar {
    margin: 0;
  }
  .timeline {
    position: relative;
    max-width: 100%;
    margin: 40px 0;
  }
  div.nature img{
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 671px) {
  .main_container {
    font-size: 15px;
  }
  .navbar_container {
    display: block;
  }
  .alexsmith_Container, .table_Container, .sales_Container {
    margin-top: 20px;
  }
  .alex_Intro {
    margin-left: 20px;
    width: 100%;
  }
  .table_Container td {
    width: 300px;
  }
  .body_container {
    display: block;
  }
  div.left_side_bar {
    margin-bottom: 20px;
  }
  div.center_bar {
    margin: 0;
  }
  .timeline {
    position: relative;
    max-width: 100%;
    margin: 40px 0;
  }
  div.nature img{
    width: 100%;
    height: auto;
  }
}

/*# sourceMappingURL=style.css.map */