.logo a {
   font-weight: bold;
   background-image: linear-gradient(to right, #3a4ed1, #cd5396);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 3rem 2rem;
   min-height: 50px;
}

nav {
   display: flex;
   justify-content: center;
   align-items: center;
}

nav > ul {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex-wrap: wrap;
   gap: 2rem;
}

/* hide evey li element except the first 2 element */
nav > ul > li:not(:nth-child(-n + 2)) { 
   display: none;
}

@media only screen and (min-width: 530px) {
   nav > ul > li:nth-child(-n + 2) { 
      display: none;
   }

   nav > ul > li:not(:nth-child(-n + 2)) { 
      display: block;
   }
}

.heading {
   font-size: 35px;
   background-image: linear-gradient(to right, #3a4ed1, #cd5396);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

@media only screen and (min-width: 800px) {
   .heading {
      font-size: 50px;
   }
}

.signUpBtn {
   width: 150px;
   background-color: #144ee3;
   color: white;
   padding: 1.5rem 2rem;
   border-radius: 500px;
}

.signUpBtn:hover {
   box-shadow: 0px 0px 21px #144de2;
}

.logoutBtn {
   width: 100px;
   background-color: #181e29;
   color: white;
   padding: 1rem 2rem;
   border-radius: 500px;
}

main {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   max-width: 1000px;
   width: 100%;
   padding: 1rem 2rem;
   margin: 0 auto;
   gap: 2.5rem;
   margin-top: 3rem;
}

.wrapper {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 1rem;
}

.shortLinks-container {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.table-container {
   width: 100%;
   overflow-x: auto;
}

.headings {
   display: flex;
   gap: 3rem;
   background-color: #181e29;
   color: white;
   padding: 2rem 1rem;
   font-weight: bold;
}

.headings h4 {
   text-align: left;
}

.shortLink,
.shortId {
   min-width: 160px;
}

.headings h4:nth-child(1) {
   display: none;
}

.headings h4:nth-child(4) {
   display: none;
}

.headings h4:nth-child(3) {
   flex-grow: 1;
}

.content {
   display: flex;
   gap: 3rem;
   background-color: #0e131e;
   color: white;
   padding: 1.5rem 1rem;
   align-items: baseline;
}

.content p:nth-child(1) {
   display: none;
}

.content p:nth-child(4) {
   display: none;
}

.content p:nth-child(3) {
   flex-grow: 1;
   overflow-x: scroll;
}

.redirectUrl {
   width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

@media only screen and (min-width: 768px) {
   .headings h4:nth-child(1) {
      display: block;
   }

   .headings h4:nth-child(4) {
      display: block;
   }

   .content p:nth-child(1) {
      display: block;
      min-width: 52px;
   }

   .content p:nth-child(4) {
      display: block;
   }

   .content p:nth-child(3) {
      overflow-x: hidden;
   }
}


form {
   max-width: 550px;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   border-radius: 500px;
   background-color: #181e29;
   padding-inline: 1.5rem;
   outline: 1px;
   outline: 0.3rem solid #323e59;
   gap: 1rem;
}

form > div {
   display: flex;
   width: 70%;
}

@media only screen and (min-width: 390px) {
   form {
      padding: 0.5rem 1.5rem;
      padding-right: 0.5rem;
      justify-content: space-between;
   }
}

form input {
   caret-color: red;
   background-color: transparent;
   color: white;
   border: none;
   width: 100%;
}

form input:focus {
   outline: none;
   border: none;
}

form button[type='submit'] {
   width: 100px;
   background-color: #144de2;
   color: white;
   padding: 1rem 2rem;
   border-radius: 500px;
   flex-grow: 1;
}


form button[type='submit']:hover {
   box-shadow: 0px 0px 21px #144de2;
}


.copyBtn {
   background-color: #144de2;
   padding: .5rem 1rem;
   color: white;
   border-radius: 4px;
   height: 28px;
   cursor: pointer;
   filter: contrast(1.3);
}

.copyBtn:hover {
   scale: .9;
   opacity: .9;
}

.redirectUrlLink {
   text-decoration: underline;
   cursor: pointer;
}