@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.cdnfonts.com/css/bogam');
@import url('https://fonts.cdnfonts.com/css/milathonique');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.cdnfonts.com/css/panamera');
@import url('https://fonts.cdnfonts.com/css/regen');
@import url('https://fonts.cdnfonts.com/css/helvetica-now-mt-micro');


:root{
    --glue-grey-0: #fff;
    --glue-grey-25: #f1f1f1;
    --glue-grey-50: #f8f9fa;
    --glue-grey-100: #f1f3f4;
    --glue-grey-200: #e8eaed;
    --glue-grey-300: #dadce0;
    --glue-grey-400: #bdc1c6;
    --glue-grey-500: #9aa0a6;
    --glue-grey-600: #80868b;
    --glue-grey-700: #5f6368;
    --glue-grey-800: #3c4043;
    --glue-grey-900: #202124;
    --glue-blue-50: #c6dcef;
    --glue-blue-100: #b3d1e9;
    --glue-blue-200: #a1c5e4;
    --glue-blue-300: #8eb9de;
    --glue-blue-400: #7baed9;
    --glue-blue-500: #68a2d3;
    --glue-blue-600: #5597ce;
    --glue-blue-700: #3086cd;
    --glue-blue-800: #356fa0;
    --glue-blue-900: #285378;
    --glue-green-50: #e6f4ea;
    --glue-green-100: #ceead6;
    --glue-green-200: #a8dab5;
    --glue-green-300: #81c995;
    --glue-green-400: #5bb974;
    --glue-green-500: #34a853;
    --glue-green-600: #1e8e3e;
    --glue-green-700: #188038;
    --glue-green-800: #137333;
    --glue-green-900: #0d652d;
    --glue-red-50: #fce8e6;
    --glue-red-100: #fad2cf;
    --glue-red-200: #f6aea9;
    --glue-red-300: #f28b82;
    --glue-red-400: #ee675c;
    --glue-red-500: #ea4335;
    --glue-red-600: #d93025;
    --glue-red-700: #c5221f;
    --glue-red-800: #b31412;
    --glue-red-900: #a50e0e;
    --glue-yellow-50: #fef7e0;
    --glue-yellow-100: #feefc3;
    --glue-yellow-200: #fde293;
    --glue-yellow-300: #fdd663;
    --glue-yellow-400: #fcc934;
    --glue-yellow-500: #fbbc04;
    --glue-yellow-600: #f9ab00;
    --glue-yellow-700: #f29900;
    --glue-yellow-800: #ea8600;
    --glue-yellow-900: #e37400;
    --glue-purple-100: #ea80fc;
    --glue-purple-900: #681da8;

    
    --gray-000: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #868e96;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #283032;
    --red: #e6320e;
    --pink: #e64980;
    --grape: #be4bdb;
    --purple: #704ef7;
    --indigo: #4c6ef5;
    --blue: #228be6;
    --cyan: #15aabf;
    --teal: #12b886;
    --green: #40c057;
    --yellow: #fab005;
    --orange: #fd7e14;
    --blue-300: #74c0fc;
    --blue-400: #4dabf7;
    --yellow-100: #fff9de;
    --title-font: 'Regen', sans-serif;
    --head-font: 'Helvetica Now MT Disp', sans-serif;
    --body-font: 'Open Sans', sans-serif;
    --body-font-size: 18px;
    --body-line-height: 1.7;
    --body-color: var(--glue-grey-900);
    --body-bg: var(--glue-grey-0);
    --link-color: var(--glue-blue-900);
    --link-hover-color: var(--glue-grey-900);
    --heading-color: var(--glue-grey-900);
    --border-color: var(--gray-300);
    --border-radius: 8px;
    --code-font: monospace;
    
    --code-bg: var(--gray-000);
    --spacer: 1rem;
    --spacer-2: calc(var(--spacer) * 1.5);
    --spacer-2half: calc(var(--spacer) * 2);
    --spacer-3: calc(var(--spacer) * 3);
    --masthead-title: var(--glue-grey-600);
    --masthead-title-link: var(--glue-grey-900);
    --masthead-small-link: var(--glue-grey-800);
    --masthead-border: var(--glue-grey-200);
    --message-text: var(--glue-grey-900);
    --message-background: #f1f3f4;
    }
    
    img.x-large{
        display:block;
        max-width:220%;
        margin-left:-60%;
        border-radius:var(--border-radius);
        margin-top:var(--spacer-3);
        margin-bottom:var(--spacer-3);
    }
    
    @media only screen and (max-width: 1440px){
        img.x-large{
            max-width:140%;
            margin-left:-20%;
        }
    }
    
    @media only screen and (max-width: 1280px){
        img.x-large{
            max-width:100%;
            margin-left:0;
        }
    }
    
    img.large{
        display:block;
        max-width:180%;
        margin-left:-40%;
        border-radius:var(--border-radius);
        margin-top:var(--spacer-3);
        margin-bottom:var(--spacer-3);
    }
    
    @media only screen and (max-width: 1280px){
        img.large{
            max-width:100%;
            margin-left:0;
        }
    }
    
    .intro-img{
        height: 10rem;
    }

    .section-hero {
        border-radius: 40px;
        padding: 1.5rem;
        align-items: center;
        width: 100%;
      }
      
      .hero {
        
        max-width: max-content;
        height: fit-content;
        border-radius: 40px;
        grid-template-columns: 1fr 1fr;
        padding: 1rem;
        margin: 0 auto;
        align-items: center;
        
      }
      
      .hero-text-box{
        align-items: center;
      }
      
      .hero-description {
        font-size: 1.4rem;
        line-height: 1.2;
        text-align: center;
        margin-bottom: 40px;
        margin-top: 20px;
      }

      @media only screen and (max-width: 960px){
        .hero{
            padding: 0;
        }

        .hero-description{
            font-size: 1.1rem;
            margin-bottom: 20px;
        }

        .intro-img{
            height: 8rem;
        }
    
      }
      
      .hero-img-box {
        grid-column: 2/3;
        grid-row: 1 / 3;
      }
      
      .hero-img {
        width: 100%;
      }
      
      
      
      .delivered-meals {
        display: flex;
        gap: 1rem;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
      }
      
      .delivered-imgs{
        display: flex;
        align-items: top;
      }

      .delivered-imgs img {
        width: 4.8rem;
        border-radius: 50%;
        margin-right: -1.6rem;
        outline: #fdf2e9 solid 3px;
      }
      
      .delivered-text {
        font-size: 1.8rem;
        font-weight: 600;
        height: 4.8rem;
      }
      
      .delivered-text span {
        color: var(--gray-000);
      }




    img{
        display:block;
        max-width:100%;
        height: max-content;
        border-radius:var(--border-radius);
        margin-top:var(--spacer-3);
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    
    figcaption{
        margin-top: 0.5rem;
        margin-bottom:var(--spacer-2);
        color:var(--gray-600);
        font-size:0.8em;
        text-align: center;
    }
    
    *{
        box-sizing:border-box;
    }
    
    

    .button-grid{
        display: flex;
        flex-direction: row;
        gap: 30px;
        justify-content: center;
         align-items: center;
         margin-bottom: 20px;
         margin-top: 20px;
         
    }

    button{
        font-family: var(--body-font);
    }

    button:hover {
        transform: scale(1.02);
    }

    button:active {
        
        transform: translateY(4px);
    }

    

    .primary{
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0.8rem 1.5rem;
    
    background: var(--glue-blue-700);
    color: var(--glue-grey-0);
    font-size: 1em;
    cursor: pointer;
    border-radius: var(--border-radius);
    }

    .primary:hover{
        
        background-color: var(--glue-blue-900);
        
    }

    
    .secondary{
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid var(--glue-grey-900);
        padding: 0.8rem 1.5rem;
        
        background: var(--glue-grey-0);
        color: var(--glue-grey-900);
        font-size: 1em;
        cursor: pointer;
        border-radius: var(--border-radius);
        }

    .secondary:hover{
        background-color: var(--glue-grey-800);
        color: var(--glue-grey-0);

    }

    .special{
        appearance: none;
        -webkit-appearance: none;
        padding: 0.8rem 1.5rem;
        color: var(--glue-grey-0);
        background: var(--glue-grey-900);
        font-size: 1em;
        cursor: pointer;
        border-radius: var(--border-radius);
        }

    .special:hover{
        background-color: var(--glue-grey-800);
        color: var(--glue-grey-0);

    }
    
    @media only screen and (max-width: 960px){
        .button-grid{
            display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
         align-items: center;
           flex-basis: 0;
           flex-grow: 1;
        }
        button{
            width: 80%;
        }

        .primary{
            font-size: 1em;
            width: 80%;
        }

        .secondary{
            font-size: 0.9em;
            width: 100%;
        }

        .special{
            font-size: 0.9em;
            width: 100%;
        }
    }
    
    
    body{
        margin:0 0 3rem 0;
        font-family:var(--body-font);
        font-size:var(--body-font-size);
        line-height:var(--body-line-height);
        color:var(--body-color);
        
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
        
    }
    
    

    
    
   
    
    mark{
        padding:.15rem;
        background-color:var(--yellow-100);
        border-radius:.125rem;
    }
    
    h1,h2,h3,h4,h5,h6{
        font-weight: 700;
        line-height:1.25;
        -webkit-font-smoothing:antialiased;
        color:var(--heading-color);
        text-align: center;
        
    }
    
    h1{
        font-size:2.5em;
        width:80%;margin-bottom:2rem;
        
    }
    
    @media only screen and (max-width: 960px){
        h1{width:100%;}
    }
    
    h2{
        font-size:1.85em;
        margin-top:4rem;
        margin-bottom:1.5rem;
    }
    
    h3{
        font-size:1.5em;
        margin-top:3rem;
        margin-bottom:1.25rem;
    }
    
    h4{
        font-size:1.2em;
        margin-top:1.75rem;
        margin-bottom:1rem;
    }
    
    h5{
        margin-bottom:-0.5rem;
        color:var(--gray-600);
        font-weight:normal;
    }
    
    p{
        margin-top:0;
        margin-bottom:1rem;
    }
    
    ul,ol,dl{
        margin-top:1.5rem;
        margin-bottom:1rem;
    }
    
    li{
        margin-bottom: 0.5rem;
    }
    
    dt{
        font-weight:bold;
    }
    
    dd{
        margin-bottom:.5rem;
    }
    
    hr{
        position:relative;
        margin: 2rem 0;
        border:0;
        border-top:1px solid var(--border-color);
    }
    
    abbr{
        font-size:85%;
        font-weight:bold;
        color:var(--gray-600);
        text-transform:uppercase;
    }
    
    abbr[title]{
        cursor:help;
        border-bottom:1px dotted var(--border-color);
    }
    
    .quote{
        
        font-style:italic;
        color:var(--gray-600);
       
    }
    
    blockquote p:last-child{
        margin-bottom:0;
    }
    
    figure{
        margin:0;
    }
    
    a[href^="#fn:"],a[href^="#fnref:"]{
        display:inline-block;
        margin-left:.1rem;
        font-weight:bold;
    }
    
    .footnotes{
        margin-top:2rem;
        font-size:85%;
        text-decoration: none;
    }
    
    .lead{
        font-size:1.25rem;
        font-weight:300;
    }
    
    .highlight .hll{background-color:#ffc}
    
    .highlight .c{color:#999}
    
    .highlight .err{color:#a00;background-color:#faa}
    
    .highlight .k{color:#069}
    
    .highlight .o{color:#555}
    
    .highlight .cm{color:#09f;font-style:italic}
    
    .highlight .cp{color:#099}
    
    .highlight .c1{color:#999}
    
    .highlight .cs{color:#999}
    
    .highlight .gd{background-color:#fcc;border:1px solid #c00}
    
    .highlight .ge{font-style:italic}
    
    .highlight .gr{color:#f00}
    
    .highlight .gh{color:#030}
    
    .highlight .gi{background-color:#cfc;border:1px solid #0c0}
    
    .highlight .go{color:#aaa}
    
    .highlight .gp{color:#009}
    
    .highlight .gu{color:#030}
    
    .highlight .gt{color:#9c6}
    
    .highlight .kc{color:#069}
    
    .highlight .kd{color:#069}
    
    .highlight .kn{color:#069}
    
    .highlight .kp{color:#069}
    
    .highlight .kr{color:#069}
    
    .highlight .kt{color:#078}
    
    .highlight .m{color:#f60}
    
    .highlight .s{color:#d44950}
    
    .highlight .na{color:#4f9fcf}
    
    .highlight .nb{color:#366}
    
    .highlight .nc{color:#0a8}
    
    .highlight .no{color:#360}
    
    .highlight .nd{color:#99f}
    
    .highlight .ni{color:#999}
    
    .highlight .ne{color:#c00}
    
    .highlight .nf{color:#c0f}
    
    .highlight .nl{color:#99f}
    
    .highlight .nn{color:#0cf}
    
    .highlight .nt{color:#2f6f9f}
    
    .highlight .nv{color:#033}
    
    .highlight .ow{color:#000}
    
    .highlight .w{color:#bbb}
    
    .highlight .mf{color:#f60}
    
    .highlight .mh{color:#f60}
    
    .highlight .mi{color:#f60}
    
    .highlight .mo{color:#f60}
    
    .highlight .sb{color:#c30}
    
    .highlight .sc{color:#c30}
    
    .highlight .sd{color:#c30;font-style:italic;}
    
    .highlight .s2{color:#c30}
    
    .highlight .se{color:#c30}
    
    .highlight .sh{color:#c30}
    
    .highlight .si{color:#a00}
    
    .highlight .sx{color:#c30}
    
    .highlight .sr{color:#3aa}
    
    .highlight .s1{color:#c30}
    
    .highlight .ss{color:#fc3}
    
    .highlight .bp{color:#366}
    
    .highlight .vc{color:#033}
    
    .highlight .vg{color:#033}
    
    .highlight .vi{color:#033}
    
    .highlight .il{color:#f60}
    
    .css .o,.css .o+.nt,.css .nt+.nt{color:#999}
    
    code,pre{
        font-family:var(--code-font);
    }
    
    code{
        font-size:85%;
    }
    
    pre{
        display:block;
        margin-top:0;
        margin-bottom:var(--spacer-3);
        overflow:auto;
    }
    
    .highlight{
        padding:var(--spacer);
        margin-bottom:var(--spacer);
        background-color:var(--code-bg);
        border-radius:var(--border-radius);
    }
    
    .highlight pre{margin-bottom:0}
    
    .highlight .highlight{padding:0}
    
    .rouge-table{margin-bottom:0;font-size:100%}
    
    .rouge-table,.rouge-table td,.rouge-table th{border:0}
    
    .rouge-table .gutter{vertical-align:top;user-select:none;opacity:.25}
    
    .gist .markdown-body{padding:15px !important}
    
    video {
        border: 4px groove olive;
        display: flex;
        flex-direction: row;
        border-radius: 15px;
        background: white;
        padding: 2%;
        justify-content: center;
         align-items: center;
    }
    
    @media only screen and (max-width: 960px){
        video{
            width: 100%;
            
        }
    }
    .container{
        width: 90%;
        padding-left:var(--spacer-2);
        padding-right:var(--spacer-2);
        margin-left:auto;
        margin-right:auto;
        
    }

   
    
    @media only screen and (max-width: 960px){
        .container{
            width: 100%;
            
        }
    }
    
    
    header{
        margin-bottom:var(--spacer-3);
        justify-content: center;
    }
    
    @media only screen and (max-width: 960px){
        header{
            margin-bottom:var(--spacer);
            
        }
    }
    
    

    .masthead-title{
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-align-items: center;
    }

    .head{
        flex-grow: 1;
        text-align: center;
        font-family: var(--head-font)
    }
    
    footer{
        color:var(--gray-600);
        bottom:0;
        margin-top:var(--spacer-3);
        margin-bottom:var(--spacer-2);

    }
    
    a{
        text-decoration: none;
        color: var(--glue-grey-900);

    }

    .foot{
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-align-items: center;

    }

    .social{
        flex-grow: 1;
        text-align: center;
        font-family: var(--head-font);
        text-decoration: none;
        color: var(--glue-grey-900);

        
    }

   

    

    .masthead{
        margin-bottom:var(--spacer-3)
    }
    
    @media only screen and (max-width: 960px){
        .masthead{
            margin-bottom:var(--spacer)
        }
    }
    
    div.intro{
        margin-bottom:var(--spacer-3)
    }
    
    h4.masthead-title{
        color:var(--masthead-title);
        padding-bottom:var(--spacer-2);
        margin-bottom:0;
        margin-top:var(--spacer-3)
    }
    
    h4.masthead-title a{
        color:var(--masthead-title);
        text-decoration:none;
        line-height:1 !important
    }
    
    h4.masthead-title a:hover{
        color:var(--glue-grey-900);
    }
    
    h4.masthead-title .small a{
        color:var(--masthead-small-link);
        font-weight:normal;
        font-size:0.9em
    }
    
    h4.masthead-title .small a:hover{
        color:var(--link-color)
    }
    
    .post-detail {
        max-width: 35rem;
        align-content: center;
      }
    
      .post-detail-content {
        display: block;
        border-radius: 10px 10px 40px 0;
        padding: 1rem 1.5rem;
        font-weight: 600;
        line-height: 1rem;
        font-size: 1rem;
      }

    .info{
        
        margin-top: 1rem;
        background: var(--glue-grey-50);
        color: var(--glue-grey-900);
        border-radius: 10px;
        padding: 1rem 1rem;
        font-weight: 400;
        line-height: 1.2rem;
        
        font-size: 1rem;
    }

    .page li+li,.post li+li{
        margin-top:.25rem
    }
    
    .page-title{
        text-align: center;
        width: 100%;
       font-weight: 800;
       font-size: 6em;
       font-family: var(--title-font);
        line-height: 1.2;
        text-align:center;
        letter-spacing: -4px;
        background: -webkit-linear-gradient(rgb(0, 0, 0), rgb(114, 114, 114));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
    }

    @media only screen and (max-width: 960px){
        .page-title{
            font-size: 2.8em;
            letter-spacing: -2px;
            line-height: 1;
        }
        
    }


    

    .sub-title{
        text-align:center; 
        color: var(--glue-grey-900);
        margin: 1.1em;
        text-transform: none;
        font-weight: 400;
        font-size: 1.3em;
        
    }
    @media only screen and (max-width: 960px){
        
        .sub-title{
            font-size: 1em;
        }
    }

    .sub-post{
        color: var(--glue-grey-700);
        margin-top: -10px;
        text-transform: none;
        font-weight: 400;
        font-size: 0.8em;
    }

    .sub-head{
        text-align: center;
        width: 100%;
       font-weight: 700;
       margin-top: 50px;
       font-size: 2.5em;
       font-family: var(--head-font);
        line-height: 1;
        text-align:center;
        letter-spacing: -2px;
        margin-bottom: 50px;
    }

    .more-text{
        text-align: center;
        align-items: center;
        font-size: 1em;
        font-weight: 400;
    }
    @media only screen and (max-width: 960px){
        .sub-head{
            font-size: 1.5em;
            letter-spacing: 0px;
            margin-top: 50px;
        }
        
       
    }

    .flex-contain-1{
        display: flex;
        
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .flex-contain-1 a{
        width: 100%;
    }

    .flex-1{
        display: flex;
        margin: 10px;
        width: 100%;
        border: 1px solid var(--glue-grey-25);
        border-radius: 40px;
        flex-direction: row;
        align-items: center;
        padding: 10px;
        gap: 2em;
    }



    .flex-1:hover{
        transform: scale(1.05);
    }
    
    .flex-1 img{
            width: 30em;
            margin-top: 0;
            border-radius: 30px;
        }


        

    .flex-2{
        display: flex;
        flex-direction: column;
        align-items: baseline;
        align-content: flex-start;
        gap: 2em;
        width: 100%;
    }

    .flex-3{
        display: flex;
        flex-direction: row;
        align-items: baseline;
        width: 100%;
        gap: 0.75em;
        flex-basis: 0;
    }
    
    

    .flex-4{
        display: flex;
        flex-direction: column;
        align-items: baseline;
        text-align: left;
        gap: 1em;
        flex-wrap: wrap;
        flex-basis: 0;
        flex-grow: 1;
        width: 100%;
    }

    .flex-4 h4{
        font-size: 1.5rem;
        margin: 0;
    }

    .flex-4 h6,h5{
        margin: 0;
        text-align: left;
        font-size: 0.9rem;
    }

    @media only screen and (max-width: 1200px){
        .flex-3{
            display: none;
        }

        .flex-1{
            flex-direction: column;
            align-items: center;
            text-align: left;
            gap: 0.5em;
            padding: 20px;
        }

        .flex-1 img{
            width: 100%;
        }

        .flex-4 h4{
            font-size: 1.2em;
        }
    }


    .post-title{
        width: 100%;
        text-align: left;
    }
    .page-title,.post-title{
        color:var(--heading-color)
    }
    
    .page-title,.post-title{
        margin-top:var(--spacer);
        margin-bottom:var(--spacer);
    }
    
    .post-title-list{
        margin-bottom:var(--spacer)
    }
    
    .post-date{display:block;margin-top:-.5rem;margin-bottom:var(--spacer);color:var(--gray-600)}.related{margin-top:var(--spacer-3);padding-top:var(--spacer-3);padding-bottom:var(--spacer-2);margin-bottom:var(--spacer-3);border-top:1px solid var(--border-color)}.related-posts{padding-left:0;list-style:none}.related-posts h3{margin-top:0}.related-posts a{text-decoration:none}.related-posts a small{color:var(--gray-600)}.pagination{display:flex;margin:0 -1.5rem var(--spacer);color:var(--gray-500);text-align:center}.pagination-item{display:block;padding:var(--spacer);text-decoration:none;border:solid var(--border-color);border-width:1px 0}.pagination-item:first-child{margin-bottom:-1px}a.pagination-item:hover{background-color:var(--border-color)}@media (min-width: 30em){.pagination{margin:var(--spacer-3) 0}.pagination-item{float:left;width:50%;border-width:1px}.pagination-item:first-child{margin-bottom:0;border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.pagination-item:last-child{margin-left:-1px;border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}}
    

    .text-decor{
        text-decoration: none;
    }
    
    .banner{
        padding:0;
        margin-top:-1em;
        margin-bottom:var(--spacer-2half);
        color:var(--message-text);
        background-color:var(--message-background);
        border-radius:var(--border-radius);
        
    }

    .message{
        padding:var(--spacer) var(--spacer-2);
        margin-top:-1em;
        margin-bottom:var(--spacer-2half);
        color:var(--message-text);
        background-color:var(--message-background);
        border-radius:var(--border-radius)
    }
    
    #markdown-toc{padding:var(--spacer-2) var(--spacer-3);margin-bottom:var(--spacer-2);border:solid var(--border-color);border-width:1px 0}
    
    
    #markdown-toc::before{display:block;margin-left:calc(var(--spacer-3) * -1);margin-bottom:1.5rem;content:"Table of contents";font-size:85%;font-weight:500}
    
    .colors{display:grid;grid-template-columns:max-content 1fr}
    
    .colors dt{width:3rem;height:3rem;border-radius:var(--border-radius);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)}
    
    .colors dd{margin-left:var(--spacer)}

/*# sourceMappingURL=styles.css.map */

.container-1 input{
    display: none;
}

.container-1{
    width: 100%;
    /* background-color: lightgreen; */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: flex-start;
    margin: auto;
    min-height: 30em;
    padding: 0em 1em 1em 1em;
    box-sizing: border-box;
}

/* Card Styling */
.card-div{
    width: 18em;
    min-height: 10em;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    background-color: white;
    margin: 0.6em;
    margin-top: 4rem;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: transform 0.2s ease-in-out;
}

/* ======== General styling of all cards and heart divs ========== */
.img-div{
    width: 100%;
    height: 3em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
    z-index: 1;
    border-radius: 10px;
}

.img-div img{
    transform-origin: bottom;
    transform: translateY(7.5%);
    transition: transform 0.3s ease-in-out;
}



/* Cowin image background*/
.cowin-img-div{
    background-color: #23366C;
}

.cowin-img-div img{
    width: 65%;
    transform: translateY(7.5%);
    
}

/* sportby image background*/
.sportby-img-div{
    background-color: #C3513C;
}

.sportby-img-div img{
    width: 55%;
    transform: translateY(7.5%);
    
}


/* mercer image background*/
.mercer-img-div{
    background-color: #002C77;
}

.mercer-img-div img{
    width: 65%;
    transform: translateY(15%);
    
}

/* ea image background*/
.ea-img-div{
    background-color: #5032D5;
}

.ea-img-div img{
    width: 75%;
    transform: translateY(7.5%);
    
}


/* ======== text Container Styling general ======== */

.text-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    
    padding: 0 1.5em;
    padding-top: 7em;
    padding-bottom: 1em;
    box-sizing: border-box;
    color: white;
}

.text-container .item-name,
.text-container .description{
    margin: 0.25em 0;
    text-align: left;
}

.text-container .item-name{
    font-size: 1.5em;
    font-weight: 700;
    
}

.text-container .description{
    font-size: 1em;
    font-weight: 500;
    line-height: 1.4rem;
}



/* === Details and more div  ===== */
.details{
    
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0.25em 0 1em 0;
}

.details-more{
    display: flex;
    flex-direction: column;
    text-align: left;
}

.read-time{
    font-size: 1rem;
    font-weight: var(--pricing-font-weight);
    color: var(--previous-price-text-color);
    text-decoration: none;
    text-align: left;
}

.tags{
    color: var(--current-price-text-color);
    font-size: 1rem;
    font-weight: var(--pricing-font-weight);
    background-color: white;
    margin: 0;
}

.details{
    width: 100%;
}


/* ====== Hover effects ======= */
.card-div:hover .img-div img{
    transform: translateY(7.5%) scale(1.1);
}

.card-div:hover{
    transform: translate(0, -10px);
}

.testimonial {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: row;
    width: 100%;
  }

  .test{
    flex-grow: 1;
    max-width: 25em;
  }

  @media only screen and (max-width: 960px){
    .test{
        max-width: 40em;
        margin-right: 0px;
    }
}

  .test-content1 {
    display: block;
    background: var(--glue-grey-800);
    border-radius: 10px 10px 40px 0;
    padding: 20px;
    margin-bottom: 5px;
  }

  .test-content2 {
    display: block;
    background: var(--glue-grey-50);
    border-radius: 10px 10px 0 40px;
    padding: 20px;
    margin-bottom: 5px;
  }

  .test-content3 {
    display: block;
    background: var(--glue-grey-800);
    border-radius: 10px 10px 40px 0;
    padding: 20px;
    margin-bottom: 5px;
  }

  .test-content4 {
    display: block;
    background: var(--glue-grey-50);
    border-radius: 10px 10px 0 40px;
    padding: 20px;
    margin-bottom: 5px;
  }

  .test-text1{
    color: var(--glue-grey-50);
  }

  .test-text2{
    color: var(--glue-grey-800);
  }

  .test-text3{
    color: var(--glue-grey-50);
  }

  .test-text4{
    color: var(--glue-grey-800);
  }

  .author1{
      text-align: left;
      font-weight: 600;
  }
  .author2{
    text-align: right;
    font-weight: 600;
  }


  /* play */

  .container-play input{
    display: none;
}

.container-play{
    
    /* background-color: lightgreen; */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: flex-start;
    margin: auto;
    min-height: 15em;
    width: 100%;
    box-sizing: border-box;
}

  .play-div{
    width: 13em;
    height: 9em;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    margin-right: 1em;
    margin-bottom: 1.1em;
    margin-left: 1em;
    box-sizing: border-box;
    border-radius: 10px;
    
    transition: transform 0.2s ease-in-out;
}

.play-div:hover{
    transform: scale(1.1);
}

.play-div img{
    margin-top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}




  
  .img-slide {
    width: 100px;
    align-items: center;
    animation: scroll 20s linear infinite;
    max-width: max-content;
    filter: grayscale(100%);
  }
  
  .slide-track {
    width: 100%;
    display: flex;
    gap: 3em;
    overflow: hidden;
    align-items: center;
  }
  
  .slider {
    margin-bottom: 40px;
  }
  
  @keyframes scroll {
    0% {transform: translateX(0);}
    100% {transform: translatex(-1000%)}
  }