@import "fonts.css";
@import "postStyle.css";
@import "aligns.css";
@import "indexAnimations.css";
:root{
    --header-background: #0c192c;
    --background-index: var(--header-background);
    --font-dark:var(--background-index)
    --background-others:var(--font-color-light)
    --font-color-light: rgb(181, 193, 211);
    --font-color-dark: var(--background-index);
    --font-color-content: #638fd1;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--background-index);
}
footer{
    width: 100%;
    color: var(--font-color-dark);
}
.container{
    flex: 1; 
}
.content-index{
    position: relative;
    z-index: 2;
}
.index-h1-color {
    color: var(--font-color-light);
}
.index-h5-color{
    color: var(--font-color-content);
}
#bubbles{
    opacity: 0;
    transition: all 500ms ease-in-out;
}
#icons{
    opacity: 0;
    transition: all 500ms ease-in-out;
}
.conteiner-bubbles {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: -1;
    overflow: hidden;
}
.bubbles {
    position: fixed;
    display: flex;
}
.bubbles span {
    width: 20px;
    height: 20px;
    box-shadow: rgba(11, 228, 58, 0.3) 0px 0px 0px 7px, 
    rgba(11, 228, 58, 0.6) 0px 0px 50px, 
    rgba(11, 228, 58, 0.6) 0px 0px 100px;
    background: rgba(11, 228, 58, 0.6);
    margin: 0px 4px;
    border-radius: 50%;
    animation: animation calc(150s / var(--i)) ease-out infinite;
}
@keyframes animation{
    0% {
        transform: translateY(100vh) scale(0);
    }
    100% {
        transform: translateY(-10vh) scale(1);
    }
}
footer{
    width: 100%;
    color: var(--font-color-light);
}
p{
    color: var(--font-color-content);
    text-align: end;
}
a{
    color: var(--font-color-light);
    text-decoration: none;
    transition: all 500ms ease-in-out;
}
a:hover{
    color: var(--font-color-content);
}
.icons svg{
    color: var(--font-color-light);
    text-decoration: none;
    transition: all 500ms ease-in-out;
}
.icons svg:hover{
    margin: 100px;
    border-radius: 150%;
    box-shadow: rgba(11, 228, 58, 0.3) 0px 0px 0px 7px, 
    rgba(11, 228, 58, 0.6) 0px 0px 50px, 
    rgba(11, 228, 58, 0.6) 0px 0px 100px;
    background: rgba(11, 228, 58, 0.6);
    margin: 0px 4px;
}

.curves-eff{
    width: 100%;
    height: 100px;
    background-color:var(--font-color-content); /* Cor de fundo azul */
    border-top-left-radius: 500px; /* Raio de 100px na borda superior esquerda */
    border-bottom-right-radius: 500px; /* Raio de 100px na borda superior direita */
}
.hero-area {
    height: 100vh;
}
.shadow-index{
    box-shadow: 1px 1px 10px 2px rgba(255, 255, 255, 0.2);
}

.back-ground-color-1{
    background-color: var(--font-color-light);
}