@font-face {
    font-family: 'Avenir Next Demi';
    src: url('./fonts/AvenirNext-DemiBold.eot');
    src: url('./fonts/AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('./fonts/AvenirNext-DemiBold.woff2') format('woff2'),
        url('./fonts/AvenirNext-DemiBold.woff') format('woff'),
        url('./fonts/AvenirNext-DemiBold.ttf') format('truetype'),
        url('./fonts/AvenirNext-DemiBold.svg#AvenirNext-DemiBold') format('svg');

    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

*{
  box-sizing: border-box
}

body{
  font-size: 16px;
  font-family: 'Avenir Next Demi'; 
  font-weight: 600;
}

/* The Modal (background) */
.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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(0,0,0,.9); /* Black w/ opacity */
  display:none;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.modal.show{
  display:flex;
}

h2{
  font-size: 36px;
  display:block;
  text-align:center;
  font-weight:600;
  margin: 0 0 20px;
}

h3{
  font-size: 26px;
  display:block;
  text-align:center;
  font-weight:600;
  margin:0 0 14px
}

/* The Close Button */
.close {
  position: absolute;
  right:10px;
  top:10px;
  width: 44px;
  height: 44px;
  display:block;
  background: none;
  box-shadown: none;
  border: none;
  appearance: none;
}

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

/* Modal Body */
.modal-body { padding: 0 40px 40px;}

.modal-header{
  padding-top: 20px;
  position: relative;
}
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  padding: 0;
  width: 100%;
  max-width: 700px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}


.copy-input{
  padding: 10px 10px 10px 50px;
  border: 1px solid #EF6302;
  background-color: #FFEFE4;
  background-repeat: no-repeat;
  background-size: 30px;
  font-size: 24px;

  background-position: 12px 18px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAACgklEQVRYhb2Yz29NQRTHP7T+AVux8CMsLEr86lNFBG0iKUmrXZAgtbWwsbEQVCzsiSBioeJnJFRYSFBeqyGa6I4IwUJiI5EIQeUk5yXXNXPuvfPm3m8yizdzzrmfNzP3nLkzg+rUCXQA84A/wBvgEfC8QoZ/tB14AUx72mNgQ9VQpwygdDtaFdS1AlCNNlQ21PUAqEZbKwHK2PwC1esZuweMArOALqDmsHkLLIgNddOYid0O+yGPbWdMKGtPDRh+ow77Y7GgrJnakeG7x+FzvjUC1ANgo2esD7iR4f/N0dcSA2wEeAnMAZYBi7W/PweUaKuj70sErv/UVmDzdniWv7eZdCFB1wHz9bfUvvvAZE7/dmDM0S9LOzsESDbzK2OzTxl5rKHVhv++EKizBTL4OU+MNYbP3RCokNp3OBVjlWE7URWUtE+JGO2GXT021DDQo/nqsmN8RGOsNGK4XoBMXTUCbnM4S9874Dcwrn3Lq5ypHrW5BfzUVLHZEWOpEWPcYZ8p6zzVp84XHGNn9JgsS3fSiPEsBOqKEbA/Yfcx8IV4GgJlLV8SSnQiACpo+U4bAX2Z/GIBqDshUJsKzFRae4H3hv9n4EBRoEYRfw0sdIwPaMrIoy1ANzAX+KXJta657EdRMIyCujOn/yKFiapW/ZdpSTG9lONBtUSSnND2AfiqqaMpufLRYI6AvkPetG6NpjRTA6WVdeSW5X/iGZN7iiXNgokOOf7xQ8O+ZszUWMyP6DbPQw46bNfHLjNZmjSSohx1d8m3ngFVL+m6gRWBda+0mUrqSCBUJbeSxwtA3a4CKKnujKtJSaD7y4awlkHeQLlEk3LTosVYrgKkKnwvlQr4C4jjy20cl1miAAAAAElFTkSuQmCC');
  
  border-radius: 8px;
  
  
}

.copy-input input{ 
  background: none;
  box-shadown: none;
  border: none;
  appearance: none;
  width: 100%;
  height: 40px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Avenir Next Demi'; 
  font-weight: 600;
}

.copy-input input:focus{
  outline: none
}

.btn-primary{
  background: #EF6302;
  border-radius: 8px;
  padding: 16px 30px;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  font-family: 'Avenir Next Demi'; 
  font-weight: 600;
}

.btn-primary.coppied{
  padding: 16px 70px;
}

.btn-primary:hover{
  background: #FF6900;
}

.btn-primary:active{
  background: #EF6302;
}

.btn-container{
  display:flex;
  align-items:center;
  justify-content: center;
  margin-top: 20px
}