@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Platypi:ital,wght@0,300;1,300&display=swap');

@media (min-width:1200px),(orientation: portrait) {
    body {
		width:936px !important;
	}
} 
@media (max-width:1024px) { /* used to be 1024px */
	html {
		font-size:17px !important;
	}
	body {
		width:80% !important;
	}
}
@media (max-width:940px) { /* used to be 1024px */
	html {
		font-size:20px !important;
	}
    body {
      width:100% !important;
    }
    h1 {
    	font-size:7.5em !important;
    }
    h2 {
    	font-size:2.5em !important;
    	margin-top:0.3em !important;
    }
    section, header .description {
      	padding-left:12% !important; /* NEW */
      	padding-right:12% !important; /* NEW */
		flex-direction: column-reverse !important;
		gap: 10px !important;
    }
    section .description, section picture {
    	width:100% !important;
    }
    header {
    	margin-top:4em !important;
    }
    header section {
		margin-bottom:1em !important;
	}
    header picture {
    	width:55% !important;
    }
    header div {
    	align-self:stretch !important;
		flex-basis:auto !important;
	}
	header h3 {
		font-size:1.5em !important;
	}
	main {
		margin-bottom:0 !important;
	}
    footer {
    	padding-left:12% !important; /* NEW */
      	padding-right:12% !important; /* NEW */
    }
    footer picture {
		flex-basis: 12% !important;
	}
}
@media (max-width:600px) { /* used to be 720px */	
    h1 {
    	font-size:5.2em !important;
    }  
    section, header .description {
      	padding-left:24px !important;
      	padding-right:24px !important;
    }   
    footer {
    	padding-left:24px !important;
      	padding-right:24px !important;
    }
}

html {
	background-color:#fff;
	font-size:20px;
}
body {
	color:#222;
	font-family: "Platypi", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
  	margin:auto;
  	width:936px;
	word-wrap: break-word;
}
h1, h2 {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
}
h1 {
	margin-top:0.4em;
	margin-bottom:0em;
}
h2 {
	font-size:3.4em;
	line-height:0.92em;
	margin-bottom:0.1em;
}
h3 {
	font-size:1em;
	font-weight:400;
	font-style:italic;
	margin-top:0;
	margin-bottom:1.4em;
	color:#4e4e4e;
}
p {
	line-height:1.4em;
	margin:0 auto;
	padding-bottom:1.4em;
	color:#4e4e4e;
}
header {
	margin-top:8em;
}
main {
  position:relative;
  margin-top:3em;
  margin-bottom:1em;
  overflow:hidden;
}
section {
  margin-bottom:8em;
  display:flex;
  justify-content: space-around; /* come back to this with breakpoints issue if changed to space-between */
  align-items: center;
  gap: 44px;
}
section .description, section picture {
	flex-basis: 50%;
}
header section {
	margin-bottom:2em;
}
header div {
	flex-basis:600px;
}
header picture {
	border-radius:400px;
}
header h1 {
	margin-top:0;
}
header h3 {
	font-size:2em;
	font-style:normal;
	margin-bottom:0.5em;
}
a, a:link, a:visited {
	color:inherit;
  text-decoration-color:rgba(0,0,0,0.4);
}
a:hover {
  text-decoration-style: underline;
}
a:active {
  opacity:0.6;
}
picture {
  display:grid;
  margin:0;
  padding:0;
  border-radius:8px;
  overflow:hidden;
}
picture img, picture video {
  /*grid-area:1/1/1/1;*/
  width:100%;
}
footer {
	display:flex;
	justify-content: center;
	align-items:center;
	gap:8px;
	margin-bottom: 3em;
}
footer picture {
	flex-basis: 7%;
}
footer::before, footer::after {
	content:"";
	flex-basis:46.5%;
  	border-bottom:1px solid #bfbfbf;
}
.visual-set *:not(:last-child) {
	margin-bottom:0.2em;
}
.device-frame1 img, .device-frame1 video {
	width:78%;
	padding-top:22%;
	padding-bottom:22%;
}
.device-frame1 {
	background-image:url('iphone-se-bezel.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	text-align:center;
}
.device-frame2 img, .device-frame2 video {
	width:82%;
	padding:9%;
}
.device-frame2 {
	background-image:url('iphone-x-bezel.png');
	background-size:94%;
	background-repeat:no-repeat;
	background-position:center;
	text-align:center;
}	
.rainbow {
	font-size:8em;
	line-height:0.9em;
	margin-bottom:0.15em;
  --bg-size: 2000%;
  --color-0: hsl(0 0% 13%); /*#222*/
  --color-1: hsl(0 100% 28%); /*red*/
  --color-2: hsl(36 100% 36%); /*orange*/
  --color-3: hsl(58 100% 30%); /*yellow*/
  --color-4: hsl(94 97% 29%); /*green*/
  --color-5: hsl(198 94% 26%); /*blue*/
  --color-6: hsl(259 96% 28%); /*purple*/ 
  background: linear-gradient(
                90deg,
				var(--color-0),
                var(--color-1),
                var(--color-2),
                var(--color-3),
				var(--color-4),
				var(--color-5),
				var(--color-6),
				var(--color-0) 20%,
				var(--color-0)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 150s infinite linear;
}
@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}
@media (prefers-color-scheme: dark) {
  html {
    background:#1a1a1a;
  }
  body {
      color:#a5a5a5;
  }
  h1, h2 {
  	color:#f7f7f7;
  }
  h3 {
	  color:#909090;
  }
  p {
	  color:#ccc;
  }
  a, a:link, a:visited {
    text-decoration-color:rgba(255,255,255,0.4);
  }
  .rainbow{
  	--color-0: hsl(0 0% 97%); /*#f7f7f7*/
  	--color-1: hsl(0 100% 86%); /*red*/
	--color-2: hsl(36 100% 79%); /*orange*/
	--color-3: hsl(58 100% 78%); /*yellow*/
	--color-4: hsl(94 100% 81%); /*green*/
	--color-5: hsl(198 100% 81%); /*blue*/
	--color-6: hsl(259 100% 89%); /*purple*/ 
  }
  footer svg path {
  	fill:#363636;
  }
  footer::before, footer::after {
  	border-bottom:1px solid #313131;
}
}