@font-face {
 font-family: Future Earth;
 src: url('Fontes/future-earth.ttf');
}


@font-face {
 font-family: Modern Sans;
 src: url('Fontes/ModernSans-Light.otf');
}

@font-face {
 font-family: Material Symbol Outlined;
 src: url('Fontes/Material-Symbol-Outlined.woff2');
}

.icone
{
 font-family: Material Symbol Outlined;
 
}

body {
    margin: 30px;
    background: #111;
    color: #aaa;
    font-family: Modern Sans, sans-serif;
    user-select: none
}

.titulo h1
{
 text-align: center;
 text-transform: uppercase;
 color: #CFD3FF;
 font-size: 2rem;
 font-family: Future Earth;
 font-weight: 100;
}

.icone-app
{
 display: flex;
 align-items: center;
 justify-content: center;
}

.icone-app img
{
 width: 100px;
}

article
{
 display: flex;
 align-items: center;
 flex-direction: column
}

article span
{
 margin-top: 20px;
 font-size: 1.3rem;
 display: block;
 text-align: center;
 padding: 30px;
}

article .imagem-apresentacao
{
 position: relative;
 width: 200px;
}

article .imagem-apresentacao #mini-logo
{
 position: absolute;
 width: 35px;
 left: 75px;
 top: 65px;
}

article img:not(#mini-logo)
{
 display: block;
 width: 200px;
 margin-top: 30px;
 margin-bottom: 40px;
}

.flexbox,
.card
{
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.card
{
 padding: 30px 20px;
 text-align: center;
}

.card *
{
 margin: 0;
}
.card .icone
{
 font-size: 4rem;
 margin-bottom: 10px;
 color: #4454FF;
}

.card .titulo
{
 font-weight: 100;
 font-size: 1.9rem;
 margin-bottom: 15px;
 font-family: Future Earth;
 color: #AAD0FF;
}

.card .paragrafo
{
 max-width: 500px;
 font-size: 1.2rem;
}

article.sobre
{
 margin-top: 160px;
 margin-bottom: 70px;
}

article.sobre h1.titulo
{
 font-size: 2rem;
 font-weight: 100;
 font-family: Future Earth;
 margin-bottom: 70px;
}

.desenvolvedor
{
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column
}


.desenvolvedor .perfil
{
 height: 200px;
 width: 200px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 100px;
 overflow: hidden;
}

.desenvolvedor .perfil img
{
 transform: translateY(5px)
}

.desenvolvedor .texto
{
 text-align: justify;
 font-size: 1.2rem;
 margin-top: 40px;
 line-height: 1.3rem;
 max-width: 500px
}

a.link
{
  text-decoration: none;
  color: #4454FF;
 -webkit-tap-highlight-color: transparent;
}

a.btn
{
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 max-width: 300px;
 height: 45px;
 padding: 5px 1px;
 border-radius: 10px;
 gap: 0 10px;
 background: #4454FF;
 text-decoration: none;
 -webkit-tap-highlight-color: transparent;
 color: #eee;
 font-size: 1.1rem;
 text-transform: uppercase;
 box-shadow: 0 0 15px #3C94FF45;
 transition: 100ms linear;
 margin: auto;
 font-weight: bold;
}

a.btn:active
{
 transform: scale(0.95);
 -ms-filter: grayscale(30%);
 filter: grayscale(20%);
}