*{
   margin: 0;
   padding: 0;
}

body{
   overflow: hidden;
   background: #487CD3;
   transition: 0.2s ease opacity;

   font-family: "Montserrat", sans-serif;
}

.grid{
   display: flex;
   flex-direction: row;
   height: 100vh;
}

.content{
   display: flex;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   pointer-events: none; 
   user-select: none;   
   font-family: 'Rubik Mono One', sans-serif;
   flex: 1;
}
#title{
   color: white;
   font-size: 30px;
   font-weight: normal;
   text-align: center;
   min-height: 100px;
}
#logo{
   width: 140px;
   margin-bottom: 20px;

}

.stores{
   background-color: white;
   justify-content: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   color: #487CD3;
   font-size: 13px;
   flex: 1;
}
.stores .items{
   display: grid;
   width: 320px;
   grid-gap: 12px;
   grid-template-columns: 1fr 1fr;
}
.stores img{
   width: 100%;
   display: block;
}
.stores .links{
   margin-top: 18px;
   line-height: 23px;
   text-align: center;
}
.stores .links a{
   text-decoration: none;
   color: #333;
   font-weight: 600;
   font-size: 16px;
   display: block;
   padding: 6px 0px;
}
.stores .download{
   display: flex;
   flex-direction: row;
   margin-top: 24px;
   gap: 16px;
}
.stores .download img{
   width: 160px;
}
.texts{
   color: #0d1728;
   padding: 0px 70px;

}
.texts h1{
   text-transform: uppercase;
}
.texts h3{
   font-size: 16px;
   font-weight: 600;
   opacity: 0.3;
   margin-top: 8px;
}

@media (max-width: 800px){
   .grid{
      flex-direction: column-reverse;
   }

   .texts{
      text-align: center;
   }

   .content{
      flex: 0.5;
   }
   .content #title{
      min-height: unset;
      font-size: 24px;
   }
   .content #logo{
      width: 110px;
   }

   .stores .items{
      grid-template-columns: 1fr;
      width: 150px;
   }

   .stores .texts{
      padding: 0px 20px;
   }
}