:root {
  /* Colours */
  --body-bg: darkgrey;
  --colored-parts-bg: white;
  --sponsored-posts-bg: white;
  --sponsored-posts-hover-bg: lawngreen;
  --heading-spotlight-text-colour: floralwhite;  
  --dp-border-color: rgb(56, 56, 56);
  /* Font sizes */
  --spotlight-heading: 4rem;
  --sponsored-post-link: 2.5rem;
  /* Fonts */
  /* Other sizes */
}

body {
  background-color: var(--body-bg);
}

nav {
  height: 10vh;
}

/* Top portion */
#featuredParent {
  background-size: 100%;
  padding: 0;
}

#featured {
  height: 70vh;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}

#heading {
  height: 50%;
}

#spotlight {
  height: 50%;
}

#spotlight h1 {
  font-size: var(--spotlight-heading);
}

#heading,#spotlight h1 {
  color: var(--heading-spotlight-text-colour);
}

/* Sponsored posts */

.sponsored-posts {
  height: 33.33%;
  background-color: var(--sponsored-posts-bg);
  padding: 5px;
}

.sponsored-posts:hover {
  background-color: var(--sponsored-posts-link-bg);
}

.sponsored-posts a {
  font-size: var(--sponsored-post-link);
}

/* Posts */

.post {
  margin: 2vh 0vh 0vh;
  height: 24vh;
}

.postImage {
  height: 24vh;
  width: 100%;
}

.postDp {
  height: auto;
  width: 80%;
  padding: 0;
  border-radius: 100%;
  border: 3px solid var(--dp-border-color);
}

#nameAndTime {
  margin-top: 0.8rem;
  margin-bottom: 0;
  margin-left: 2%;
}

#portfolio, #footer, .post {
  background-color: var(--colored-parts-bg);
}

/* Article CSS */

#authorNtime {
  background-color: var(--colored-parts-bg);
}

.faceAndSocialLinks{
  width: 12%;
}

#portfolioPreviewDp{
  margin-top: 15px;
  margin-left: 15px;
}

/* Side bar */

#instaCarousel {
  display: inline;
  position: fixed;
  margin-top: 1vh;
}

/* Admin Panel Posts management page */

.adminPostImg {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.postPreviewItem {
  background-color: aliceblue;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
}

/* Compose page */

.composeInstaImg{
  height: 100px;
  width: auto;
}

/* Footer */

#footer {
  margin: 0;
  max-width: 100%;
}

@media only screen and (max-width: 500px) {
  :root{ --spotlight-heading: 2rem; }
  nav { height: unset; }
  #PostListContainer{padding-right: 10px;}
  .post{height: 60vh;}
  .postImage{height: 30vh;}
  .sponsoredPostContainer{display: none;}
  #heading {height: 25%;}
  #featured{height: 40vh;}
  #topDP{width: 160%;}
  #portfolioPreviewDp{margin-top: 2px; margin-left: 0;}
}