.main-flight-container, .main-journey-container, .main-friend-container {
  display: flex;
  flex-direction: row;
  gap: 5em;
  background-color: var(--clr-background-100)
}

.main-new-flight-container {
  display: flex;
  flex-direction: row;
  gap: 5em;
  background-color: var(--clr-background-100);
  height: 100vh;
}

input, select, textarea {
  border-radius: 8px;
}

input::placeholder {
  padding-left: .3em;
}

.lading-page-btns {
  border: none;
  background: none;
  font-size: var(--fs-900);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--clr-neutral-100);
}

.lading-page-btns:hover {
  color: var(--clr-accent-400);
}

.flight-list, .journey-list {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  height: 100vh;
  align-items: center;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  background-color: var(--clr-accent-100);
  overflow-y: scroll;
}

.flight-card, .friend-flight-card {
  display: flex;
  flex-direction: column;
  width: 28em;
  height: 9em;
  padding: 1em;
  border-radius: 5px;
  border: 1px solid var(--clr-primary-400);
  align-items: stretch;
  justify-content: space-around;
  margin: .5em 0;
  background-color: var(--clr-neutral-100);
  box-shadow: rgba(5, 217, 255, 0.24) 0px 3px 8px;
}


.flight-card:hover, .journey-card:hover {
  cursor: pointer;
  background-color: lightblue;
}

.flight-card-content {
  display: flex;
  flex-direction: row;
  height: 8em;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: var(--clr-neutral-900);
}



.flight-card-left {
  display: flex;
  flex-direction: column;
  width: 10em;
  align-items: flex-end;
  justify-content: center;
  padding-right: 1em;
}

.flight-card-mid {
  display: flex;
  flex-direction: column;
  width: 10em;
  align-items: center;
  justify-content: center;
  border-left: 4px solid #000;
}

.card-arrow-right {
  height: 100%;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-arrow-right > img {
  content: url("/assets/arrow-card.png");
  height: 20%;
  margin: 0;
}

.flight-card-right {
  display: flex;
  flex-direction: column;
  width: 10em;
  align-items: center;
  justify-content: center;
  padding-right: 1em;
}

.flight-card-date {
  font-size: var(--fs-650);
  display: flex;
  font-weight: bold;
  flex-wrap: nowrap;
}

.flight-card-logo {
  text-align: end;
}

.flight-card-terminal {
  font-size: var(--fs-700);
}

.flight-card-link {
  text-decoration: none;
}


#new-flight {
  display: flex;
  flex-direction: column;
}


.show-flight {
  display: flex;
  flex-direction: column;
}

h1 {
  color: var(--clr-neutral-900);
  font-size: var(--fs-900);
  align-content: left;
}


.flight-list-header {
  display: flex;
  width: 28em;
  align-items: center;
  justify-content: space-around;
}


/* ! Flight Details Box */

.flight-detail-container {
  height: 25em;
  width: 25em;
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(5, 217, 255, 0.1) 0px 20px 25px -5px, rgba(5, 217, 255, 0.04) 0px 10px 10px -5px;
  margin-bottom: 2.5em;
  padding: 1em;
  position: relative;
}

.select-flight-to-view-more {
  font-size: var(--fs-700);
  justify-content: center;
  align-items: center;
  padding: 1.5em;
  z-index: 4;
}

.flight-detail-bottom, .flight-detail-mid, .flight-detail-top {
  width: 100%;
  padding: .4em;

}

.flight-detail-edit-btn {
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: flex-end;
  align-items: flex-start;
}

.flight-detail-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flight-detail-airline {
  display: flex;
  width: 20%;
  text-align: right;
}

.flight-detail-mid {
  display: flex;
  gap: 1.5em;
  flex-direction: row;
  padding-bottom: 1em;
  justify-content: center;
}

.arrow-div {
  height: 100%;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow-div > img {
  content: url("/assets/Arrow_right.png");
  height: 50%;
  margin: 0;
}

.flight-detail-airport-code {
  font-size: var(--fs-800);
}

.flight-detail-terminal {
  font-size: var(--fs-300);
}

.flight-detail-mid-departure, .flight-detail-mid-arrival{
  display: flex;
  flex-direction: column;
  margin: 0;
  justify-content: center;
  align-items: center;
}




.flight-detail-bottom {
  display: flex;
  justify-content: space-around;
  gap: 25px;
  text-align: center;
}

.flight-detail-bottom-elements {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 5em;
}

.flight-detail-bottom-bold {
  font-weight: bold;
}

.big-date {
  font-size: 5em;
  width: 75%;
  padding: .3em 0 .2em 0;
  z-index: 2;
}


/* ! New Flight */

#new-flight {
  color: black;
}



/*! buttons */

.back {
  font-size: var(--fs-300);
  text-decoration: none;
}

.log-out-btn {
  width: 2em;
  height: 2em;
  border: none;
  background: none;
}

.log-out-btn:hover {
  content: url("/assets/log-out-hover.png");
  cursor: pointer;
}

.edit-btn {
  width: 2em;
  height: 2em;
  border: none;
  background: none;
}

.edit-btn > img:hover {
  content: url("/assets/edit-hover.png");
  cursor: pointer;
}


  .back-btn {
  width: 2em;
  height: 2em;
  border: none;
  background: none;
}

.back-btn > img:hover {
  content: url("/assets/left-arrow-hover.png");
  cursor: pointer;
}

.edit-btn-detials {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.delete-btn {
  width: 1.8em;
  height: 2em;
  border: none;
  background: none;
}
.delete-btn:hover {
  content: url("/assets/trash-hover.png");
  cursor: pointer;
}

.add-btn {
  width: 2em;
  height: 2em;
  border: none;
  background: none;
  border-radius: 35%;
}
.add-btn:hover {
    content: url("/assets/add-btn-hover.png");
    cursor: pointer;
}

.landing-btn {
  text-decoration: none;
  height: 100%;
  width: 100%;
}

.landing-btn:hover {
  text-decoration: underline;
  color: var(--clr-primary-400);
}

.log-in-bg-img {
  background-image: url(/assets/log-in-img-color.jpg);
  width: 100%;
  height: 100%;
  background-size: cover;
  display: flex;
  /* position: absolute; */
  justify-content: center;
  align-items: center;
}

.please-log-in {
  position: absolute;
  color: whitesmoke;
  padding-top: 60px;
  padding-left: 450px;
}

.flights-bg-img {
  background-image: url(/assets/flight_photo_1.jpeg), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
  background-blend-mode: overlay;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: 70%;
}

.flights-bg-img:hover {
  background-image: url(/assets/flight_photo_1.jpeg), linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.0));
  background-blend-mode: overlay;
}

.friends-bg-img {
  background-image: url(/assets/flight_photo_2.jpeg), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
  background-blend-mode: overlay;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: 48%;
}

.friends-bg-img:hover {
  background-image: url(/assets/flight_photo_2.jpeg), linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.0));
  background-blend-mode: overlay;
}

.journey-bg-img {
  background-image: url(/assets/flight_photo_3.png), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
  background-blend-mode: overlay;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: 70%;
}

.journey-bg-img:hover {
  background-image: url(/assets/flight_photo_3.png), linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.0));
  background-blend-mode: overlay;
}


/* ! Friends */

.friend-name-header {
  padding-left: .2em;
  text-align: center;
}

.friend-list-header, .journey-header {
  display: flex;
  width: 28em;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}

.new-friend-card {
  background-color: var(--clr-neutral-100);
  box-shadow: rgba(5, 217, 255, 0.24) 0px 3px 8px;
  border-radius: 15px;
  margin: 1em;
  padding: 1em 1em;
  color: black;
  margin-bottom: 25em;
}

.friend-code{
  text-align: center;
  font-size: var(--fs-800);
  width: 100%;
  border: 2px solid var(--clr-accent-400);
  background-color: var(--clr-background-100);
}

.friend-list {
  color: black;
}
.friend-card-link {
  text-decoration: none;
  display: flex;
  gap: 1em;
  color: var(--clr-neutral-900);
}

.friend-card-content {
  display: flex;
  flex-direction: row;
  font-size: var(--fs-700);
}

.friend-card-content-name {
  text-decoration: none;
  border-right: 4px solid black;
}


/* ! Journey */

.journey-card {
  display: flex;
  flex-direction: row;
  width: 28em;  
  height: 9em;
  padding: 1em;
  border-radius: 5px;
  border: 1px solid var(--clr-primary-400);
  align-items: stretch;
  justify-content: space-around;
  margin: .5em 0;
  background-color: var(--clr-neutral-100);
  box-shadow: rgba(5, 217, 255, 0.24) 0px 3px 8px;
  
}

.journey-card-link {
  display: flex;
  flex-direction: row;
  height: 8em;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  color: var(--clr-neutral-900);
  text-decoration: none;
  gap: 1em;
} 


.journey-card-left {
  display: flex;
  font-size: var(--fs-800);
  width: 4.4em;
  align-items: flex-end;
  padding-right: 1em;
  border-right: 4px black solid;
}

.journey-card-right {
  width: 12em;
}

.no-underline {
  text-decoration: none;
}

.jounrey-post {
  color: black;
  text-decoration: none;
}

.friend-journey-date {
  font-size: var(--fs-800);
}

.journey-card-section, .flight-list {
  height: 90vh;
}

.detail-card-right {
  max-height: 100%;
  overflow-y: scroll;
  padding-top: 3em;
  width: 25em;
}

#journeyPost {
  width: 90%;
  height: 70%;
  max-width: 100%;
}

.journey-header > h1 {
  width: 50%;
}

.journey-header > a {
  margin-left: .8em;
}

#journeyDate {
border-radius: 1px;
}



.edit-journey-top {
  font-size: var(--fs-900);
  display: flex;
  flex-direction: column;
  gap: .5em;
  align-items: flex-start;
  z-index: 2;
}

  .edit-journey-bottom {
  font-size: var(--fs-900);
  display: flex;
  flex-direction: column;
  gap: .5em;
  align-items: flex-start;
  }

.select-journey-to-view-more {
  font-size: var(--fs-900);
  justify-content: center;
  align-items: center;
  padding: 1em;
  z-index: 3;
}

#delete-journey {
  display: flex;
  position: relative;
  justify-content: flex-end;
  bottom: 1em;
}

/* ! New Flight */

.new-flight-card {
  background-color: var(--clr-neutral-100);
  box-shadow: rgba(5, 217, 255, 0.24) 0px 3px 8px;
  border-radius: 15px;
  margin: 1em;
  padding: 0 1em;
  color: black;
}

label {
  padding-top: .6em;
}


/* ! Nav Bar */



.logo-pic {
  height: 70px;
  object-fit: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-pic > img {
  max-height: 90%;
}

/* ! Edit Flight Detais */

.edit-flight-details-container {
  background-color: red;
  width: 30em;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  height: 100vh;
  width: 100vw;
}

#edit-flight {
  display: flex;
  flex-direction: column;
}

.edit-flight-details-form {
  background-color: blue;
}

.edit-flight-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-flight-top > .back-btn {
  margin-right: 1em;
}

.bottom-edit {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1.6em;
}

/* ! Animation */

.css-selector {
  background: linear-gradient(306deg, #fa720b, #0bf2fa);
  background-size: 400% 400%;

  -webkit-animation: Flight-card-animation 10s ease infinite;
  animation: Flight-card-animation 10s ease infinite;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 34%);

  z-index: 1;
  position: absolute;
  max-width: 25em;
  max-height: 25em;
  inset: 0;
  isolation: isolate;
}

@-webkit-keyframes Flight-card-animation {
  0%{background-position:33% 0%}
  50%{background-position:68% 100%}
  100%{background-position:33% 0%}
}
@keyframes Flight-card-animation {
  0%{background-position:33% 0%}
  50%{background-position:68% 100%}
  100%{background-position:33% 0%}
}