:root{
  /*COLOR PALETTE*/
  --darkblue: #0d0826;
  --medblue: #171038;
  --linkcolor:#ff0076;
  --babyblue:#abb2ce;
  --brightblue:#241d5e;
  /* -------------------- */
}


.projects {
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-self: center;
  flex-wrap:wrap;
  width: fit-content;
  height: fit-content;
  padding: 2rem;

  margin-top: 2rem;
  border-radius: 20px;
  background-color: rgb(23 16 56);
}

.project-container {
  display: flex;
  flex-direction: column;
  background-color: var(--brightblue);
  border-radius: 10px;
  box-shadow: 7px 7px var(--darkblue);
  margin:20px;
  height: fit-content;
  width: 300px;
  transition: 0.1s ease;
}
.project-container:hover{
  background-color: #242875;
  scale: 1.025;
}

.project-text-container{
  margin-bottom: 10px;
}
.project-text-container > p {
  margin-left: 10px;
  margin-right: 10px;
}

.project-title {
  font-family: "Sora", sans-serif;
  font-weight: bold;
}

.thumbnail-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.thumbnail-container:hover {
  scale: 1.1;
}

.thumbnail, .thumbnail-video{
  border-radius: 10px;
  height: 100%;
  width: 100%;
  justify-content: center;
  transition: opacity 0.5s ease;

  top:0;
  left:0;
  object-fit: cover;
}

.thumbnail-video{
  position: absolute;
  opacity: 0;
}

.thumbnail-container:hover .thumbnail-video{
  opacity: 1;
}

.project-container:hover .thumbnail-video{
  opacity: 1;
}




.button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;

  margin-top: auto;
}

button.project-link  {
  font-family: "Maven Pro", sans-serif;
  font-weight: bold;
  color: var(--babyblue);
  background-color: transparent;
  border: 1px solid var(--babyblue);
  border-bottom: 0;
  padding: 10px;
  border-radius: 0;
  margin: 0;
  width: 100%;
  box-shadow: 3px 3px var(--darkblue);

  transition: background-color 0.4s ease;
}
button.project-link:hover{
  background-color: var(--linkcolor);
  color: white;
  cursor: pointer;
}
.button-container > :first-child > button {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.button-container > :last-child > button {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid var(--babyblue);
}