@font-face {
  font-family: "SF Pro Rounded";
  font-style: normal;
  font-weight: 400;

  font-display: swap;
  src: url(sf-rounded/SF-Pro-Rounded-Regular.woff2) format("woff2");
}

@font-face {
  font-family: "SF Pro Rounded";
  font-style: normal;
  font-weight: 500;

  font-display: swap;
  src: url(sf-rounded/SF-Pro-Rounded-Medium.woff2) format("woff2");
}

@font-face {
  font-family: "SF Pro Rounded";
  font-style: normal;
  font-weight: 700;

  font-display: swap;
  src: url(sf-rounded/SF-Pro-Rounded-Semibold.woff2) format("woff2");
}

@font-face {
  font-family: "SF Pro Rounded";
  font-style: normal;
  font-weight: 800;

  font-display: swap;
  src: url(sf-rounded/SF-Pro-Rounded-Bold.woff2) format("woff2");
}

@font-face {
  font-family: "SF Pro Rounded";
  font-style: normal;
  font-weight: 900;

  font-display: swap;
  src: url(sf-rounded/SF-Pro-Rounded-Heavy.woff2) format("woff2");
}


body {
    background-color: #111315;
    color: #fff;    
    font-family: SF Pro Rounded,sans-serif;
    margin: 0px;
    padding: 0px;    
}


/* Main */
main{
    width: 100%;
}
main .main-container{
    width: 100%;    
}

main .main-container .left-sidebar{
    width: 25%;
    float: left;
    padding: 2px;
}
main .main-container .content-area{
    margin-top: 100px;    
    width: 50%;    
    float: left;    
}

main .main-container .content-area .logo-container {
    align-items: center;    
    cursor: pointer;
    display: flex;
    gap: 18px;
    text-decoration: none;    
    justify-content: center;
}

main .main-container .content-area .logo-container .logo-img{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAoCAYAAACFFRgXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAfESURBVHgBrVnNayTHFX+vumdnRjPSSF6CYwzLODg4h0AkckhMcDJycsghxBY4kA2YWPgQDAl4/wJJ11yUJZjg5ODdSw6BIC0YdslFs4QlARtWBxtjvLbGn6y/1mNZK1nTU/X8qqqru6qnZ0br9dvtne5X9d771atfvaruRZgi717+RUdE+Hsg7PBj2+kjAbut2cruMJEXZx+50p3mJ3npV504xseUwscRYZ5V80QE7HeX/e8eDuSlxo9e3J7mB8c1vHf50adQwBoBtoH9chDQ/qMIYHYmhnotyvpy4O0koXP1h6/0in7o+i/bRPiCHjCZgMjuKABA2T31FNBG/MMrF+CkgPe2OvOVGm3xbSf0htCoC2jWIxCIZZ56R8eDleZPurtOdXCtszhTPbXFA22HfdGNFEZQs0ipurePDlYXlv/fGw3jg73843aFoh2CMIDuNNeIGbDNKvnGmMflTPeHipbqD3d7R//rtE9FuAMg2jqjxcwG/qv3Ah1/WATWG0i1rH0VsViwW4vzlWrtOikPbJqJuYbIwGaIx5BJKei9f3N/6cx9c9cJna9CCr3weOaPIL79BMDxTZCvPg0wvG378l9F0KvUxBIudfvOInY3USXaJDls+zxDjticYbBVDqiGQSgiP2wOR/Ds3H/vzI6ioeV+AWDAWH2//zLQzHcADm8ADD4HNxu6n/aljmmNH875HuC9rcVFFeH1HI1tiSOEby3EMD5DUJq1k/cts3PT5/lhalQeebmrb02GFcpNUAV77rswH9vMOrIa/ZjU+s+FxWpsytoKIk4vA97TAeKsq49ezGNFqLPcNe72tr7XFvyTR7RoqxWEe1rxiFNkAERlKE8uo6XNPsdL/wJsPGR06q0/g/zgn5lvOUja9Z+/9rYAJXlIEuw1tBdImKlS/qwvnWnuQzIJ+6pBei/TPsNRu0xv7UglQR/3TAev5dk+8wz/U898YAVWjB5BPUa6s3chX9UKl3AHUqVt7Dj71TqjT9uztsLl/CrPLugnzbOOo27+O5+GeJbp8bOsvxxyYrUaKGmHa5mgEos00xRQdqoUC7TRUchjvy/mpNA0o/1XOOw+YDxns9x8iAdhq1OM8APzS6TaRVSViExB9fk5Dvcop23nQG/AoSms4HstOlW3gD7+D+B9T9h+tfvtLIMuFLamx6CS+WJ9ZGJzsLHHjBCbX4l8vYLRjPo2WF425GfXQKSAKZpNZ1oXCtsea88uE26Lj5jZpLA0e0aX7kSZDryZ98EFxQSDkogpDQpqTvJ/w1FqDnsapkTSg/TskBnq7JIYnWoomX4fH4V9wT9DFFlDZTb8fLiXPwz7trKwMbPJbM+c4WFfT7/Nrp0iM53kwKH9SzkVcwp4HPd4GxzGCmvP2QT7D4YDoaN3AOtnGPzbtuSh3vLRnAJjkvIqKxYpON5x4Mgfdl7obT+E8vJh9RlH3X0BJPr9yypRpWUT/OnVtOTZg5ABLGmwG0GAjvcSLExhSVkqkSAwlQwmbaAJuyNW5rmstbja9rmkbYM7uSWJvGQAV6TcVoI2+X7eGSV64zlVHszwu3CAwAkgLE1S23FlwxPR/L75lR9esnQAU9Kg11dd0/7AKvSZsxcteew1GFBer4zObd1k65XX11QZKNNTSgll2uwSUd5FpZc4/VPmcA+Gr6+bZ20XRerC0qpddMKOVW37mZRc0obST0J63CubZoLyMkYQ2JDKKwWmf6CkeqhPrsLxtUdB8YIzdnoQCWz4SIzceAF3UL/Hpepmnfhl06sUZdMN4197cvcT2n2WBAXZK4moLjR+DavORLibCGg1yxYbHh55WaGUu1k75Mkx91jSngIo2JjMEoazQm7bRi9eml2ZZzcAzFzuKcINN/36KHF0jN7UkhcwDRQMaBLY3IZSriIUQfv+ssRt1FdsORsBrCUW6i/cq+ccHRxS6BBsQHSczq6SiufxFfxjnLK/wa4KzidkCdJvzY0VWC+6DQDriiGQltmqr410OTn80nELzUtpniU/sykAGl2Eob447ejZk0d36rNmGUpEFBWaGryQzjlHB4fpSTMLDkGgEHiR6xgMym9DKKONbR8c4wgVxgLW8uDTcIHpZMiuaXX7KJ0w59jdZwnB8NdIYVDgBpQuKAVQWg4Vbiz8VlOzXBAmyBv/EOs8ojXtscUlrl6dUMry042vHBNijJ6T1PiNWocJMhGwAf08g0ZY4wtOz5mvlmMDeme3qa79pahlMISLC2fVUzBFxLQO3/2DWuf3xA3N41v7js9jylyRBmMv9NYDn8oSOH8SsCcCbEA/w6ABNiRv1/0vnBbzhQiQ8tKrAmXbdl5f/eeN1u/Us3BCmUoJX958Hp4FJTY1l1szMPI1J3h9wmKIkPf6pYFf8M+1JiywuwasZe85WFRCbDXr0G7Wprmm0hauEP1EipWFJ4dduEO5Y8Ba9v7GXxVB7DRryKBpvLsAs027IrUbI63Uz5bX2WnytQA7eeM5sc6fYtdaM8Wq4A0i+4jCR1aF528NhusPpGfbryN3BVjLjb9Gj9eqtNlqQNv9V4JJbFaXzSG8J1Gszp69cwoU5URVYpI8+Ce5nfD321v7eFGaQz8FX3z49nz9WC19E2C13HWGffns77AY1SL9ftjhz3NdycfV2Se/GaBOvgJcu/LL9ZH0ogAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-size: contain;
    height: 35px;
    margin-top: 5px;
    width: 35px;
}

main .main-container .content-area .logo-container .logo-title {
    color: #fff;
    font-family: SF Pro Rounded;
    font-size: 32px;
    font-weight: 900;
    line-height: 24px;
    margin-top: 2px;
}

main .main-container .content-area .logo-sub-title {
    color: #ffffffb3;
    font-family: SF Pro Rounded;
    font-size: 17px;    
    line-height: 24px;
    margin-top: 10px;
    text-align: center;    
}

main .main-container .content-area .logo-container .logo-title span{
    color: #f5b301; 
}

main .main-container .content-area .content-category-list{
    margin-top: 50px;
    text-align: center;    
}


main .main-container .content-area .content-category-list .category-btn{
    background: #191c20;
    font-family: SF Pro Rounded;
    color: #747b84;
    padding: 10px;
    font-size: 17px;  
    font-weight: bold;
    border: 2px solid #22262a;
    border-radius: 12px;
    cursor: pointer;
    margin: 10px;
}

main .main-container .content-area .content-category-list .category-btn:hover{
    background-color: #f5b301; 
    color: #000000;
    transform:scale(1.2);
    transition: all 300ms;    
}

main .main-container .content-area .content-category-list .selected{
    background-color: #f5b301; 
    color: #000000;
}

main .main-container .content-area .content-button-container{
    margin-top: 20px;
    text-align: center;
}

main .main-container .content-area .content-button-container button {
    height: 50px;
    font-weight: bold;
    font-family: SF Pro Rounded;
    padding: 14px;
    background: hsla(0,0%,100%,.1);
    position: relative;
    width: 250px;
    background-image: none;
    border: none;
    outline: none;

    color: white;
    font-size: 20px;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius : 12px;
    transition: all ease-out 0.5s;
}

main .main-container .content-area .content-button-container button:hover{
    transform:scale(1.2);
    opacity: .7;
}

main .main-container .content-area .content-button-container button.loading{
    border-radius: 50px;
    width: 50px;
    font-size:0px;
}

main .main-container .content-area .content-button-container .generate-btn{
    background: hsla(0,0%,100%,.1);
    color: #fff;
    padding: 14px;
    font-family: SF Pro Rounded;
    border-radius: 12px;
    font-size: 20px;
    min-width: 50px;
    cursor: pointer;
    width: 250px;
    font-weight: bold;
}

main .main-container .content-area .text-area-container{
    color: #fff;
    font-family: SF Pro Rounded;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .374px;    
    width: 100%;
    margin-top: 40px;
    align-items: center;
    background: #191c20;
    border: 2px solid #22262a;
    border-radius: 12px;
    display: flex;
    gap: 12px;
    visibility: hidden;
}

main .main-container .content-area .text-area-container #pickup-line-textarea{
    width: 100%;
    color: #eceff3;
    font-family: SF Pro Rounded;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .374px;    

    background: transparent;
    border: none;
    outline: none;
    padding: 14px 16px;
    resize: none;
    height: auto;
    text-align: center;
    height: auto;
    text-align: center;
    margin: auto;
}

main .main-container .content-area .text-area-container .actions .copy-btn{
    border-radius: 12px;
    font-size: 15px;
    min-width: 32px;
    padding: 14px;
    color: #fff;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    font-family: SF Pro Rounded;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    gap: 4px;
    justify-content: center;
    padding: 13px 22px;
    text-align: center;
    transition: all .3s ease-in-out;
    white-space: nowrap;
}

main .main-container .right-sidebar{
    width: 25%;
    float: left;
    padding: 2px;
}

@media only screen and (max-width: 700px) {
    main .main-container .content-area .logo-container .logo-title {
        font-size: 24px;        
    }

    main .main-container .content-area .logo-sub-title {
        font-size: 12px;            
    }
}

@media only screen and (max-width: 600px) {
    main .main-container .content-area{
        align-items: center;
    }
    main .main-container .content-area .text-area-container #pickup-line-textarea{
        min-height: 70px;
    }
    main .main-container .left-sidebar{
        display: none;        
    }
    main .main-container .right-sidebar{
        display: none;        
    }
    main .main-container .content-area{
        width: 100%;            
        padding-left: 10px;        
        padding-right: 10px;        
    }
}

.spinner {
    display: block;
    width: 34px;
    height: 34px;
    position: absolute;
    top: 8px;
    margin:0 auto;
    left:0;
    right:0;
    background: transparent;
    box-sizing: border-box;
    border-top: 4px solid white;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-radius: 100%;
    animation-delay:0.5s;
    animation: spin 0.6s ease-out infinite;
    transition:all ease 0.5s;
}

@keyframes spin {
    100% {transform: rotate(360deg)}
}

/* Copied Text Toaster */
#copied_toast {
    background: #191c20;
    font-family: SF Pro Rounded;
    color: #FFFFFF;        
    font-weight: bold;
    border: 2px solid #22262a;
    border-radius: 8px;
    cursor: pointer;    
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;    
    text-align: center;  
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

#copied_toast.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
/* End Copied Text Toaster */

/* End Main */