1  /*
 2   * SPDX-FileCopyrightText: Amolith <amolith@secluded.site>
 3   *
 4   * SPDX-License-Identifier: Apache-2.0
 5   */
 6  
 7  .logo {
 8      width: 30px;
 9      height: 30px;
10      vertical-align: middle;
11      line-height: var(--pico-line-height);
12  }
13  
14  #hero {
15      display: flex;
16      align-items: center;
17      padding: 0 8vw;
18  }
19  
20  #hero hgroup {
21      flex: 1;
22      padding-right: 2rem;
23  }
24  
25  #hero > img {
26      max-height: 60vh;
27  }
28  
29  #hero > hgroup > p {
30      padding-top: 20px;
31      max-width: 15vw;
32  }
33  
34  /* Responsive adjustment */
35  @media (max-width: 1028px) {
36      #hero {
37          flex-direction: column;
38          text-align: center;
39      }
40  
41      #hero hgroup {
42          padding-right: 0;
43          margin-bottom: 2rem;
44      }
45  
46      #hero img {
47          max-width: 100%;
48      }
49  
50      #hero > hgroup > p {
51          max-width: 35vw;
52          margin: 0 auto;
53      }
54  }