@charset "UTF-8";

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

hyml {
    scroll-behavior: smooth;
}

.container {
  display: grid;
  grid-template-rows: 100px 60px 1fr 70px;
  grid-template-columns: 1fr, 200px;
  gap: 4px;
  width: 100vw;
  height: 100vh;
}

.item {
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(255, 170, 67);
  display: flex;
  align-items: center;
  justify-content: center;
}

.topo {
  grid-area: 1 / 1 / 2 / 4;
}

.menu {
  grid-area: 2 / 1 / 2 / 4;
}

.principal {
  grid-area: 3 / 1 / -2 / 3;
}

.secundario {
  grid-area: 3 / 3 / -2 / 4;
}

.rodape {
  grid-area: 4 / 1 / -1 / 4;
}

.topo:hover {
  background-color: rgba(222, 150, 55, 0.967);
  transition: all 0.5s;
  color: rgb(67, 67, 67);
}