/* seletor universal para css*/
*{
    margin: 0; /*margem externa*/
    padding: 0; /*margem interna*/
    box-sizing: border-box; /* tamanho padrão de conteudos, border-box=as bordas são internas*/
    font-family: 'Outfit', Times New Roman; /*fonte*/
}
/*estilo para o html todo*/
html{
    height: 100vh; /*altura, vh tamanho da tela toda*/
    font-size: 14px; /*tamanho da fonte*/
}
/*estilo do corpo*/
body{
    height: 100%;
    background: linear-gradient(to bottom, #121212, #050130); /*cor do fundo em gradiente em linha*/
}
.fixo{
    position: fixed;
    top: 10%;
    right: 10%;
}
.fixo .button-compartilhar{
    background-color: #03DAC6;
    width: 45px;
    padding: 10px; 
    font-size: 1.5em;
    cursor: pointer;
    border: none;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 50%;
}
.fixo .button-compartilhar:hover{
    width: 200px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
}
.fixo .button-compartilhar span{
    visibility: hidden;
}
.fixo .button-compartilhar:hover span{
    visibility:visible;
}
.fixo .button-compartilhar img{
    width: 25px;
    height: 25px;
}
.menu-compartilhar{
    padding: 10px;
    position: fixed;
    width: 200px;
    height: 100px;
    background-color: white;
    top: 25%;
    left: calc(50% - 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px; 
    border: none;
    border-radius: 10px;
}
.menu-compartilhar .buttons-compartilhamentos{
    display: flex;
    gap: 15px;
}
.menu-compartilhar span{
    font-size: 1.5em;
    font-weight: 800;
}
.menu-compartilhar .buttons-compartilhamentos button{
    height: 40px;
    width: 40px;
    font-size: 1.5em;
    padding: auto;
    background-color: #03DAC6;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}
.hidden{
    transition: 0.2s;
    visibility: hidden;
}
/*chamando as classes*/
.container{
    height: 100%;/*porcetagem, do tamanho ja estabelecido do pai, no caso html*/
    max-width: 550px; /* maximo de largura*/
    margin: 0 auto; 
    display: flex; /*como deve ser mostrado, de forma flexivel ou seja responsivo por natureza*/
    flex-direction: column; /*de forma em coluna um abaixo do outro*/
    justify-content: center; /*como os elementos dentro, e o espaço entre eles deve se comportar, no caso tudo no meio*/
    padding: 20px;
    color: #ffffff;/*cor do conteudo, sendo textos, imagens e outros*/
}
/*cabeçalho*/
header{
    text-align: center;/*um justify content, exclusivo de texto*/
    margin-bottom: 60px; /*margem externa especifica para baixo*/
}
/*imagem do cabeçalho, como so tem uma e ela nao tem classe, usar esquema de filho*/
header img{
    max-width: 200px;
    margin-top: -40px;/*margem externa especifica para cima*/
    margin-bottom: -20px;
}
/*h1 filho de cabeçalho*/
header h1{
    font-size: 2em; /*tamanho da fonte, sendo que em em, ou seja vezes o tamanho do pai, no caso html*/
    font-family: 'Inter', sans-serif;
    margin-bottom: 10px;
    color: #03DAC6;
}
/* p no cabeçalho*/
header p{
    font-size: 1.3em;
    font-family: 'Roboto', sans-serif;
}
/*para os link*/
a{
    text-decoration: none; /*decorações do texto, como link ja vem com o traço em baixo, aqui estou desativando*/
    color: #03DAC6;
}
/*classe da section dos botões*/
.buttons-links{
    display: flex;
    flex-direction: column;
    gap: 15px; /*especifico para distancia entre os itens*/
}
/*botões em si*/
.link button{
    width: 70%; /*largura*/
    padding: 10px; 
    display: flex;
    align-items: center; /*alinhamento dos itens*/
    justify-content: space-between; /*entre os itens fica um espaço*/
    margin-left: auto; /*margem externa da esquerda, auto para usar tudo possivel*/
    margin-right: auto; /*margem externa da direita, junto com a anterior centraliza o item na vertical*/
    border: none; /*desativa as bordas, no caso de um botão*/
    border-radius: 10px; /*começa a arredondar as bordas do botão, que por padrão é um quadrado*/
    font-size: 1.5em;
    cursor: pointer; /*ativa a funcionalidade do cursor virar uma mão sobre o botão*/
    background: radial-gradient(aqua, #BB86FC); /*radial grandient, é um gradiente em forma de circulo*/
    color: white;
    transition: .2s; /*transição sobre os efeitos, para deixa-los mais fluidos*/
}
/*novamente os botões em si, mas agora quando o mouse estiver em cima*/
/*adicionado posteriormente o hover para os link de rodape*/
.link button:hover, .button-footer:hover{
    transition: .2s;/* transição de entrada no efeito */
    filter: brightness(1.2); /* brilho */
    transform: scale(1.05); /*trasforma algo, no caso os botões e os link de rodape, scale aumenta ou diminui*/
    background: radial-gradient(#BB86FC, #BB86FC); /* botão fica todo roxo */
}
/*rodape*/
footer{
    text-align: center;
    margin: 40px;
}
/*classe dos links do rodape*/
.button-footer{
    width: 60px;
    height: 60px;
    display: inline-block; /*inline-block, são objetos em bloco oq permite da tamanho a ele e em linha oq permite permanecerem alinhados verticalmente*/
    font-size: 2.5em;
    margin-left: 10px;
    margin-right: 10px;
    transition: .2s;
}

@media screen and (max-width: 768px){
    .fixo .button-compartilhar:hover{
        width: 45px;
        display: flex;
        justify-content: flex-end;
        overflow: hidden;
        border-radius: 50%;
    }
    .fixo .button-compartilhar:hover span{
        visibility: hidden;
    }
}