@import url('https://fonts.googleapis.com/css2?family=PT+Sans:display=swap');
@import "https://www.nerdfonts.com/assets/css/webfont.css";
:root{
    --base: #f3f3f3;
    --letter: rgb(48, 48, 48);
    --primary:#ea580c;
    --secondary: #ea820c;
    --gray: rgb(107 114 128);
    --fade: linear-gradient(22deg, #f97316, #ef4444)
    
}
body{
    background: linear-gradient(-45deg, #fef3c7, #ffedd5, #fee2e2);
    background-size: 200% 200%;
    animation: fadeColors 8s ease infinite;
    color: var(--letter);

  font-family: 'PT Sans', sans-serif;
}
@keyframes fadeColors {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.text-primary{
    color: var(--primary)!important;
}
.text-gray{
    color: var(--gray);
}
.card{
    background-color: var(--base);
    border-radius: 20px;
    margin: 30px 0;
    padding: 30px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.profile-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    padding: 5px; /* Espessura da borda */
    background: var(--fade);
    display: inline-block;
    transition: transform 0.3s ease; /* suaviza a animação */
}

.profile-image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
}
.profile-image:hover {
    transform: scale(1.05); /* aumenta levemente */
}
.contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 14px;
    color: var(--gray);
    margin-top: 25px;
}

.contacts i {
    margin-right: 5px;
    color: var(--primary);
}
#voltar-ao-topo {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    cursor: pointer;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 16px;
}
.page-link{
    padding: 5px 10px;
    margin: 0 15px;
    background-color: var(--base);
    border-radius: 50px;
    border: 1px rgb(180, 180, 180) solid;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    width: 140px;
    text-align: center;
}
.page-link i{
    top: -20px;
}
.card h1{
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--letter);
}
.card i{
    color: var(--primary);
    font-size: 1.4rem;
    margin-right: 10px;
}
.card .info{
    border-left: 3px solid var(--primary);
    display: flex;
    justify-content: space-between;
    padding-left: 15px;
    margin-top: 15px;
    width: 100%;
    flex-wrap: wrap;
}
.card .info h2{
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--letter);
}
.card .info a{
    font-weight: 600;
    color: var(--primary);
    padding-top: 5px;
    padding-bottom: 5px;
}
.card .info a:hover, .card .info a:active{
    color: var(--secondary);
}
.card .info p{
    text-align: justify;
}
.card .info .date{
    text-align: end;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
}

.card .info2{
    border-left: 3px solid var(--primary);
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
    margin-top: 15px;
    width: 100%;
}

.card .info2 span{
    border: #fac8a9 solid 2px;
    color: #A03F1E;
    margin: 5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 50px;
    background: linear-gradient(45deg, #FEE3D1, #FCDBD8);

}