body {
  margin: 0;
  left: 0;
  background-color: hsl(0% 0% 90%);
  font-family: "Public Sans", sans-serif;
}

.public-sans-200 {
  font-family: "Public Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}



.information{
  display: flex;
  flex-direction: column;
  padding: 2rem;
  width: 1000px;
}
.information-up{
  display: grid;
  align-items: center;
  justify-content: center;

}

.top-view p{
  color: hsl(0 0% 40%);
}
.top-view p:hover{
   color: hsl(238, 27%, 40%);
  
  text-decoration: underline  hsl(238, 27%, 40%);
}


@media (max-width: 600px) {
  .information{
  padding: 1rem;
  max-width: 350px;
}
  

}
.text-view{
    text-align: justify;
}
h1 {
  font-size: 2.3rem;
}
h2 {
  font-size: 1.7rem;
}
h3 {
  font-size: 1.2rem;
}
h4 {
  font-size: 1.2rem;
  font-weight: 400;
}
p {
  font-size: 1rem;
}
header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border-bottom: solid 1px hsl(238, 27%, 40%);
}
header h4{
  display: flex;
  align-items: center;
  justify-content: center;
  
}
header h2:hover{
  color: hsl(238, 27%, 40%);
  
}
header h4:hover{
  color: hsl(238, 27%, 40%);
  
  text-decoration: underline  hsl(238, 27%, 40%);
}
.header-sub {
  
  display: grid;
  align-items: center;
  justify-content: center;
}

.projects-sub-up {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: center;
  align-items: center;
}
.project-title-up {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.project-sub {
  display: grid;
  justify-content: center;
  background-color: hsl(238, 27%, 67%);
  margin: 3rem;
  padding: 2rem;
}
.project-sub h3{
  font-size: 1.8rem;
  line-height: 0.25rem;
  color: hsl(0 0% 6%);
}
.project-sub p{
  line-height: 0.25rem;
  color: hsl(0 0% 10%);
}
.project-sub:hover {
  scale: 101%;
}
.hero{
    display: grid;
    grid-template-columns: 1fr r;
     align-items: center;
     height: 80vh;
     background-color: hsl(238, 27%, 83%);
}
.hero-left h1{
  font-size: 4.5rem;
  line-height: 0.5rem;
}
.hero-left-link{
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;

}
.hero-left-link h4{
    background-color: hsl(238, 27%, 50%);
  color: hsl(238, 27%, 100%);
  width: 7rem;

}
.hero-left p{
  font-size: 2rem;
}
.hero-left {
    display: grid;
   
    justify-content: center;
}
.hero-right{
    display: grid;
    justify-content: center;
    
}
.hero-right-button{
    display: grid;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: hsl(0 0% 10%);
    border-radius: 10px;
}
@media (max-width: 900px) {
    .hero{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 1rem;
        text-wrap: wrap;
    }
    .hero-right img{
        display: none;
    }
    .hero-left h1{
    line-height: normal;
  }
  .projects-sub-up {
    grid-template-columns: 1fr;
  }
}