/* The Screen (background) */
.screen {
  /* display: none; Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 2em; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(83, 83, 83, 0.6); /* Black w/ opacity */
  animation: simpleFadeIn .5s;
}

/* Screen Content */
.screen-content {
  background-color: #232323;
  margin: auto;
  padding: 20px;
  border: 2px solid #2e2e2e;
  width: 80%;
  animation: fadeInContent 1s;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Adds a class to the elements to fade out */
.screen-content-with-anim {
  animation: fadeOutContent 1s;
}
.screen-with-anim {
  animation: simpleFadeOut 1s;
}

@keyframes fadeInContent {
  0% { opacity: 0; transform: translateY(-10em); }
  100% { opacity: 1; transform: translateY(0);}
}
@keyframes fadeOutContent {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform:translateY(-10em) }
}
@keyframes simpleFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes simpleFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}



.screen-content img.header {
    width: 75%;
    margin: 10px auto;
    filter: hue-rotate();
}

.screen-content img.preview {
  width: 40%;
  margin: 2em 10px 1em 10px;
  /* Top - Right - Bottom - Left */
  border: 2px solid black;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

.project-data {
  padding: 5px 20px;
  margin-left: 10px;
  background: #303032;
  border-radius: 20px;
  transition: all .3s ease 0s;
  width: fit-content;
}