/* ============================= */
/* ===== VARIABLES & SETUP ===== */
/* ============================= */

:root {
   --white: #fff;
   --black: #0A0A0A;
   --almost-black: #191919;
   --grey-primary: #B4B4B4;
   --grey-brigter: #C0C0C0;
   --grey-darker: #808080;
   --grey-more-darker: #656565;
   --grey-ultra-dark: #3B3B3B;
   --navy-blue: #06157F;
   --wallpaper: #008081;
}


.website-wrapper {
   height: calc(100vh - 53px);
   margin-top: 0;
   padding-top: 50px;
   padding-bottom: 100px;
   overflow-x: hidden;
}




/* =================== */
/* ===== TWITTER ===== */
/* =================== */

.desktop {
   background: var(--black);
}

.content-container-twitter {
   grid-template-columns: 1fr;
   gap: 0px;
   width: clamp(300px, 75%, 700px);
   background-color: var(--black);
   position: relative;
}
.elem-before {
   position: absolute;
   height: 100%;
   top: 0;
   width: clamp(300px, 75%, 700px);
   z-index: 0;
   background-color: var(--black);
   box-shadow: inset 0px 0px 0px 0px var(--grey-ultra-dark), -1px 0px 0px 0px var(--grey-ultra-dark), inset -1px 0px 0px 0px var(--almost-black), inset -2px 0px 0px 0px var(--grey-more-darker);
}

.twitter-post {
   background-color: var(--black);
   width: 100%;
   color: var(--white);
   padding: 25px;
   box-shadow: inset 0 0 0px 1px var(--grey-ultra-dark), inset -2px -2px 0px 0px var(--grey-more-darker), inset 2px 2px 0px 0px var(--almost-black);
   box-shadow: inset -1px 0px 0px 0px var(--grey-ultra-dark), -1px -1px 0px 0px var(--grey-ultra-dark), inset -2px 1px 0px 0px var(--grey-more-darker), inset 0px 2px 0px 0px var(--almost-black);
}

/* Topbar */
.twitter-post-topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.twitter-profile-img {
   height: clamp(50px, 8vw, 70px);
   color: var(--white);
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1.25em;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   transform: translateX(-10px);   
}
.twitter-profile-img img {
   display: block;
   width: clamp(50px, 8vw, 70px);
   height: 100%;
   aspect-ratio: 1/1;
   -webkit-aspect-ratio: 1/1;
   object-fit: cover;
   object-position: top;
   color: var(--white);
   border-radius: 50%;
   overflow: hidden;
   border: 1px solid var(--grey-more-darker);
}
.twitter-description {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin: 15px 0 25px;
   transform: translateX(-10px);
}

.twitter-more-dots {
   width: 20px;
}
.twitter-post-img {
   display: block;
   width: 95%;
   /* max-width: 500px; */
   margin: 20px auto;
   aspect-ratio: 1/1.05;
   -webkit-aspect-ratio: 1/1.05;
   border-radius: 15px;  
   overflow: hidden;
   color: var(--white);
   border: 1px solid var(--grey-more-darker);
}
.twitter-post-img img {
   display: block;
   width: 100%;
   aspect-ratio: 1/1.05;
   object-fit: cover;
   object-position: top;
}

.twitter-post-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 95%;
   /* max-width: 500px; */
   margin: 30px auto 0;
}
.twitter-footer-col {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   font-size: 1.25em;
}
.twitter-footer-col img {
   width: 40px;
}








/* --------=======================-------- */
/* -----======= MOBILE STYLES =======----- */
/* --------=======================-------- */


@media(max-width: 1250px) {

   /* =================== */
   /* ===== TWITTER ===== */
   /* =================== */

   .content-container-twitter, .elem-before {
      width: clamp(300px, 65%, 650px);
   }
   .twitter-post-img, .twitter-post-footer {
      width: 95%;
      max-width: unset;
   }

}


@media(max-width: 950px) {

   .website-wrapper {
      margin-top: 90px;
      padding-top: 0px;
   }
   
   .elem-before {
      display: none;
   }

   .twitter-post {
      box-shadow: inset 0px -1px 0px 0px var(--grey-ultra-dark), inset 0px -2px 0px 0px var(--grey-more-darker), inset 0px 0px 0px 0px var(--almost-black);
   }
   .twitter-post:last-child {
      box-shadow: none;
   }


   /* =================== */
   /* ===== TWITTER ===== */
   /* =================== */

   .twitter-footer-col {
      gap: 8px;
      font-size: 1.25em;
  }
   .twitter-footer-col img {
      width: 30px;
  }

}


@media(max-width: 700px) {

   /* =================== */
   /* ===== TWITTER ===== */
   /* =================== */

   .elem-before {
      display: none;
   }

   .content-container-twitter, .elem-before {
      width: clamp(300px, 97.5%, 575px);
   }
   .twitter-post-img, .twitter-post-footer {
      width: 95%;
   }
   .twitter-post-footer {
      margin: 15px auto 0;
   }
   .twitter-post {
      padding-bottom: 15px;
   }

}