@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Italianno&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root
{
    --color-red:#F9E7FE;
    --color-blue:#DAFCFC;
    --color-main: #178991;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #2d2d2d;
    font-family: "Poppins", sans-serif;
}

body
{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(
        to bottom right, var(--color-red), var(--color-blue));

    padding: 0 8rem;
}

p.logo
{
    position: absolute;
    top: 2rem;
    left: 4rem;
    font-family: "Italianno", cursive;
    font-size: 3rem;
}

h1
{
  font-family: "Inria Serif", serif;
  font-size: 8rem;
  font-weight: 700;
}

p
{
    font-size: 1rem;
    text-align: center;
}
a.discover-more
{
    border: 6px solid white;
    background: linear-gradient(
        to bottom left, var(--color-red), var(--color-blue));

    height: 80px;
    line-height: 68px;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.75rem;
    font-weight: 200;
    padding: 0 4rem;
    margin-top:  2rem;
    box-shadow: 2px 4px 10px #00000010;
    transition: .2s;
    cursor: pointer;
}
a.discover-more:hover
{
    transform: scale(1.025);
}

.social-media
{
    position: absolute;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.social-media > p {color: #3d3d3d; font-weight: 300;}
.social-media > .bar
{
    height: 1px;
    background: #3d3d3d;
    opacity: .2;
    width: 120%;
    margin: .4rem 0 .8rem 0;
}

.social-media > .links{
    display: flex;
    gap: 5px;
}

.social-media > .links a {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    aspect-ratio: 1/1;
    border: 2px solid transparent;
    transition: .2s;
}
.social-media > .links a.bold{
    background: #fff;
}
.social-media > .links a:hover{
    border: 2px solid #fff;
    background: #ffffff40;
}
.social-media > .links a.bold:hover{
    border: 2px solid #fff;
    background: var(--color-blue);
}

.bubble
{
    position: absolute;
    border: 10px solid #fff;
    box-shadow: 1px 3px 6px #00000005;
    border-radius: 50px;
    height: 80px;
}

.bubble.big { width: 220px;}
.bubble.small { width: 110px;}

.bubble.one{top:4rem; right: 8rem; animation: bubble_top 9s linear infinite;}
.bubble.two{top:12rem; right: 5rem; animation: bubble_top 15s linear infinite;}
.bubble.three{bottom:12rem; left: 5rem; animation: bubble_bottom 15s linear infinite;}
.bubble.four{bottom:4rem; left: 8rem; animation: bubble_bottom 9s linear infinite;}

@keyframes bubble_top {
    0%{transform: unset;}
    50%{transform: translateX(-3rem);}
    100%{transform: translateX(0);}
}
@keyframes bubble_bottom {
    0%{transform: unset;}
    50%{transform: translateX(3rem);}
    100%{transform: translateX(0);}
}