body {
       font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
       margin: 0;
       background-color: rgb(40, 26, 41);
       /* you can delete the line below if you'd prefer to not use an image */
       background-size: 65px;
       color: #fceaff;
       background-image: var(--body-bg-image);
}

#headertext {
       text-align:center;
       width:100%;
}

header { 
       width: 100%;
       background-color: rgb(19, 30, 31);
       border-bottom: rgb(19, 30, 31);
       background-color: rgb(72, 103, 124);
       background-image: linear-gradient(to bottom, rgb(72, 103, 124), rgb(172, 250, 195));
       text-align: center;
       align-content: center;
       width: 100%; height: auto;
}

            #container {
                max-width: 900px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }

img {
    max-width: 100%; height: auto; 
}

nav {
       width: 100%;
       background-color: rgb(19, 30, 31);
       border-bottom: 1px solid rgb(19, 30, 31);
       backdrop-filter: blur(15px);
       margin-bottom: 1rem;
       text-align: center;

       display: flex;
       align-items: center;
       justify-content: space-between;
}

.logo {
       font-size: 1.8rem;
       font-weight: 700;
       color: rgb(172, 250, 195);
}

.navlinks {
       list-style: none;
       text-align: center;
       display: flex;
       gap: 2rem;
}

.navlinks li a {
       display: inline-block;
       position: relative;
       font-size: 1.05rem;
       font-weight: 500;
       text-decoration: none;
       text-align: center;
       color: rgb(72, 103, 124);
       transition: 0.4s;
}

.navlinks li a:hover {
       color: rgb(172, 250, 195);
       text-shadow: 0 0 10px rgb(172, 250, 195);
}

#leftSidebar {
       background-color: rgb(39, 52, 61);
       border: 10px solid rgb(19, 30, 31);
       width: 200px;
       padding: 20px;
       font-size: smaller;
       order: 1;
       /* this makes the sidebar text slightly smaller */
}

.box {
       background-color: rgb(19, 30, 31);
       padding: 10px;
}
 #flex {
       display: flex;
 }
main {
       flex: 1;
       padding: 20px;
       order: 2;
 }

#introbox { 
  border: 5px solid rgb(19, 30, 31);
  background-color: rgb(72, 103, 124);
  background-image: url(crystal_embelish.png), linear-gradient(to bottom, rgb(19, 30, 31), rgb(72, 103, 124));
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}

#gotothefreakingbottom {
    position: relative;
    bottom:0px;
}

#introheader {
       text-shadow: 0 0 10px rgb(172, 250, 195); text-align:left;
       text-align: center;    
}

#introtext {
       text-shadow: 2px 2px rgb(19, 30, 31); display:inline-block; text-align:left;
       padding: 2rem 5%;
       padding-bottom: 150px;
}

#introbox_art {
  border: 5px solid rgb(19, 30, 31);
  background-color: rgb(72, 103, 124);
  background-image: linear-gradient(to bottom, rgb(19, 30, 31), rgb(72, 103, 124));
  background-repeat: no-repeat;

}

#art_test {
  border: 5px solid rgb(19, 30, 31);
  border-radius: 4px;
  width: 150px;
}

#art_test:hover {
  box-shadow: 0 0 10px rgba(0, 140, 186, 0.5);
}
}