@property --outlineGradientAngle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


:root {
    --bgOffset: 0px;
}

html, body { height: 100%; }


html {
	background-image: url('../assets/cloudful-sky-sunset-v1-min.png');
	background-color: black;
	background-repeat: no-repeat;  
	background-attachment: fixed;
	background-position: 0% var(--bgOffset);
	zbackground-size: cover;
	background-size: auto 130%;
	scroll-behavior: smooth;
}

body {
	font-family: InterDisplay, sans-serif;
	font-feature-settings: "blwf", "cv09", "cv03", "cv04", "cv11", "ss01", "ss02", "ss03", "ss04", "ss08", "ss07", "salt";
	font-size: 16px;
	font-style: normal;
	font-variation-settings: normal;
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
	margin:0px;
}

header {
	position: fixed;
    z-index: 10;
	top: 40px;
	right: 20px;
	left: 20px;
	height: 64px;
	backdrop-filter: blur(10px);
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 99px;
	box-shadow: rgba(168, 168, 181, 0.6) -1px 1px 0px 0px inset, rgb(46, 46, 48) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.21) 0px 0.722625px 0.5781px -0.416667px, rgba(0, 0, 0, 0.27) 0px 2.74624px 2.19699px -0.833333px, rgba(0, 0, 0, 0.56) 0px 12px 9.6px -1.25px;

	opacity: 1;


	display: flex;
	flex: 1 0 0px;
	gap: unset;
	justify-content: space-between;
	padding: 0 16px 0 40px;
	align-items: center;
}

#logo {
	height: 40px;
	font-size: 24px;
	font-weight: 600;
	color: #FFF;

	align-content: center;
	align-items: center;
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0px;
	justify-content: center;
	overflow: visible;
	padding: 0;
	position: relative;
}

#logo sup {
	font-size: 18px;
	padding-left: 4px;
	height: 100%;
}

nav {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

nav a {
	margin: 0 20px;
	letter-spacing: 1.4px;
	will-change: color;
	transition: color 0.8s;
}

a, a:link, a:hover, a:visited a:active, .cta {
    outline:none;
	text-decoration: none;
	color: #FFF;
    border:none;
}

.cta {
    white-space: nowrap;
}

nav a:hover {
	color: #F00;
}


.cta i {
	transform: rotate(-45deg);
	transform-origin: 50% 50% 0px;
	will-change: transform;
	transition: transform 0.2s;
}

.cta:hover i {
	transform: rotate(0deg);
	transform-origin: 50% 50% 0px;
	will-change: transform;
}

.outline {
	--outlineGradientAngle: 215deg;
	background: linear-gradient(var(--outlineGradientAngle), rgb(43, 43, 46) 0%, rgb(43, 43, 46) 13%, rgb(168, 168, 181) 20%, rgb(73, 73, 77) 40%, rgb(43, 43, 46) 62.1622%, rgb(43, 43, 46) 100%);
	border-radius: 100px;
	box-shadow: rgba(0, 0, 0, 0.17) 0px 0.482901px 0.869222px -0.75px, rgba(0, 0, 0, 0.35) 0px 4px 7.2px -1.5px;
	xxtransform: none;
	transform-origin: 50% 50% 0px;
	xdisplay:inline-block;

	transform: translateY(0px);
	transition: transform 0.2s, --outlineGradientAngle 0.2s;
	will-change: transform, --outlineGradientAngle;
}

.cta:hover .fill {
	background: #000;
}

.cta:hover .outline {
	transform: translateY(-2px);
	--outlineGradientAngle: 192deg;
}


.fill {
	background: linear-gradient(rgb(26, 26, 28) 0%, rgb(11, 11, 13) 100%);
	border-radius: 99px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px 2px inset;
	transform: none;
	transform-origin: 50% 50% 0px;
	display:inline-block;
	margin:1px;

}

.label {
	padding: 10px 20px 10px 30px;
	font-weight: 500;
}


main {
	color: #FFF;
}

section {
	margin: 200px 60px 0 60px;
	padding-top: 150px;
}

section#main {
	width: 60%;
}

small {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-weight: 700;
}

h1 {
	font-size: 128px;
	font-weight: 700;
	margin: 0px;
	margin-top: -30px;
}

h2 {
	font-size: 96px;
	font-weight: 700;
	margin: 0px;
	margin-top: -10px;

}

h3 {
	font-size: 22px;
	font-weight: 700;
	margin: 0px;
	margin-top: -10px;
	font-weight: 700;
	color: #FFF;
	margin-bottom: 10px;
}


footer {
	background-color: #000;
	color:#FFF;
	margin-top: 300px;
	padding: 60px;
	display: flex;
	justify-content: flex-end;
}

footer section {
	display: inline-block;
	margin:0;
	padding:0;
	width: 250px;
	vertical-align: top;
	text-align:right;
	font-size: 16px;
	line-height: 25px;
	color: #BBB;
}

footer h2 {
	font-size: 48px;
	font-weight: 700;
	color: #FFF;
	margin-bottom: 20px;
}




footer section.summary {
	text-align: left;
	width: 500px;
	margin-right: auto;
}

footer nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

footer nav li {
	font-size: 16px;
	line-height: 35px;
}

footer nav a, footer nav a:link, footer nav a:visited {
	text-transform: capitalize;
	margin: auto;
	color: #AAA;
	letter-spacing: normal;
}

footer nav a:hover {
	text-decoration: underline;
	color: #FFF;
}


@media (orientation: portrait) {

    html {
        background: none;
        background-color: #8d6598;
    }

    body::after {
        content: "";
        display: block;
        position: fixed;
        z-index: -1;
        height: 100vh;
        width: 100vh;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;

        background-image: url('../assets/cloudful-sky-sunset-v1-min.png');
	    zbackground-color: black;
	    background-repeat: no-repeat;  

	    background-position: 60% var(--bgOffset);
        background-size: auto 150vh;

        zborder:1px solid green;
    }

    h1 {
        font-size: 58px;
    }

    h2 {
        font-size: 48px;
    }

    header nav {
        display:none;
    }

    main section {
	    margin: 150px 30px 0 30px;
    	padding-top: 150px;
    }


    section#main {
	    width: auto;
    }


    header {
	    position: fixed;
    	top: 40px;
	    right: 20px;
    	left: 20px;
	    height: 64px;
    	backdrop-filter: blur(10px);
	    background-color: rgba(0, 0, 0, 0.6);
    	border-radius: 99px;
	    box-shadow: rgba(168, 168, 181, 0.6) -1px 1px 0px 0px inset, rgb(46, 46, 48) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.21) 0px 0.722625px 0.5781px -0.416667px, rgba(0, 0, 0, 0.27) 0px 2.74624px 2.19699px -0.833333px, rgba(0, 0, 0, 0.56) 0px 12px 9.6px -1.25px;

    	opacity: 1;


    	display: flex;
	    flex: 1 0 0px;
    	gap: unset;
	    justify-content: space-between;
    	padding: 0 16px 0 40px;
	    align-items: center;
    }
   
}


.invisible {
    opacity: 0;
    z-index: 5;
    position: relative;
    transform: translateX(-20px);
}

.visible {
    transition: opacity 1s, transform 0.5s;
    opacity: 1;
    transform: none;
}