html {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  body {
    font-family: verdana, arial, sans-serif, helvetica;
    background-color: #e5e5e5;
    font-size: 8pt;
    margin: 0;
    color: #ffffff;
  }
  
  a {
    font-weight: bold;
    text-decoration: none;
  }
  
  a:link {
    color: #003399;
  }
  
  a:visited {
    color: #003399;
  }
  
  a:hover {
    text-decoration: underline;
    color: #cc0000;
  }
  
  h2 {
    font-size: 9pt;
    margin: 0;
    font-weight: bold;
  }
  
  p {
    line-height: 1.3;
  }
  
  .master-container {
    margin: auto;
    width: 800px;
    background-color: white;
  }

  .main-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 151px;
    background-color: rgb(0, 51, 153);
    color: #ffffff;
  }
  
  .main-header ul {
    list-style-type: none;
  }
  
  .main-header a:link {
    color: #ffffff;
    font-weight: normal;
  }
  
  .main-header a:visited {
    color: #ffffff;
  }

  .search-bar {
    display: grid;
    grid-template-columns: 0.25fr 1fr 0.25fr;
  }
  
  .search-bar form {
    justify-self: center;
    margin: 0;
  }
  
  .search-bar form [type="text"] {
    width: 160px;
  }
  
  .search-bar form [type="radio"] {
    margin-right: 0.33rem;
  }
  
  .search-bar ul {
    display: flex;
  }
  
  .submit-btn {
    margin: 8px;
    border: 1px solid black;
    padding: 2px 7px;
    background-color: #e0ffff;
    font-size: 10px;
    border-color: rgb(186, 186, 186);
  }
  
  .topnav {
    padding: 0;
    margin: 8px;
  }
  
  .topnav li:first-child::after {
    content: "|";
    margin: 0.33rem;
  }
  
  .home {
    justify-self: start;
  }
  
  .signup {
    justify-self: end;
  }

  .navbar {
    display: flex;
    align-items: center;
    margin-top: auto;
    background-color: rgb(102, 153, 204);
    height: 26px;
  }
  
  .navbar ul {
    display: flex;
    margin: 0 auto;
    padding: 0;
  }
  
  .navbar li::after {
    content: "|";
    margin: 0.33rem;
    color: black;
  }
  
  .navbar li:last-child::after {
    content: "";
  }
  
  .navbar a:hover {
    color: #003399;
  }

  .page-content-container {
    display: grid;
    grid-template-columns: 325px 453px;
    grid-column-gap: 20px;
    grid-template-areas: "sidebar main";
  }
  
  .profile-sidebar {
    grid-area: sidebar;
    margin-left: 27px;
    width: 300px;
  }
  
  h1 {
    font-size: 12.25pt;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 0px;
    color: #e5e5e5;
  }
  
  .profile-sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  p {
    line-height: 1.3;
    background: -webkit-linear-gradient(#24ffff, #FFC0CB); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    text-shadow: 0 0 11px #FFC0CB; 
  }

  .profile-picture-container {
    display: grid;
    grid-template-columns: 170px 115px;
    grid-template-rows: 176px;
    grid-column-gap: 15px;
    margin-bottom: 12px;
  }
  
  .profile-picture-container p {
    margin: 0;
  }
  
  .profile-pic {
    grid-area: 1/1;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .personal-msg {
    grid-area: 1/2;
    margin: 0;
  }
  
  .gender-age {
    grid-area: 1/2;
  }
  
  .gender-age li:first-child {
    margin-top: 28px;
  }
  
  .last-login {
    grid-area: 1/2;
    align-self: end;
  }
  
  .last-login li:last-child {
    margin-bottom: 15px;
  }
  
  .pics-videos {
    grid-area: 1/1;
    justify-self: center;
    align-self: end;
  }
  
  .contact-box {
    border: 2px solid rgb(102, 153, 204);
    height: 149px;
    width: 300px;
    margin-bottom: 24px;
  }
  
  .contact-box h2 {
    color: white;
    background-color: rgb(102, 153, 204);
    height: 17px;
    padding-left: 10px;
  }
  
  .contact-images {
    display: grid;
    grid-template-columns: 150px 150px;
    margin: 0;
    margin-top: 5px;
    margin-left: 10px;
  }

  .myspace-url-box {
    border: 1px solid rgb(102, 153, 204);
    height: 26px;
    margin-bottom: 24px;
  }
  
  .myspace-url-box h3,
  .myspace-url-box p {
    margin: 0;
    padding: 0;
  }
  
  .myspace-url-box h3 {
    font-size: 8pt;
    padding-left: 2px;
  }
  
  .myspace-url-box p {
    padding-left: 6px;
  }

  .sidebar-table {
    border: 2px solid rgb(102, 153, 204);
    display: table;
    border-collapse: separate;
    border-spacing: 3px;
  }
  
  .sidebar-table-h2 {
    background-color: rgb(102, 153, 204);
    color: white;
    text-align: left;
    height: 17px;
    padding-left: 15px;
    padding-top: 2px;
  }
  
  .sidebar-table-header {
    vertical-align: top;
    text-align: left;
    width: 107px;
    background-color: rgb(177, 208, 240);
    color: #336699;
    padding: 3px;
    font-weight: bold;
    font-size: 8pt;
  }
  
  .sidebar-table-data {
    width: 184px;
    background-color: rgb(213, 232, 251);
    padding: 3px;
  }
  
  .interests p {
    margin-top: 0;
  }
  
  .interests p:only-child,
  .interests p:last-child {
    margin-bottom: 0;
  }
  
  .interests table {
    margin-bottom: 13px;
  }
  
  .details table {
    margin-bottom: 22px;
  }

  .schools .sidebar-table-header {
    width: 228px;
    color: rgb(255, 255, 255);
    font-weight: normal;
  }
  
  .schools .sidebar-table-data {
    width: 63px;
    text-align: center;
    vertical-align: top;
  }
  
  .schools ul {
    margin-bottom: 2em;
  }
  
  main {
    grid-area: main;
  }

  .user-network {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 433px;
    margin: auto;
    height: 75px;
    border: 2px solid black;
    margin-top: 13px;
  }
  
  .user-network h2 {
    font-size: 12pt;
  }
  
  .blog {
    display: grid;
    grid-auto-rows: 29px;
    flex-direction: column;
    margin-top: 13px;
    margin-left: 12px;
    margin-bottom: 16px;
  }
  
  .blog p {
    margin-top: 3px;
  }

  .main-section-header {
    background-color: #ffcc99;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-bottom: 8px;
  }
  
  .main-section-h2 {
    color: #ff6600;
    margin-left: 20px;
  }
  
  .blurbs h3 {
    margin: 0;
    color: #ff6600;
    font-size: 9pt;
    margin-left: 15px;
  }
  
  .blurbs p:nth-of-type(5) {
    margin-bottom: 2em;
  }
  
  .blurbs p {
    margin: 0 10px 15px 15px;
  }
  
  .info {
    color: green;
    font-weight: bold;
  }
  
  .friends header {
    margin-bottom: 6px;
  }
  
  .friends p:nth-of-type(1) {
    margin-top: 0;
    margin-left: 15px;
  }
  
  .focus-highlight {
    color: #cc0000;
    font-weight: normal;
    font-size: 10pt;
  }
  
  .friend-pic-container {
    display: grid;
    grid-template-columns: repeat(4, 109px);
    grid-template-rows: 160px 193px;
  }
  
  .friend-pic-container figure {
    margin: 0;
  }
  
  .friend-pic-container figcaption {
    text-align: center;
  }
  
  .friend-pic-container img {
    display: block;
    margin: auto;
  }
  
  .friends-list-link {
    display: flex;
    justify-content: flex-end;
  }
  
  .friends-list-link {
    margin-top: 7px;
    margin-right: 8px;
    margin-bottom: 30px;
  }
  
  .friends-list-link a {
    color: #cc0000;
  }
  
  .comment-wall .main-section-header {
    margin-bottom: 3px;
  }
  
  .comment-wall .main-section-h2 {
    margin-bottom: 0;
  }
  
  #comment-counter {
    margin-top: 0;
    margin-left: 15px;
    margin-bottom: 3px;
  }
  
  .comment-wall table {
    margin: auto;
    margin-bottom: 5px;
  }
  
  .comment-wall th {
    background-color: rgb(255, 153, 51);
    width: 158px;
    padding: 3px;
    vertical-align: top;
  }
  
  .comment-wall td {
    vertical-align: top;
    background-color: rgb(249, 214, 180);
    width: 269px;
    padding: 3px;
  }
  
  .comment-wall figcaption,
  .comment-wall figure {
    margin: 0;
  }
  
  .comment-wall figcaption {
    margin-bottom: 1em;
  }
  
  .comment-wall figure {
    margin-bottom: 49.33px;
  }
  
  .comment-wall h3 {
    font-size: 10pt;
    margin: 0;
    margin-bottom: 1em;
  }
  
  .comment-wall p {
    font-weight: normal;
    text-align: left;
    margin: 0;
  }
  
  #add-comment {
    text-align: right;
    margin-right: 10px;
    margin-bottom: 5px;
  }
  
  footer {
    display: grid;
    grid-template-rows: 16px 39px;
    background-color: #e5e5e5;
    padding-top: 10px;
    height: 65px;
  }
  
  footer a {
    text-decoration: underline;
    font-weight: normal;
    font-size: 8pt;
  }
  
  footer ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  footer li:after {
    content: " | ";
    font-weight: normal;
  }
  
  #last:after {
    content: none;
  }
  
  footer small {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    font-size: 8pt;
    font-weight: normal;
  }
  
  
  body {
    background: #0e0e0e;
    /*background-image: linear-gradient(
      180deg,
      transparent 50%,
      rgba(255, 113, 167, 0.5) 50%
    );*/
    background-image: url("assets/background.jpg");
    background-size: 100%;
    background-attachment: fixed;
    font-family: sans-serif, helvetica;
    letter-spacing: 1px;
    line-height: 1.5;
  }
  
  .master-container {
    background-color: transparent;
  }
  
  section,
  .profile-picture-container {
    background-color: #1d1d1d;
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .profile-sidebar header {
    background-color: #1d1d1d;
    padding: 1rem 1rem 0;
  }
  
  .profile-sidebar header h1 {
    margin: 0;
  }
  
  .main-header {
    background-color: transparent;
    height: auto;
  }
  
  .main-header a {
    color: #1d1d1d !important;
  }
  
  .navbar {
    background-color: transparent;
    margin-top: 2rem;
  }
  
  .navbar li::after {
    color: #fff;
  }
  
  .footer {
    background-color: transparent;
    margin: 2rem 0;
    padding: 1rem;
  }
  
  .footer a,
  .footer small {
    color: #1d1d1d !important;
  }
  
  footer li:after {
    color: #fff;
  }
  
  .page-content-container {
    margin-top: 2rem;
  }
  
  .user-network {
    margin: 0;
    width: auto;
  }
  
  .blog {
    margin-left: 0;
  }
  
  .contact-box,
  .myspace-url-box {
    border: 0;
    height: auto;
    width: auto;
  }
  
  .contact-box h2,
  .sidebar-table-h2 {
    background-color: transparent;
    color: black;
    padding: 0;
    display: none;
  }
  
  .pics-videos a {
    color: #fff;
    text-decoration: underline;
  }
  
  .sidebar-table {
    border: 0;
  }
  
  .sidebar-table-header,
  .sidebar-table-data {
    color: rgb(255, 255, 255);
    background-color: transparent;
  }
  
  .main-section-header {
    background-color: transparent;
  }
  
  .main-section-h2 {
    display: none;
  }
  
  .blurbs h3 {
    margin: 0;
    color: black;
  }
  
  .blurbs p {
    margin: 10px 0;
  }
  
  .comment-wall th,
  .comment-wall td {
    background-color: transparent;
  }
  
  .comment-wall table {
    margin-top: 1rem;
  }
  
  section a {
    color: #fff !important;
    text-decoration: underline;
  }
  
  .profile-pic {
    margin: 0;
    filter: grayscale(100%);
  }
  
  .profile-pic:hover {
    filter: grayscale(0%);
    cursor: pointer;
  }
  
  .schools {
    display: none;
  }
  
  .profile-sidebar {
    width: 100%;
    margin-left: 0;
  }
  
  .details table {
    margin-bottom: 0px;
  }
  
  .user-network {
    margin-bottom: 1rem;
    border: 0;
  }
  
  .friend-pic-container img,
  .comment-wall img {
    filter: grayscale(100%);
  }
  
  .friend-pic-container img:hover {
    filter: grayscale(0%);
  }
  
  .contact-box {
    background: url("https://i.giphy.com/xUOxeTkU1NgUnC40eY.webp") center center;
    background-size: cover;
    border: 5px solid #1d1d1d;
  }
  .contact-images p {
    color: #1d1d1d;
    font-weight: bold;
    font-size: 12px;
  }
  
  .contact-images p:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  .new-header {
    text-align: center; 
    margin: 20px 0; 
}

.home-button, .home-button:link, .home-button:visited, .home-button:hover, .home-button:active {
    font-size: 24px; 
    color: #ffffff; 
    background-color: transparent; 
    text-decoration: none; 
    display: inline-block; 
    padding: 10px 15px; 
    border-radius: 5px; 
    font-family: 'Poppins', sans-serif; 
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out; 
}


.home-button:hover {
    color: #ffffff; 
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); 
}


.highlighted-text {
  color: #ffaaed; 
  font-weight: bold; 
  font-size: 6px; 
  font-style: italic; 
  text-shadow: 1px 1px 2px #888888; 
  padding: 2px 4px; 
  border-radius: 4px; 
}