@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Staatliches', cursive, 'Roboto', 'sans-serif'
}

html {
  height: 100%;
  font-family: 'Montserrat';
  display: grid;
  align-items: center;
  justify-items: center;

--bg: #e9e9e9;
--bg-panel: #ffffff;
--color-headings: #ffffff;

}

.header-container .header {
  background-color: var(--bg-panel);
  position: static;
  width: 100%;
  height: 100%;
  margin: 0;
  color: white;
}

:root {
  --title: rgb(51, 51, 51);
}

body {
  background-color: var(--bg);
}

/* dark mode */

.checkbox img {
  align-items: flex-end;
  display: flex;
}

.checkbox {
background-color: var(--bg);
display: flex;
justify-content: flex-end;
margin-top: 2vmax;
margin-left: 5vmax;
margin-right: 5vmax;
grid-template-columns: 80% auto;
grid-template-rows: auto auto;
grid-template-areas: 
    "title switch"
    "content content"
    
}
input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;

}

label {
margin-top: 3px;
cursor: pointer;
text-indent: -9999px;
width: 52px;
height: 25px;
background: grey;
float: right;
border-radius: 100px;
position: relative;
}

label::after{
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background-color: white;
border-radius: 90px;
transition: 0.3s;
}

input:checked + label {
background-color: var(--color-headings);
}

input:checked + label::after {
left: calc(100% - 5px);
transform: translateX(-100%);
}

label:active:after {
width: 45px;
}

/* main */

.container {
  width: 100%;
  flex: 1;

}

.container .avatar-url {
  margin-top: 5vmax;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* avatar */
.container .avatar-url img {
  width: 13.0rem;
  height: 13.0rem;
  object-fit: cover;

  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: .2rem;
  margin: 0;
  box-shadow: rgb(81, 82, 81);

  /* animations */

  animation-name: up;
  animation-duration: 3s;
  animation-name: up;
  animation-timing-function: ease-out;
}

@keyframes up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
  }
}

/* info */
.container .name h1 {
  font-size: 2.0rem;
  color: rgb(81, 82, 81);
  font-weight: 500;
  letter-spacing: 0.5rem;
  align-items: center;
  text-align: center;
  margin-top: 25px;
}

.container .name p {
  color: var(--title);
  letter-spacing: .2rem;
  margin-top: 1.5rem;
  text-align: center;
  font-size: 1.9rem;
  color: rgb(81, 82, 81);
}

/* icons */

.icons {
  margin-top: 1.9rem;
  text-align: center;
}

.icons i {
  margin: .2rem;
  padding: 1.9rem;
  font-size: 2.2rem;
  box-shadow: 0px 2px 8px -2px rgb(0, 0, 1, 22);
  border-radius: 80px;
  color: rgb(122, 120, 120)
}

.icons a {
  transition: 3s;
  animation-name: up;
  animation-duration: 3s;
  animation-name: down;
  animation-timing-function: ease-in-out;
}

@keyframes down {
  from {
    opacity: 0;
    transform: translateY(30px);

  }

  to {
    opacity: 1
  }
}

.icons a:hover {
  opacity: 70%;
  text-decoration: none;
}

.icons i:hover {
  opacity: 90%
}

.separador {
  opacity: 30%;
  width: 100%;
  height: 2px;
  background: rgb(150, 150, 150);
}


.last-post {
  width: 100%;
  text-align: center;
  align-items: center;
  background-color: black;
  justify-content: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr
}

.last-post .image {
  margin: 2.5rem;
}

.last-post .image img {
  width: 100%;
  height: 300px;
  margin-top: 1.0rem;
  align-items: center;
  justify-content: center;  
  object-fit: cover;
  border-radius: 15px;
  cursor: pointer;
  opacity: 80%;

}

.last-post .image img:hover {
  opacity: 100%;
}

.last-post .image p {
  margin-top: 2.0rem;
  margin-bottom: 1.0rem;
  color: rgb(108, 108, 112)
}

.last-post .image a {
  align-items: center;
  text-align: center;
  justify-content: center;
  text-decoration: none;
  margin-top: 1.0px;
  color: #3cc26f;

  transition: 1s;
}

.last-post .image a:hover {
  color: #1fcf63;
  border-bottom: 1px solid #1fcf63
}

.container .posts {
  align-items: center;
  text-align: center;
  margin: 2.0rem;
  font-size: 1.0rem;
  color: rgb(75, 65, 78);
}

.container .posts h1 {
  font-size: 1.9rem;
  letter-spacing: 0.7rem;
  color: rgb(63, 70, 64);

}

/* responsive template */

@media (max-width: 1000px) {
  .last-post {
    display: grid;
    grid-template-columns: 1fr
  }
}

@media(min-width: 300) {
  .icons {
    display: grid;
    grid-template-columns: 2fr;
    
  }

  .last-post {
    width: 40.0rem;
    height: 30.0rem;
    font-size: .4rem;
  }
}

.rodape {
  background: rgb(0, 0, 0);
  color: rgb(179, 179, 179);
  width: 100%;
  height: 10vmax;
  
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}

.rodape p {
  font-family: "arial", "sans-serif";
}