* {
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}
iframe{
  width:700px; height:400px;
}
body,
ul,
li,
p {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-size: 1.2rem;
  font-family: Arial;
}

#tpw::after{
  content:'/';
  margin-left: 5px;
  opacity: 1;
  animation: pisca .7s infinite;
}
@keyframes pisca{
  0%, 100%{
    opacity: 0;
  }
  50%{
    opacity: 0;
  }
}
body {
  margin-bottom: 100px;
}

a {
  text-decoration: none;
  color: white;
}

h1 {
  text-align: center;
  margin-top: 100px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: white;
  text-decoration: none;
  font-family: sans-serif;
}

a:hover {
  background: gray;
  opacity: 90%;
}
footer{
  margin-top:-10px;
  background-color: black;
  color:white;
  text-align: center;
  margin-bottom:-90px;
}
hr{
  background:black;
}
.typer{
  margin-top:-80px;
}
.icons{
  width: 90px;
  margin-left:80px;
}
.icon-discord{
  margin-left:90px;
  margin-bottom: 15px;
}
.skills-icons{
  margin-left:160px;
}

#logo {
  font-size: 1.5rem;
  font-weight: bold;
}
#img-logo{
  height: 60px;
}
#nav-name{
  margin-top:25px;
  margin-left:300px;
}
#header {
  box-sizing: border-box;
  height: 70px;
  width: 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: black;
  position:fixed;
  top:0;
  opacity: 100%;
  z-index: 10000;
}

#menu {
  display: flex;
  list-style: none;
  gap: 0.5rem;
  opacity: 100%;
  margin-right: 0px;
  
}

#menu a {
  display: block;
  padding: 0.5rem;
}

#btn-mobile {
  display: none;
  color:#fff;
}
/* FIRST SECTION: SOBRE */
#me-descript{
  text-align:center;
}

#avatar {
  border-radius: 190px;
  margin-bottom: -10px;
}

}

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .5s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  
}

.zoom:hover {
  -ms-transform: scale(2.0); /* IE 9 */
  -webkit-transform: scale(2.0); /* Safari 3-8 */
  transform: scale(2.0); 
}

#chatbot-gif{
  height: 200px;
  width: 100px;
}
video{
  width:700px;
}


/* CSS FLEXBOX 1 */

.flex {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.flex > div {
  flex: 1 1 200px;
  margin: 10px;
}

/* CSS GRID 1 */
.contact{
  width: 100%;
}
.grid1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 800px;
  padding: 10px;
  margin: 0 auto;
  grid-gap: 20px;
}
.grid1 a {
  color:black;
}
.grid1 a:hover{
  color:gray;
  background:transparent;
  border-radius: 90px;
  opacity: 90%;
}

.grid1 > div:nth-child(n + 4) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  align-items: center;
}

.grid1 > div.anuncio {
  grid-column: 1;
  grid-row: 2 / 5;
  display: block;
}
.grid3-skills{

}
@media (max-width: 600px) {
  .grid1 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid1 > div:nth-child(n + 4) {
    display: block;
  }
  .grid1 > div.anuncio {
    grid-column: auto;
    grid-row: auto;
    order: -1;
  }
  .skills-icons{
    margin-left:40px;
  }
  .switch{
      position:fixed;
      z-index: 10000;
      right: 25px;
      top: 100px;
      border-radius:90px;
  }
}

/* CSS Grid 2 */

.grid2 {
  display: grid;
  grid-template-columns: 1fr 200px;
  grid-gap: 20px;
  max-width: 800px;
  padding: 10px;
  margin: 0 auto;
}

.sidebar > div {
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  iframe{
    width:360px; height:200px;
  }
  #avatar {
    border-radius: 190px;
    height: 300px;
  }
  #menu {
    display: block;
    position: absolute;
    width: 100%;
    top: 70px;
    right: 100px;
    background: black;
    transition: 0.6s;
    z-index: 1000;
    height: 0px;
    visibility: hidden;
    overflow-y: hidden;
  }
  #nav.active #menu {
    height: calc(100vh - 70px);
    visibility: visible;
    overflow-y: auto;
    opacity: 95%;
    margin-right: -100px;

  }
  #menu a {
    padding: 1rem 0;
    margin: 0 1rem;
    border-bottom: 2px solid #fff;
  }
  #btn-mobile {
    display: flex;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: none;
    background: none;
    cursor: pointer;
    gap: 0.5rem;
  }
  #hamburger {
    border-top: 2px solid;
    width: 20px;
  }
  #hamburger::after,
  #hamburger::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    margin-top: 5px;
    transition: 0.3s;
    position: relative;
  }
  #nav.active #hamburger {
    border-top-color: transparent;
  }
  #nav.active #hamburger::before {
    transform: rotate(135deg);
  }
  #nav.active #hamburger::after {
    transform: rotate(-135deg);
    top: -7px;
  }
  video{
    
    width:100%;
  }
}      

@media (max-width: 600px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: flex;
    overflow: scroll;
  }
  .sidebar > div {
    flex: 1 0 200px;
    margin: 0 10px;
  }
  #nav-name{
    visibility: hidden;
    width: 0px;
    height: 0px;
    margin:0;

  }
  #img-logo{
    height: 50px;
    width: 100%;
  }
  .icons{
    width: 50px;
    margin-left:50px;
  }
  .icon-discord{
    margin-left:35px;
  }
}

/* SECTION GRID 3 */

.grid3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  margin: 0 auto;
  max-width: 800px;
  padding: 10px;
}

.grid3-item:nth-child(1) {  margin-right: 10px;
  grid-row: 1 / 3;
}

.grid3-item {
  display: grid;
}

.grid3-item img {
  grid-column: 1;
  grid-row: 1/3;
  align-self: end;

}

.grid3-item p {
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  color: white;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}