:root {
  --background-color: #141414;
  --primary-color: #003b00;
  --secondary-color: #00ff41;
  --grey: #333333;
  --button-color: #008f11;
}


body {
  background: var(--background-color);
  margin: 0px;
}

button {
  background-color: var(--button-color);
}

.field {
  margin-bottom: 20px;
}

section {
  margin-bottom: 20px;
}

ul {
  list-style-type: none;
}

navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
}

.nav-container {
  display: flex;
  gap: 20px;
  align-items: center;
}

.notification-icon {
  width: 50px;
  height: 50px;
  fill: var(--secondary-color);
  cursor: pointer;
}

#user_posts {
  display:flex;
  justify-content: center;
}

#user_info {
  display:flex;
  justify-content: center;
}

#new-post {
  display: flex;
  justify-content: center;
}

.post-box {
  width: clamp(20vw, 500px, 80vw);
  height: 100px;
}

.follows-link {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

#posts {
  display:flex;
  justify-content: center;
}

.post-buttons-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.return-button {
  width: clamp(10vw, 75px, 15vw);
}

.hidden-field {
  display: none;
}

.upload-button {
  background-color: blue;
}

.image-collection {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 5px;
}

.img-card {
  border-radius: 10px;
  overflow: hidden;
}

.field {
  padding: 5px;
}

.btn {
  color: white;
  padding: 5px;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
  border: none;
  font-size: .75rem;
}

.submit {
  background-color: red;
}

.wrap {
  flex-wrap:wrap;
}

.comment {
  padding: 5px 0px;
  border-bottom: 1px solid gray;
}

.profile-background-container {
  width: clamp(75%, 1200px, 100%);
  height: clamp(30vh, 450px, 50vh);
  position: relative;
}

.profile-nav-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}

.profile-hero {
  display: flex;
  justify-content: center;
}


.profile-avatar-preview {
  width: clamp(2vh, 50px, 6vh);
  height: clamp(2vh, 50px, 6vh);
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0px 0px 3px black;
}

.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.profile-avatar-container {
  width: clamp(10vw, 150px, 20vw);
  height: clamp(10vw, 150px, 20vw);
  position: absolute;
  bottom: 5px;
  left: 5px;
  box-shadow: 2px 2px 10px black;
  border-radius: 50%;
  overflow: hidden;
}

.card {
  border-radius: 3px;
  box-shadow: 0px 0px 10px var(--button-color);
  padding: 10px;
  background-color: var(--grey);
  border: 2px solid var(--button-color);
  color: white;
  margin-bottom: 20px;
}

.comment {
  display: flex;
  justify-content: space-between;
}

.flex-container {
  display: flex;
  align-items: start;
  gap: 10px;
}

.center-x {
  justify-content: center;
}

.title, a {
  color: var(--secondary-color);
  text-decoration: none;
}

.blue {
  background-color: blue;
}

.list-section {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 800px;
}

#logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  margin: 0px 0px 50px 0px;
}

.logo-title {
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 3rem;
  margin-top: 0px;
  text-shadow: 0px 0px 3px var(--secondary-color);
}

.logo-image {
  width: clamp(20vw, 500px, 70vw);
}
#devise-section {
  display: flex;
  justify-content: center;
}

.follows-container {
  width: clamp(30vw, 400px, 90vw);
}