:root{
    --main-orange : #FE5F37;
    --light-orange: #FF977D;
}

@font-face {
font-family: 'fontbold';
src: url(/assets/fonts/CriqueGrotesk-Black.woff2);
}
@font-face {
font-family: light;
src: url(/assets/fonts/CriqueGrotesk-Light.woff2);
}
@font-face {
font-family: medium;
src: url(/assets/fonts/CriqueGrotesk-Medium.woff2);
}
@font-face {
font-family: normal;
src: url(/assets/fonts/CriqueGrotesk.woff2);
}

body{
font-family: light;
letter-spacing: 1px;
}

.uppercase{
text-transform: uppercase;
}

.font-bold{
font-family: 'fontbold';
}
.light{
font-family: light;
}
.medium{
font-family: medium;
}
.normal{
font-family: normal;
}

.navbar{
background-color: var(--main-orange);
}

.home-header{
background-color: var(--main-orange);
padding-top: 62px;
padding-bottom: 62px;
text-align: center;
color:#ffffff;
}

.inline-form{
display: flex;
}

.header-form{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}

.header-form input{
border: none;
border-radius: 4px;
height: 45px;
width: 70%;
padding-left: 10px;
outline: none;
font-family: medium;
}

.header-form button{
height: 45px;
border: solid 1px #ffffff5e;
background-color: transparent;
color: #ffffff;
text-transform: uppercase;
font-family: normal;
font-size: 14px;
margin: 0px;
padding: 0px 10px;
border-radius: 4px;
letter-spacing: 1px;
}

.copy-button{
    background-color: var(--main-orange);
    border-radius: 4px;
letter-spacing: 1px;
}

.logo{
color: rgb(248 249 250 / 42%) !important;
}

.ads-section{
margin-top: 30px;
margin-bottom: 30px;
}

.top-ads{
background-color: #333333;
width: 70%;
margin: auto;
height: 100px;
}

.edit-form-header{
background-color: var(--main-orange);
padding: 15px 20px;
border-radius: 4px 4px 0px 0px;
}

.edit-form-body{
border: solid 2px var(--main-orange);
padding: 20px;
}

.input{
border: solid 2px var(--main-orange);
height: 50px;
display: block;
width: 100%;
border-radius: 4px;
outline: none;
padding-left: 10px;
}

.generate-button{
background-color: #000000!important;
}

.ls-1x{
letter-spacing: 1px;
}

.tw-share-card{
border-radius: 12px;
border: solid 1px #cecece;
}

.share-card-text{
padding: 10px 15px;
}

.tw-description{
font-size: 13px;
font-family: 'medium';
line-height: 15px;
color: #76818e;
}

.share-card-text{
background-color: #f6f8fa;
border-radius: 0px 0px 12px 12px;
}

.txt-light{
color: #9fa8ae;
}

.txt-orange{
color: var(--main-orange);
}