* { box-sizing: border-box; } .profile-pictures { width: 50px; height: 50px; border-radius: 50%; } .profile-pictures-header { width: 75px; height: 75px; border-radius: 50%;} body { scroll-behavior: smooth; margin: 0; font-family: Arial, sans-serif; background-color: #FAFBFF; } a{ text-decoration: none; color: black; } ul{ list-style: none; padding: 0; } .profile-name-header{ display: flex; align-items: center; justify-content: center; margin-top: 20px; } .profile-name-header h1{ margin: 0; padding-left: 15px; padding-right: 15px; } .icons{ list-style: none; padding: 0 20px 0 20px; } .icons a img { height: 25px; } .icons img{ height: 25px; } .icons a { align-items: center; width: 100%; padding: 10px; display: flex; flex-direction: row; gap: 20px; border-radius: 20px; font-size: 19px; transition: all 0.3s ease, transform 0.3s ease; } .like-button { width: 30px; height: 30px; border: none; background-size: cover; background-position: center; background-color: white; border-radius: 50%; cursor: pointer; transition: transform 0.2s ease; } .like-button.unlike { background-image: url('icons/unlike_heart.svg'); } .like-button.liked { background-image: url('icons/full_heart.svg'); } .like-button:hover { transform: scale(1.1); } .like-button:active { transform: scale(0.9); } .delete-post{ width: 30px; height: 30px; border: none; background-size: cover; background-position: center; background-color: white; border-radius: 50%; cursor: pointer; transition: transform 0.2s ease; background-image: url("icons/delete.svg"); } .delete-post:hover { transform: scale(1.1); } .delete-post:active { transform: scale(0.9); } .post-nav{ display: flex; justify-content: space-between; } .post-footer{ display: flex; flex-direction: row; } .post-footer button{ margin-right: 5px; margin-left: 5px; } .user-card{ list-style: none; padding: 0 20px 0 20px; } .user-card a{ align-items: center; width: 100%; padding: 10px; display: flex; flex-direction: row; gap: 20px; border-radius: 20px; font-size: 19px; transition: all 0.3s ease, transform 0.3s ease; } .navigation-body ul li a:hover{ background-color: rgba(18, 137, 255, 0.35); } .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; flex-direction: row; height: auto; } .post-formular-body, .post, .posts-body, .all-posts-body, .profile-header, .navigation-body{ background-color: #FFFFFF; border: solid 1px #ECF0F5; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25); width: 100%; border-radius: 20px; margin-bottom: 30px; } .container { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; } .post-pics{ height: auto; width: 90%; max-width: 400px; margin: 5px; padding: 5px; } .post{ padding: 20px; } .post-header { display: flex; flex-direction: row; } .post-header img{ margin-right: 10px; } [class*="col-"] { padding: 15px; box-sizing: border-box; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; } @media (max-width: 768px) { .container { grid-template-columns: repeat(6, 1fr); } .col-3 { grid-column: span 12; } .col-9 { grid-column: span 12; } } @media (max-width: 456px) { .container { grid-template-columns: repeat(6, 1fr); } .col-3 { grid-column: span 12; } .col-9 { grid-column: span 12; } }