import { css } from 'lit';

// these styles can be imported from any component
// for an example of how to use this, check /pages/about-about.ts
export const styles = css`
  main {
    margin-top: 100px;
    padding: 12px;
  }



  #welcomeBar {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

  #welcomeCard,
    #infoCard {
      padding: 18px;
      padding-top: 0px;
    }

  sl-card::part(footer) {
      display: flex;
      justify-content: flex-end;
    }

  @media(min-width: 750px) {
      sl-card {
        width: 70vw;
      }
    }

  @media(min-width: 1000px) {
    sl-card {
      max-width: 70vw;
    }
  }

  @media (horizontal-viewport-segments: 2) {
      #welcomeBar {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
      }

`