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

html body {
  margin: 0;
  justify-content: center;
  width: 100%;
  height:100%; 
  background-image: repeating-linear-gradient(to bottom right,rgb(16,43,106, 1), rgb(16,43,106, 1),rgba(16,43,106, 0.9));
  background-repeat: no-repeat;
  min-height: 100vh;
  min-width: 100vw;
  overflow-y: hidden;
  overflow-x: hidden;
  }

.nav-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10%;
}

.nav-logo1{
  margin-top: 2vw;
  height: 10vw;
  width: 20vw;
}

.container {
  display: flex;
  width: 100%;
  height: 20vw;
  align-items: center;
  justify-content: center;
}

.ipcontainer {
  margin-top: 2vw;
  padding-top: 4vw;
  gap: 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  width: 45vw;
  height: 20vw;
  background-image: repeating-linear-gradient(to bottom right,rgba(35, 87, 116, 1),rgba(16, 44, 106, 1));
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: 2vw;
  box-shadow: 0vw 0vw 2vw rgba(255, 255, 255, 0.199);
}

.ipcontainer h1 {
  color: white;
}

.ipcontainer p {
  color: white;
}
.title {
  font-size: 1.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 20%;

}

.ip4 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10%;
  font-size: 1.5vw;
}

.ip4 img{
  height: 2vw;
  width: 2vw;
}

.ip4:hover {
  transform: scale(1.05);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.ip6 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10%;
  font-size: 1.5vw;
}

.ip6 img{
  height: 2vw;
  width: 2vw;
}

.ip6:hover {
  transform: scale(1.05);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.logos {
  display: flex;
  align-items:center;
  align-self: center;
  justify-content: center;
  gap: 2vw;
  width: 100%;
  height: 30%;
}

.logo{
  width: 3vw;
  height: 3vw;
  color: white;
  fill: white;
}
.logo:hover {
  transform: scale(1.1);
  transition: opacity 0.3s ease-out, transform 0.2s ease-out;
}

.footer {
  color: white;
  text-align: center;
  padding: 1.5vw 0;
  width: 100%;
  position: fixed;
  bottom: 0;
  font-size: 1.3vw;
}


/*Tela 1100px*/
@media only screen and (max-width: 1100px) and (min-height: 1020px){

html body {
  overflow-y: hidden;
  height: 90%;
}

.nav-logo1{
  margin-top: 10vw;
  height: 25vw;
  width: 55vw;
}

.container {
  padding-top: 10vw;
  width: 100%;
  height: 40vw;
}

.ipcontainer {
  margin-top: 2vw;
  gap: 1vw;
  width: 90vw;
  height: 40vw;
}

.title {
  font-size: 3.0vw;
  width: 100%;
  height: 40%;
}

.ip4 {
  font-size: 4.0vw;
}

.ip4 img{
  height: 5vw;
  width: 5vw;
}

.ip6 {
  font-size: 3.5vw;
}

.ip6 img{
  height: 5vw;
  width: 5vw;
}

.logo{
  width: 6vw;
  height: 6vw;
}
.footer {
  position: fixed;
  bottom: 4vw;
  padding: 3.5vw 0;
  font-size: 3.3vw;
}

}

/*Tela 550px*/
@media only screen and (max-width: 550px) {
  .nav-logo1{
    margin-top: 10vw;
    height: 35vw;
    width: 65vw;
  }

  .container {
    padding-top: 10vw;
    height: 80vw;
  }

  .ipcontainer {
    margin-top: 8vw;
    gap: 3vw;
    width: 95vw;
    height: 70vw;
  }

  .title {
    font-size: 5.0vw;
    width: 100%;
    height: 30%;
  }
  
  .ip4 {

    font-size: 4.0vw;
  }

.ip4 img{
  height: 8vw;
  width: 8vw;
}
  
  .ip6 {
    font-size: 3.5vw;
  }

.ip6 img{
  height: 8vw;
  width: 8vw;
}

  .logos {
    gap: 10vw;
  }
  .logo{
    width: 11vw;
    height: 11vw;
  }
  .footer {
    bottom: 4vw;
    padding: 4.5vw 0;
    font-size: 4.8vw;
  }

}