:root {  --color-primary:#6f6af8;  --color-primary-light:hsl(242, 91%, 69%, 18%);  --color-primary-variant:#5854c7;  --color-red:#da0f3f;  --color-red-light:hsl(346, 87%, 46%, 15%);  --color-green:#00c476;  --color-green-light:hsl(156, 100%, 38%, 15%);  --color-gray-900:#1e1e66;  --color-gray-700:#2d2b7c;  --color-gray-300:rgba(242, 242, 254, 0.3);  --color-gray-200:rgba(242, 242, 254, 0.7);  --color-white:#f2f2fe;  --color-bg:#0f0f3e;  --transition:all 300ms ease;  --container-width-lg:74%;  --container-width-md:88%;  --form-width:40%;  --card-border-radius-1:0.3rem;  --card-border-radius-2:0.5rem;  --card-border-radius-3:0.8rem;  --card-border-radius-4:2rem;  --card-border-radius-5:5rem; }  * {  margin:0;  padding:0;  outline:0;  border:0;  appearance:0;  list-style:none;  text-decoration:none;  box-sizing:border-box; } body {  font-family:"Montserrat", sans-serif;  line-height:1.6;  color:var(--color-gray-200);  overflow-x:hidden;  background:var(--color-bg);  font-size:0.9rem; } .container {  width:var(--container-width-lg);  max-width:1800px;  margin-inline:auto; } section {  margin-top:3rem;  width:100vw; } h1, h2, h3, h4, h5 {  color:var(--color-white);  line-height:1.3; }  .section__extra-margin {  margin-top:7rem; } h1 {  font-size:3rem;  margin:1rem 0; } h2 {  font-size:1.7rem;  margin:1rem 0; } h3 {  font-size:1.1rem;  margin:0.8rem 0 0.5rem; } h4 {  font-style:1rem; } a {  color:var(--color-white); } img {  display:block;  width:100%;  object-fit:cover;  height:100%; }   nav {  background:var(--color-primary);  width:100vw;  height:4.5rem;  position:fixed;  top:0;  z-index:10;  box-shadow:0 1rem 1rem rgba(0, 0, 0, 0.2); } nav button {  display:none; } .nav__container {  height:100%;  display:flex;  align-items:center;  justify-content:space-between; } .avatar {  width:2.5rem;   height:2.5rem;  border-radius:50%;  overflow:hidden;  border:0.3rem solid var(--color-bg); } .nav__logo {  font-weight:600;  font-size:1.2rem; } .nav__items {  display:flex;  align-items:center;  gap:4rem; } .nav__profile {  position:relative;  cursor:pointer; } .nav__profile ul {  position:absolute;  top:140%;  right:0;  display:flex;  flex-direction:column;  box-shadow:0 3rem 3rem rgba(0, 0, 0, 0.4);  visibility:hidden;  opacity:0;  transition:var(--transition); }  .nav__profile:hover>ul {  visibility:visible;  opacity:1; } .nav__profile ul li a {  padding:1rem;  display:block;  width:100%;  background:var(--color-gray-900); } .nav__profile ul li:last-child a {  background:var(--color-red);  color:var(--color-bg); }   .category__button {  background:var(--color-primary-light);  color:var(--color-primary);  display:inline-block;  padding:0.5rem 1rem;  border-radius:var(--card-border-radius-2);  font-weight:600;  font-size:0.8rem;  text-align:center; } .post__thumbnail {  border-radius:var(--card-border-radius-5) 0;  border:1rem solid var(--color-gray-900);  overflow:hidden;  margin-bottom:1.6rem; } .post:hover .post__thumbnail img {  filter:saturate(0);  transition:filter 500ms ease; } .post__author {  display:flex;  gap:1rem;  margin-top:1.2rem; } .post__author-avatar {  width:2.5rem;  height:2.5rem;  border-radius:var(--card-border-radius-3);  overflow:hidden; } .post__body {  word-wrap:break-word;  word-break:break-word;  overflow-wrap:break-word; }   .featured {  margin-top:8rem; } .featured__container {  display:grid;  grid-template-columns:1fr 1fr;  gap:4rem; } .featured .post__thumbnail {  height:fit-content; }   .posts__container {  display:grid;  grid-template-columns:repeat(3, 1fr);  gap:4rem;  margin-bottom:4rem; }   .category__buttons {  padding:4rem 0;  border-top:2px solid var(--color-gray-900);  border-bottom:2px solid var(--color-gray-900); } .category__buttons-container {  width:fit-content;  display:grid;  grid-template-columns:repeat(3, 1fr);  gap:1rem; }   footer {  background:var(--color-gray-900);  padding:5rem 0 0;  box-shadow:inset 0 1.5rem 1.5rem rgba(0, 0, 0, 0.2); } .footer__socials {  margin-inline:auto;  width:fit-content;  margin-bottom:5rem;  display:flex;  justify-content:space-between;  align-items:center;  gap:1.2rem; } .footer__socials a {  background:var(--color-bg);  border-radius:50%;  height:2.3rem;  width:2.3rem;  display:flex;  align-items:center;  justify-content:center;  font-size:1.1rem; } .uil-github {  font-size:1.3rem; } .footer__socials a:hover {  background:var(--color-white);  color:var(--color-bg); } .footer__container {  display:grid;  grid-template-columns:repeat(4, 1fr); } footer li {  padding:0.4rem 0; } footer h4 {  color:var(--color-white);  margin-bottom:0.6rem; } footer ul a {  opacity:0.75; } footer ul a:hover {  letter-spacing:0.1rem;  opacity:1;  transition:var(--transition); } .footer__copyright {  text-align:center;  padding:1.5rem 0;  border-top:2px solid var(--color-bg);  margin-top:4rem; }   .search__bar {  margin-top:7rem; } .search__bar-container {  position:relative;  width:30rem;  background:var(--color-gray-900);  display:flex;  flex-direction:row;  align-items:center;  justify-content:space-between;  overflow:hidden;  padding:0.6rem 1rem;  border-radius:var(--card-border-radius-2);  color:var(--color-gray-300); } .search__bar-container > div {  width:100%;  display:flex;  align-items:center; } .search__bar input {  background:transparent;  margin-left:0.7rem;  padding:0.5rem 0;  width:100%;  color:var(--color-white); } .search__bar input::placeholder {  color:var(--color-gray-200); }  .btn {  display:inline-block;  width:fit-content;  padding:0.6rem 1.2rem;  background-color:var(--color-primary);  border-radius:var(--card-border-radius-2);  cursor:pointer;  transition:var(--transition);  color:var(--color-white); } .btn.sm {  padding:0.3rem;  font-size:0.8rem; } .btn.danger {  background-color:red; } .btn:hover {  background:var(--color-white);  color:var(--color-bg); }   .dashboard {  margin-top:6rem;  padding:2rem; } .sidebar__toggle {  display:none; } .dashboard__container {  display:grid;  grid-template-columns:14rem auto;  gap:2rem;  background:var(--color-gray-900);  padding:2rem;  margin-bottom:5rem;  border-radius:2rem; } .dashboard aside a {  color:var(--color-white);  background:var(--color-primary);  display:flex;  gap:1rem;  align-items:center;  padding:1.6rem; } .dashboard aside ul li:not(:last-child) a {  border-bottom:1px solid var(--color-gray-700); } .dashboard aside a:hover {  background:var(--color-gray-700); } .dashboard aside a.active {  background-color:var(--color-gray-700); } .dashboard aside ul li:not(:last-child):not(:first-child) a {  border-bottom:1px solid var(--color-gray-700); } .dashboard aside ul li:first-child a {  border-top-left-radius:10px;  border-top-right-radius:10px; } .dashboard main table th:first-child {  border-top-left-radius:10px; } .dashboard main table th:last-child {  border-top-right-radius:10px; } .dashboard aside ul li:last-child a {  border-bottom-left-radius:10px;  border-bottom-right-radius:10px; } .dashboard main {  margin-left:1.5rem; } .dashboard main h2 {  margin:0 0 2rem 0;  line-height:1; } .dashboard main table {  width:100%;  text-align:left; } .dashboard main table th {  background:var(--color-gray-700);  padding:0.8rem;  color:var(--color-white); } .dashboard main table td {  padding:0.8rem;  border-bottom:1px solid var(--color-gray-200); } .dashboard main table tr:hover {  background-color:var(--color-bg);  color:var(--color-white);  cursor:default;  transition:var(--transition); }   .singlepost {  margin:6rem 0 2rem;  display:flex;  flex-direction:column;  align-items:center; } .singlepost__container {  width:45%;  background:var(--color-gray-900);  padding:3rem 4rem;  box-shadow:0 0 20px rgba(0, 0, 0, 0.3);  border-radius:var(--card-border-radius-4); } .singlepost__container h2 {  margin-top:0;  font-size:2.5rem;  font-weight:bold;  color:var(--color-primary);  text-align:center; } .singlepost__author {  display:flex;  flex-direction:column;  align-items:center;  margin-bottom:2rem; } .post__author-info h5 {  margin:0.5rem 0;  font-size:1rem;  font-weight:600;  color:var(--color-gray-500); } .post__author-info small {  font-size:0.9rem;  color:var(--color-gray-500);  text-align:center; } .singlepost__thumbnail img {  max-width:100%;  height:auto;  border-radius:var(--card-border-radius-4);  box-shadow:0 0 10px rgba(0, 0, 0, 0.2);  margin:2rem 0; } .singlepost__container p {  margin-top:1rem;  line-height:1.8;  font-size:1.1rem;  color:var(--color-gray-100);  text-align:justify; } .category__title {  height:11rem;  margin-top:4.5rem;  background:var(--color-gray-900);  display:grid;  place-items:center; }   .empty__page {  height:70vh;  text-align:center;  display:grid;  place-content:center; }   .form__section {  display:grid;  place-items:center;  height:100vh;  margin:5rem 0; } .form__section-container {  width:var(--form-width); } .alert__message {  padding:0.8rem 1.4rem;  margin-bottom:1rem;  border-radius:var(--card-border-radius-2); } .alert__message.error {  background:var(--color-red-light);  color:var(--color-red); } .alert__message.success {  background:var(--color-green-light);  color:var(--color-green); } .alert__message.lg {  text-align:center; } form {  display:flex;  flex-direction:column;  gap:1rem; } .form__control {  display:flex;  flex-direction:column;  gap:0.6rem; } .form__control.inline {  flex-direction:row;  align-items:center; } .form__section small {  margin-top:1rem;  display:block; } .form__section small a {  color:var(--color-primary); }   input, textarea, select {  padding:0.8rem 1.4rem;  background-color:var(--color-gray-900);  border-radius:var(--card-border-radius-2);  resize:none;  color:var(--color-white); }   @media screen and (max-width:1024px) { .container {   width:var(--container-width-md);  }  h2 {   font-size:1.6rem;  }  h3 {   font-size:1.2rem;  }  h5 {   font-size:0.8rem;  }   nav button {   display:inline-block;   font-size:1.5rem;   background:transparent;   color:var(--color-white);   cursor:pointer;  }  nav button#close__nav-btn {   display:none;  }  .nav__container {   position:relative;  }  .nav__items {   display:none;   position:absolute;   flex-direction:column;   top:100%;   right:0;   width:12rem;   align-items:flex-start;   justify-content:center;   gap:0;  }  .nav__items li {   width:100%;   height:4.5rem;   display:flex;   align-items:center;   box-shadow:-2rem 3rem 7rem rgba(0, 0, 0, 0.7);   background:var(--color-gray-900);   border-top:1px solid var(--color-bg);   opacity:0;   animation:animateDropdown 400ms 0s ease forwards;   transform-origin:top;  }  .nav__items li:nth-child(2) {   animation-delay:150ms;  }  .nav__items li:nth-child(3) {   animation-delay:250ms;  }  .nav__items li:nth-child(4) {   animation-delay:350ms;  }  .nav__items li:nth-child(5) {   animation-delay:450ms;  }  .nav__items li:nth-child(6) {   animation-delay:550ms;  } @keyframes animateDropdown {   0% { transform:rotateX(90deg);   }   100% { transform:rotateX(0deg); opacity:1;   }  }  .nav__items a {   border-radius:0;   width:100%;   height:100%;   background:var(--color-gray-900);   padding:0 2rem;   display:flex;   align-items:center;  }  .nav__profile {   background:var(--color-gray-900);  }  .nav__profile ul {   top:100%;   width:100%;  }  .nav__profile ul li a {   padding:0 2rem;   display:block;   width:100%;   text-align:left;   align-self:center;   display:flex;  }  .nav__profile .avatar {   margin-left:2rem;  }  .featured__container {   gap:3rem;  }  .posts__container {   grid-template-columns:1fr 1fr;   gap:3rem;  }  .footer__container {   grid-template-columns:1fr 1fr;  } .search__bar-container {   width:60%;  }   .form__section-container {   padding:3rem;  }  .dashboard__container {   grid-template-columns:4.5rem auto;  }  .dashboard aside {}  .dashboard aside h5 {   display:none;  }  .dashboard main table thead {   display:none;  }  .dashboard main table tr {   display:flex;   flex-direction:column;  }  .dashboard main table tr:nth-child(even) {   background:var(--color-gray-900);  }  .dashboard main table tr:hover td {   background:transparent;  } .sidebar__toggle {   display:none;  }   }  @media screen and (max-width:600px) {  section {   margin-top:2rem;  }  h1 {   font-size:2rem;  }  .featured {   margin-top:6rem;  }  .featured__container {   grid-template-columns:1fr;   gap:0;  }  .posts__container {   grid-template-columns:1fr;  }  .category__buttons-container {   grid-template-columns:1fr 1fr;  }  .footer__container {   grid-template-columns:1fr;   text-align:center;   gap:2rem;  } .search__bar-container {   width:var(--container-width-md);  }   .singlepost__container {   background-color:transparent;   padding:0;  }   .form__section-container {   padding:0;  }  .form__section form a {   padding-bottom:2rem;  }   .dashboard {   margin-top:5rem;  }  .dashboard__container {   grid-template-columns:1fr;   gap:0;  }  .dashboard main {   margin:0;  }  .dashboard main h2 {   margin-top:1rem;  }  .dashboard aside {   position:fixed;   box-shadow:2rem 0 4rem rgba(0, 0, 0, 0.4);   left:0;   z-index:2;   height:100vh;   transition:var(--transition);   background:var(--color-primary);  }  .singlepost__container {   box-shadow:none;  }  .dashboard .sidebar__toggle {   display:inline-block;   background:var(--color-primary-variant);   color:var(--color-white);   position:fixed;   right:0;   bottom:4rem;   z-index:1;   width:2.5rem;   height:2.5rem;   border-radius:50% 0 0 50%;   font-size:1.3rem;   cursor:pointer;   box-shadow:-1rem 0 2rem rgba(0, 0, 0, 0.4);  }  .dashboard aside a h5 {   display:inline-block;  }  #hide_sidebar-btn {   display:none;  }   }