/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: >0.3%,last 4 version,not dead
*/

@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Inconsolata:wght@200;300;400;500;600;800;900&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*
font-family: 'Major Mono Display', monospace;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Mono', monospace;
font-family: 'Inconsolata', monospace;
*/

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


body {
	background-color: #090909;
	margin: 0;
}


#container {
    clear:both;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}


header {
	position: static;
	left:0px;
	top:0px;
	width: 100%;
	height: 100px;
	margin-left:auto;
	margin-right:auto;
}

#headerScroll {
	position:fixed;
	left:0px;
	top:0px;
	width: 100%;
	max-height: 120px;
	margin-left:auto;
	margin-right:auto;
	color: #fafafa;
	box-shadow: 0px 5px 10px 1px rgba(0,0,0,.8); 
	background-color:#0d0d0d;
	background: linear-gradient(45deg, rgba(16,16,16,.5) 15%, rgba(0,7,93,.5) 35%, rgba(31,7,85,.5) 65%, rgba(16,16,16,.5) 85%);
    z-index: 99;
}

header h1 {
    float:left;
    width: 25%;
    margin-top: 0;	
	text-align: left;	
	margin-left: 10%;
    font: 28pt 'Roboto', sans-serif;
    text-shadow: 3px 2px 2px #3d3d3d;
	font-weight: 500;
	padding-top: 20px;
	padding-bottom: 20px;
	font-style: italic;
    color: #fafafa;
}

header h1 a:link, header h1 a:visited, header h1 a:hover, header h1 a:active {
    color: #fafafa;
    text-decoration:none;
}

nav {
	float: right;
	width: auto;
	text-align: right;	
	margin-right: 10%;
	opacity: 1;
}

nav li {
	float: left;
	list-style-type: none;
    font: 16pt 'Roboto Mono', monospace;
    text-shadow: 0px 0px 2px #808080;
	padding-top: 30px;
}

main section {
	color: #ebebeb;
	padding-top: 5%;
	padding-bottom: 5%;
}

main section:nth-child(even) {
    background-color: #0d0d0d;
}

#links {
	background: linear-gradient(105deg, rgba(228,231,219,.6) 10%, rgba(177,201,233,.6) 15%, rgba(177,209,233,.9) 25%, rgba(143,220,235,.5) 35%, rgba(142,211,238,.8) 40%, rgba(143,196,235,.6) 45%, rgba(163,176,228,.4) 65%, rgba(177,201,233,.6) 75%, rgba(238,241,223,.4) 90%),
	linear-gradient(90deg, rgba(228,231,219,.7) 10%, rgba(177,201,233,.7) 15%, rgba(177,209,233,.5) 25%, rgba(143,220,235,.7) 35%, rgba(142,211,238,.7) 40%, rgba(143,196,235,.7) 45%, rgba(163,176,228,.3) 65%, rgba(177,201,233,.6) 75%, rgba(238,241,223,.7) 90%),
	linear-gradient(25deg, rgba(226,227,222,1) 10%, rgba(159,193,238,1) 25%, rgba(143,220,235,1) 35%, rgba(164,219,187,1) 37%, rgba(224,213,124,1) 40%, rgba(245,163,86,1) 45%, rgba(231,134,89,1) 50%, rgba(163,171,228,1) 65%, rgba(245,246,239,1) 90%), #ebebeb;
	width: 100%;
	padding-left: 20%;
	padding-right: 20%;
}

#linksList {
	width: auto;
	height: auto;
	padding: 25px;
	list-style-type: none;
}

#linksList li{
	width: 100%;
	min-width:-webkit-fit-content;
	min-width:-moz-fit-content;
	min-width:fit-content;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	background-color: #f3f3f3;
	margin: 15px;
	border-top: solid 1px rgba(200, 200, 200, .15);
	border-left: solid 1px rgba(200, 200, 200, .15);
	border-bottom: solid 1px rgba(255, 255, 255, .2);
	border-right: solid 1px rgba(255, 255, 255, .2);
	box-shadow: -1px -1px 1px rgba(250, 250, 250, .2), 1px 2px 4px rgba(0, 0, 0, .4);
	border-radius: 2px;
}

#linksList li a{ 
	color: #212121;
	font-family: 'Roboto', sans-serif;
	font-size: 30pt;
	font-weight: 900;
	text-shadow: 1px 0px 0px rgba(250, 250, 250, .3), -1px -1px 0px rgba(250, 250, 250, .1);
	display: block;
	background: linear-gradient(45deg, rgba(226,227,222,1) 5%, rgba(159,193,238,.8) 25%, rgba(143,220,235,.8) 35%, rgba(164,219,187,.8) 37%, rgba(224,213,124,.8) 40%, rgba(245,163,86,.8) 45%, rgba(231,134,89,.8) 50%, rgba(163,171,228,.8) 65%, rgba(245,246,239,1) 95%);
  	background-clip: text;
  	-webkit-background-clip: text;
}

#linksList li a:link {
	color: #212121;
	text-decoration:none;
}

#linksList li a:visited {
	color: #212121;
}

#linksList li a:hover {
	color: transparent;
  transition: 500ms ease;
	text-shadow: none;
}

#linksList li a:active {
	color:rgba(143,220,235,1);
	text-shadow: none;
}


/*START SLIDER*/


#photo-comparisons{
    display: grid;
    place-items: center;
    row-gap: 100px;
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;
	text-align: center;
  }

#photo-comparisons h2 {
	font-size: 18pt;
	font-style: italic;
	font-weight: 600;
	padding-bottom: 15px;
}

#photo-comparisons img {
    display: block;
    max-width: 100%;
  }
  
  .container {
    display: grid;
    place-content: center;
    position: relative;
    overflow: hidden;
   /*border-radius: 1rem;*/
    --position: 50%;
  }
  
  .image-container {
    max-width: 600px;
    max-height: 600px;
    /*aspect-ratio: 1/1; adjust later based on images used*/
  }
  
  .slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
  }
  
  .image-before {
    position: absolute;
    inset: 0;
    width: var(--position);
  }
  
  .slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
    /* for Firefox */
    width: 100%;
    height: 100%;
  }
  
  .slider:hover ~ .slider-button {
    outline: 5px solid rgba(0,0,0,.5);
    outline-offset: 3px;
  }
  
  .slider:focus-visible ~ .slider-button {
    outline: 5px solid rgba(0,0,0,.5);
    outline-offset: 3px;
  }
  
  .slider-line {
    position: absolute;
    inset: 0;
    width: .2rem;
    height: 100%;
    background-color: #ebebeb;
    /* z-index: 10; */
    left: var(--position);
    transform: translateX(-50%);
    pointer-events: none;
  }
  
  .slider-button {
    position: absolute;
    background-color: #ebebeb;
    color: black;
    padding: .5rem;
    border-radius: 100vw;
    display: grid;
    place-items: center;
    top: 50%;
    left: var(--position);
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* z-index: 100; */
    box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
  }

/*END SLIDER*/


#contact {
	font-family: 'Roboto', sans-serif;
	text-align: center;
	padding: 9vh;
}

#contact h2 {
	font-size: 18pt;
	font-style: italic;
	font-weight: 600;
	padding-bottom: 15px;
}

#contact p {
	padding: 20px;
	font-family: 'Roboto Mono', monospace;
}


footer {
  	bottom: 0;
	min-height:80px;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	background: color #0d0d0d;
	color:#ebebeb;
	font: 10pt 'Roboto', sans-serif;
    text-align: center;
	padding-top:30px;
	background: linear-gradient(45deg,  rgba(16,16,16,.4) 15%, rgba(0,7,93,.4) 35%, rgba(31,7,85,.4) 65%, rgba(16,16,16,.4) 85%);
}


a:link {
	color:#fafafa;
	text-decoration:none;
}

a:visited {
	color:#fafafa;
}
	
a:hover {
	color:#fff954;
}

a:active {
	color:#fff954;
}