.lunchly{
    color:white;
    font-size:104%;
    right:1%;
    top:16px;
    font-family:monospace;
    z-index:2;
    position:absolute;}

html {
  scroll-behavior: smooth;
}

.project-1{
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:80%;
    opacity:1;
    position:relative;
    top:100px;
    left:10%;
    height:750px;
    font-size:150%;
    text-align:center;}
    
.project-2{
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:80%;
    opacity:1;
    position:relative;
    top:150px;
    left:10%;
    height:750px;
    font-size:150%;
    text-align:center;}
    
.project-3{
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:80%;
    opacity:1;
    position:relative;
    top:200px;
    left:10%;
    height:750px;
    font-size:150%;
    text-align:center;}
    
.project-4{
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:80%;
    opacity:1;
    position:relative;
    top:250px;
    left:10%;
    height:750px;
    font-size:150%;
    text-align:center;}
    
.project-5{
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:80%;
    opacity:1;
    position:relative;
    top:300px;
    left:10%;
    height:750px;
    font-size:150%;
    text-align:center;}
    
.project-6{
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:80%;
    opacity:0.8;
    position:relative;
    top:350px;
    left:10%;
    height:750px;
    font-size:150%;
    text-align:center;}
    
.small{
    font-size:80%;}
    
html, body {
    height:100%
    margin:0%;}

.content{
    flex:1;}

body{
    display:flex;
    flex-direction:column;}

.bioinfo1{
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:30%;
    opacity:0.8;
    position:relative;
    top:150px;
    font-size:125%;    
    width:40%;
    left:30%;}
    
.bioinfo1 img{
    width:100%;}
    
.bioinfo2{
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:30%;
    opacity:0.8;
    position:relative;
    top:0px;
    font-size:125%;
    width:40%;
    left:30%;
    top:200px;}
    
.bioinfo2 img{
    width:100%;}
    
.bioinfo3{
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:30%;
    opacity:0.8;
    position:relative;
    top:0px;
    font-size:125%;
    width:40%;
    left:30%;
    top:250px;}
    
.bioinfo3 img{
    width:100%;}
        
.stuffilike{
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:40%;
    left:30%;
    opacity:0.8;
    position:relative;
    top:300px;
    font-size:125%;
    text-align: center;}

header { 
    position: top; 
    bottom: 10; 
    left: 0; 
    z-index: 10;
    color:white;
    font-size:250%;
    font-family:monospace;}
    
body {
    position: top; 
    bottom: 10; 
    left: 0; 
    z-index: 10;
    color:white;
    font-family:monospace;}
    
.parallax {
    background-image: url("https://codehs.com/uploads/b3add0c78ca51d3f3f43fd887e36aa1c");
    min-height: 1250px;
    top:100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top:50px;
    width:100%;}
    
.footer-fade {
    background: linear-gradient(to bottom, rgba(40, 45, 50, 0.0), rgba(40, 45, 50, 0.95));
    width:100%;
    height:30px;
    bottom:98px;
    position:relative;
    margin-top: -50px;}
    
.footer-container {
    background-color: rgba(40, 45, 50, 0.95);
    position:relative;
    height:100px;
    width:100%;
    font-family:monospace;
    color:white;
    bottom:0;
    margin-top:-98px;}
    
.sticky-container {
    color:white;
    position: sticky;
    top: 0px; 
    background-color: rgba(100, 105, 110, 0.3);
    font-family:monospace;
    z-index:2;}
    
.text1 {
    color:white;
    position:static;}

.header-fade {
    color:white;
    position: sticky;
    
    background: linear-gradient(to top, rgba(100, 105, 110, 0.0), rgba(100, 105, 110, 0.3));
    z-index:2;}
    
.homeheader {
    text-align:center;
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:60%;
    opacity:0.8;
    margin:auto;
    position:relative;
    top:200px;
    font-size:225%;}
    
.title-section{
    text-align:center;
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:60%;
    opacity:0.8;
    margin:auto;
    position:relative;
    top:50px;
    font-size:250%;}

.sub-section{
    text-align:center;
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:30%;
    opacity:0.8;
    margin:auto;
    position:relative;
    top:70px;
    font-size:175%;}
    
.sub-section2{
    text-align:center;
    padding:5px;
    color:black;
    border-radius:20px;
    background-color:white;
    width:50%;
    opacity:0.8;
    margin:auto;
    position:relative;
    top:70px;
    font-size:175%;}
    
.parallax-fire {
    background-image: url("https://codehs.com/uploads/b3add0c78ca51d3f3f43fd887e36aa1c");
    min-height: 1260px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top:50px;
    width:100%;}

.parallax-chat {
    background-image: url("https://codehs.com/uploads/b3add0c78ca51d3f3f43fd887e36aa1c");
    min-height: 1260px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top:50px;
    width:100%;}

.parallax-bio{   
    background-image: url("https://codehs.com/uploads/b3add0c78ca51d3f3f43fd887e36aa1c");
    min-height:3100px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top:200px;
    width:100%;}
    
.parallax-projects{   
    background-image: url("https://codehs.com/uploads/b3add0c78ca51d3f3f43fd887e36aa1c");
    min-height:5500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top:200px;
    width:100%;}

#project-1b {
color: black;
font-size: 20px;}

#project-2b {
color: black;
font-size: 20px;}

#project-3b {
color: black;
font-size: 20px;}

#project-4b {
color: black;
font-size: 20px;}

#project-5b {
color: black;
font-size: 20px;}

#project-6b {
color: black;
font-size: 20px;}


@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;}}