@import url('./global.css');

*{
  padding: 0;
  border: 0;
  margin: 0;
  box-sizing: border-box;

  font-family: "Libre Franklin", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--color-4);
}

*:focus { outline: none }

a:focus,
a:hover,
a:active,
a::selection{
  text-decoration: none;
  transform: scale(1.2);
}

body,
.header .header-container,
.header .header-container .header-logo,
section,
section div.box-network,
.navbar{
  display: flex;
}

body,
section{
  flex-direction: column;
}

body,
.header .header-container .header-logo,
section,
.navbar{
  justify-content: center;
  align-items: center;
}

body{
  width: 100%;
  height: 100%;  
  background-image: linear-gradient(to left top, #273a47, #324e61, #577a96);
  background-repeat: no-repeat;
  overflow: hidden;
}

.header .header-container{
  width: 100vw;
  height: 10dvh;
  padding: 0 1rem 0 1rem;
  align-items: center;
  background-image: linear-gradient(to top, transparent, var(--color-0));
}

.header .header-container .header-logo{
  width: 8rem;
}

.header .header-container .header-logo  img{
  width: 70%;
}

.header .header-container .identificador{
  color: var(--color-4);
  font-size: 2rem;
}

main.container{
  width: 100%;
  height: 85dvh;
  /* overflow-y: auto; */
}

main.container section{
  width: 100%;
  height: 100%;
}

section div.container-avatar{
  width: 12rem;
  min-height: 12rem;
  border-radius: 6rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border: 8px solid var(--color-3);
  box-shadow: 0rem 0rem 1.5rem var(--color-0);
}

section div.container-avatar img{
  width: 100%;
}

section h1{
  font-size: 2.3rem;
  color: var(--color-4);
}

section h2{
  font-size: 1.3rem;
}

section div.box-network{
  width: 80%;
  max-width: 300px;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 3rem;
}

section div.box-network a .box-nav{
  margin: 0.5rem;
}

section div.box-network a .box-nav img{
  width: 5rem;
}

section p{
  margin-top: 2rem;
  font-size: 1.2rem;
  color: var(--color-6);
}

footer.navbar{
  width: 100vw;
  height: 5dvh;
  font-weight: 500;
  background-image: linear-gradient(to bottom, transparent, var(--color-0));
}

footer.navbar p{
  color: var(--color-3);
}