web.css

@charset "utf-8";

@media screen and (min-width: 1026px) {
  html {
    font-size: 40% ;
  }
}
@media screen and (max-width: 1025px) {
   html {
    font-size: 25%;
   }
}


*{
  margin: 0;
  padding: 0;
}
main{
}



.header{
  position: fixed;
  top: 0;
  z-index: 20;
  left: 0;

  display: flex;

  width: 100%;
  height: 8rem;
  background-color: #E97575;
  transition: all 1s ease-out;
}
.header_content{
  font-size: 5.8rem;
}
.fixed-hide{
  top: -8.5rem;
}

.container{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
}


.main_img_1{
  margin: 3rem;
}.main_content_1{
  margin: 3rem;
  font-size: 5rem;
}.main_img_2{
  margin: 3rem;
}.main_content_2{
  margin: 3rem;
  font-size: 5rem;
}


.app_title{
    display: flex;
    font-size: 3rem;
    overflow: hidden;
    animation-duration: 3s;
    animation-name: slidein;
    margin-top: 9rem;
}
img{
    height: 10rem;
}

ul{
  list-style: none;
}
.footer{
      width: 100%;
      height: 40rem;
      background-color: #E97575;
      text-align: center;
      display: flex;
}
a,a:hover,a:visited{
  color: inherit;
}
li{
  margin-top: 2rem;
}
.footer_title{
  font-size: 6rem;
  width: 33%;
  margin-top: 10rem;
}
.footer_bigtitle{
  font-size: 4rem;
  width: 33%;
  margin-top: 5rem;
}
.footer_smalltitle{
  font-size: 3rem;
  width: 33%;
  margin-top: 5rem;
}



@keyframes slidein {
  from {
    margin-left: 20rem;
  }
 
  to {
    width: 100%;
  }
}