* {
     font-family: "Inconsolata", serif;
}

:root {
     --Neutral-0: hsl(0, 0%, 100%);
     --Neutral-300: hsl(252, 6%, 83%);
     --Neutral-500: hsl(245, 15%, 58%);
     --Neutral-700: hsl(245, 19%, 35%);
     --Neutral-900: hsl(248, 70%, 10%);
     --Orange-500: hsl(7, 88%, 67%);
     --Orange-700: hsl(7, 71%, 60%);
     --Gradient-text: linear-gradient(to right, hsl(7, 86%, 67%), hsl(0, 0%, 100%));
}

/* Index-Page-CSS */

.drop, .form, input {
     width: 320px;
}
.drag{
     margin: 15px 0 8px;
}
#warner{
     display: none;
     color: var(--Orange-700);
}
.orange-bg {
     background-color: var(--Orange-700);
}

.drop-area:hover, .inPut:hover {
     background-color: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(20px);
}

.drop-area:focus {
     border: 2px solid var(--Neutral-0);
     backdrop-filter: blur(20px);
}
.drop-area {
     border: 2px dashed #ccc;
     border-radius: 10px;
     text-align: center;
}

.drop-area.active {
     border: 2px dashed var(--Neutral-500);
}
.inPut:focus{
     cursor:text;
     border: 2px solid var(--Neutral-500);
     outline: black;
}
.generate:focus {
     border: 2px solid black;
     box-shadow: 0 0 2px #fff;
}
body {
     background-image: url("assets/images/pattern-lines.svg"), 
     url('assets/images/pattern-squiggly-line-top.svg'), 
     url("assets/images/pattern-squiggly-line-bottom.svg"), 
     url('assets/images/background-desktop.png');
     background-position: center, 100% 2%, bottom left, center;
     background-size: cover, 100px, 300px, cover;
     background-repeat: no-repeat;
}


/* Ticket-Page-CSS */

header h2 #big-name {
     background: var(--Gradient-text);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}

header p span {
     color: var(--Orange-500);
}

.congrats {
     max-width: 450px;
}

.ticket {
     background-image: url("assets/images/pattern-ticket.svg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     padding: 20px 0 20px 20px;
     margin: 80px 20px 300px;
     display: grid;
     grid-template-columns: 4fr 1fr;
     justify-content: center;
     align-items: center;
     max-width: 335px;
}

.nums {
     color: var(--Neutral-500);
     align-self: center;
     transform: rotate(90deg);
}

.nums h2 {
     font-size: 22px;
}

.pic-desript {
     display: flex;
     align-items: center;
     gap: 10px;
}

.pic-1 img {
     width: 30px;
}

.pic-2 img {
     width: 40px;
     height: 40px;
     border-radius: 4px;
}

.pic-desript h2 {
     font-size: 20px;
     font-weight: 700;
}

.pic-desript span {
     font-size: 14px;
}

.second-pic-desript {
     margin-top: 30px;
}

.descr h2 {
     font-weight: 400;
}

.descr span {
     font-size: 12px;
}

.git-acc {
     display: flex;
     justify-content: start;
     align-items: center;
     gap: 4px;
}

.git-acc img {
     width: 14px;
}


.attribution {
     font-size: 11px;
     text-align: center;
}

.attribution a {
     color: var(--Orange-700);
}
.avatar{
     width: 40px;
     height: 40px;
     margin-top: 10px;
     background-image: url("assets/images/icon-upload.svg");
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
}
@media(min-width:375px) {
     .drop,
     .form,
     input {
          width: 360px;
     }
}
@media(min-width:768px) {
     body {
          background-size: cover, 400px, 700px, cover;
          background-position: center, 100% 10%, bottom left, center;
     }

     .congrats p {
          padding: 0 20px;
     }
     .drop,
     .form,
     input {
          width: 390px;
     }
}

/* JS-CSS */

.btn {
     padding: 4px 10px;
     color: #fff;
     background-color: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     border-radius: 8px;
     font-size: 12px;
}
.btns{
     display: flex;
     gap: 20px;
     margin:10px 50px 0;
}