/*----IMPORT FONTS----*/
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Jua&display=swap');

/*----ROOT----*/
:root{
    --font-text-primary:"Jua", sans-serif;
    --font-text-secondary:"Josefin Sans", sans-serif;

    --background-color-primary:#4C4265;
    --background-color-buttons:#B6ABFF;

    --background-color-buttons-hover:#22047B;
    --text-color-hover:#e2e2e2;

    --text-color:#5c5c5c;

    --border-color:#180840;
    --border-color-text:#22047B;
}

/*----RESET CSS---*/
*{
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
}

/*----BODY----*/
body{
    background: linear-gradient(#B6ABFF, #5F20FF);
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/*----MAIN----*/
.container__main{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 42.063rem;
    width: 32.25rem;
    margin-top: 4.7rem;
    border: 3px solid var(--border-color);
    border-radius: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
    background-color: var(--background-color-primary);
}

.container__title{
    font-family: var(--font-text-primary);
    font-size: 1.75rem;
    font-weight: 100;
    color: #ffffff;
    margin-top: 2.375rem;
    text-shadow:0px 3px 2px rgba(0, 0, 0, 0.2);
}

.container__text{
    margin-top: 2rem;
    height: 3.75rem;
    width: 21.75rem;
    border-radius: 5px;
    border: 1px solid var(--border-color-text);
}

.icon_container{
    margin-top: 0.75rem;
    font-size: 1.563rem;
}

.danger__text{
    margin-top: 0.313rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-family: var(--font-text-secondary);
    text-shadow:0px 3px 2px rgba(0, 0, 0, 0.2);
}

.container__buttons{
    margin-top: 1.25rem;
    display: flex;
    gap: 3rem;
}

.btn{
    cursor: pointer;
    padding: 0.375rem 0px 0.375rem 0px;
    width: 6.813rem;
    font-family: var(--font-text-primary);
    font-size: 13px;
    font-weight: 100;
    color: var(--text-color);
    border-radius: 20px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
    text-shadow:0px 2px 2px rgba(0, 0, 0, 0.2);
    background-color: var(--background-color-buttons);
    transition: all 0.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn:hover{
    background-color: var(--background-color-buttons-hover);
    color: var(--text-color-hover);
    transform: scale(1.1);
}

.btn__copy{
    cursor: pointer;
    margin-top: 2.125rem;
    padding: 0.375rem 0px 0.375rem 0px;
    width: 6.813rem;
    font-family: var(--font-text-primary);
    font-size: 13px;
    font-weight: 100;
    color: var(--text-color);
    border-radius: 20px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
    text-shadow:0px 2px 2px rgba(0, 0, 0, 0.2);
    background-color: var(--background-color-buttons);
    transition: all 0.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn__copy:hover{
    background-color: var(--background-color-buttons-hover);
    color: var(--text-color-hover);
    transform: scale(1.1);
}

.container__text_hidden{
    padding-top: 2rem;
    height: 3.75rem;
    width: 21.75rem;
    border-radius: 5px;
    border: 1px solid var(--border-color-text);
}

.container__hidden{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    gap: 5px;
    opacity: 0;
}

.img__main{
    height: 205px;
    width: 250px;
    margin-top: 1rem;
}

/*----FOOTER----*/
.container__footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32.25rem;
    margin-top: 3rem;
    margin-bottom: 4.7rem;
    border: 3px solid var(--border-color);
    border-radius: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
    background-color: var(--background-color-primary);
}

.footer__text{
    margin-top: 2.9rem;
    font-family: var(--font-text-secondary);
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    text-shadow:0px 3px 2px rgba(0, 0, 0, 0.2);
}

.footer__space__icons{
    display: flex;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 2.5rem;
    gap: 2.2rem;
}

.footer__icons{
    font-size: 45px;
    color: #b151ce;
}

.footer__icons:hover{
    color: #250d63;
}