*,
*::before,
*::after
{
 margin:0;
 padding:0;
 box-sizing:border-box
}

.yourdatayourchoicesyourrules { white-space:nowrap }

img, svg
{
 font-style:italic;
 background-repeat:no-repeat;
 background-size:cover;
 shape-margin:1rem;
 max-width:100%;
 height:auto;
 vertical-align:middle
}

body
{
 font-family:system-ui, sans-serif;
 font-size:1rem;
 line-height:1.25
}

@keyframes fadeIn
{
 from { scale:0; opacity:0 }
 to { scale:1; opacity:1 }
}

:root
{
 --primary:#9c38cc;
 --primary-on:#f7effb;
 --primary-light:#e2cbf2;
 --secondary:#67CC38;
 --secondary-on:#ffffff;
 --secondary-light:#daf2cb;
 --vlstack-main:#368EC4;
 --vlstack-on:#E9F3F9;
 --vlstack-light:#BCDAED;
}

.primary
{
 --background-color:var(--primary);
 --color:var(--primary-on);
 --link-color:var(--primary-on);
 --link-hover-color:var(--primary-light)
}

.secondary
{
 --background-color:var(--secondary);
 --color:var(--secondary-on);
 --link-color:var(--secondary-on);
 --link-hover-color:var(--secondary-light)
}

.vlstack
{
 --background-color:var(--vlstack-main);
 --color:var(--vlstack-on);
 --link-color:var(--vlstack-on);
 --link-hover-color:var(--vlstack-light)
}

a, a:visited, a:link, a:hover
{
 text-decoration:underline;
 color:var(--link-color)
}

a:hover
{
 text-decoration:none;
 color:var(--link-hover-color)
}

article
{
 min-height:100vh;
 background-color:var(--background-color);
 color:var(--color)
}

.primary + hr:has(+ .secondary)
{
 --linear-top-leading-color:var(--primary);
 --linear-bottom-trailing-color:var(--secondary)
}

.secondary + hr:has(+ .primary)
{
 --linear-top-leading-color:var(--secondary);
 --linear-bottom-trailing-color:var(--primary)
}

.vlstack + hr:has(+ .secondary)
{
 --linear-top-leading-color:var(--vlstack-main);
 --linear-bottom-trailing-color:var(--secondary)
}

.vlstack + hr:has(+ .primary)
{
 --linear-top-leading-color:var(--vlstack-main);
 --linear-bottom-trailing-color:var(--primary)
}

.primary + hr:has(+ .vlstack)
{
 --linear-top-leading-color:var(--primary);
 --linear-bottom-trailing-color:var(--vlstack-main)
}

.secondary + hr:has(+ .vlstack)
{
 --linear-top-leading-color:var(--secondary);
 --linear-bottom-trailing-color:var(--vlstack-main)
}

hr
{
 border:0;
 outline:0;
 height:75px;
 background:linear-gradient(to bottom right, var(--linear-top-leading-color) 0%, var(--linear-top-leading-color) 50%, var(--linear-bottom-trailing-color) 50%, var(--linear-bottom-trailing-color) 100%)
}

article > section
{
 padding-bottom:1rem
}

article > section > header > h1
{
 font-size:1.5rem;
 font-weight:bold;
 margin-bottom:0.75rem
}

article > section > header > h2
{
 font-size:1.25rem;
 font-weight:bold;
 margin-bottom:0.5rem
}

ul
{
 padding-block:0.5rem;
 list-style-position:inside;
 font-size:0.95rem
}

ul > li
{
 margin:0.25rem
}

body > footer
{
 text-align:center;
 padding:1rem;
 background-color:var(--background-color);
 color:var(--color)
}

body > footer > ul
{
 list-style:none
}

footer > ul > li
{
 margin:0 1rem;
 display:inline-block
}

.wrapped-width > *
{
 max-width:800px;
 width:100%;
 margin:0 auto;
 padding:20px
}

.titleWithLogo
{
 --title-font-size:5rem;
 --slogan-font-size:2rem;
 --title-margin-bottom:1rem;
 display:flex;
 flex-direction:column;
 height:100vh;
 padding-block:0.5rem
}

.titleWithLogo header
{
 flex:0 1 auto;
 text-align:center;
 margin-bottom:var(--title-margin-bottom)
}

.titleWithLogo header h1
{
 font-size:var(--title-font-size);
 text-shadow:2px 4px 8px rgba(0, 0, 0, 0.3)
}

.titleWithLogo img
{
 flex:1 1 auto;
 max-width:100%;
 max-height:100%;
 object-fit:contain
}

.screenshots
{
 text-align:center;
 display:flex;
 justify-content:center;
 align-items:center;
 margin-bottom:20px
}
.screenshots > img
{
 width:min(300px, 30%);
 height:auto;
 margin:0 10px;
 z-index:1;
 border:8px solid black;
 border-radius:40px
}

.screenshots > img:first-child { transform:rotate(-10deg); z-index:0 }
.screenshots > img:last-child { transform:rotate(10deg); z-index:0 }

#home h1 { animation:fadeIn 2s ease-in-out }
#home img { animation:fadeIn 1s ease-in-out }

.downloadAppStore { display:block; text-align:center }

@media only screen and (max-width: 768px)
{

.yourdatayourchoicesyourrules { display:block }

.wrapped-width > *
{
 max-width:100%;
 padding:10px
}

article { padding:0.5rem }
article > section { padding-bottom:0.5rem }
article > section > header > h1 { font-size:1.25rem }
article > section > header > h2 { font-size:1.1rem }

hr { height:20px }

.screenshots > img
{
 margin:0 5px;
 border-width:4px;
 border-radius:20px
}

}