:root{--lightLavender: #bebade;--lavender: #8e87c5;--darkLavender: #5d53ac;--darkdarkLavender: hsl(247, 35%, 25%);--lightTeal: #b4e4e4;--teal: #7cd0d0;--darkTeal: #44bbbb;--darkdarkTeal: hsl(180, 47%, 40%);--lightTan: #eaccae;--tan: #dab072;--darkTan: #c98e36;--coffee: #3f2300}*{margin:0;box-sizing:border-box}body{font-family:Georgia, 'Times New Roman', Times, serif;background:linear-gradient(#fff 0%, var(--darkdarkTeal) 5%, #fff 100%)}header,footer{width:95%;min-height:4rem;margin:0 auto;border:10px ridge var(--darkTan);border-radius:10px;padding:10px 30px;background:linear-gradient(var(--tan), var(--lightTan), var(--tan));text-align:center;box-shadow:10px 0px 5px 0px #393939}header h1{border-bottom:2px solid var(--coffee);text-shadow:5px 2px var(--darkTan)}header h1,header h4{margin:auto;color:var(--coffee)}header a,footer a{display:block;width:fit-content;margin:0 auto;color:var(--coffee)}nav{z-index:2;height:fit-content;padding:10px;background:linear-gradient(var(--darkLavender), var(--lavender))}nav a{text-decoration:none;color:black}nav a.mybutton{display:block;height:auto;margin:10px;border:1px dotted #9AEDEA;border-radius:5px;padding:5px;text-decoration:none}nav a.mybutton:hover{background:#9AEDEA}main{display:flex;flex-direction:column;position:relative;width:80%;margin:0 auto;border-left:10px double var(--darkLavender);border-right:10px double var(--darkLavender);padding:10px;background:linear-gradient(var(--lightLavender), var(--lavender));box-shadow:15px 0px 10px #393939}#page-title{z-index:1;margin:5px -40px;position:sticky;top:10px;padding:5px 30px;background:linear-gradient(0.1turn, var(--teal), var(--lightTeal), var(--teal));box-shadow:15px 5px var(--lavender)}li{margin:2% auto}.item img{padding:10px;margin:0 auto;height:100px}.gallery{display:flex;align-items:stretch;flex-wrap:wrap}.gallery .item{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;margin:5px;padding:5px;background-color:var(--lavender);box-shadow:5px 5px var(--darkdarkLavender)}.gallery .item:hover{box-shadow:none;margin:10px 0 0 10px}@media only screen and (max-width: 767px){.grid-container{display:block}nav{width:80%;margin:0 auto;border-style:double;border-color:var(--darkLavender);border-width:5px 10px 0px 10px;box-shadow:15px 0px 10px #393939}menu{padding:0}#page-title{width:115%}img{width:100%}.gallery{flex-direction:column}}@media only screen and (min-width: 768px){.grid-container{display:grid;grid-template-areas:'icon header header header header' 'menu main main main main' 'linkedin footer footer footer footer';grid-auto-columns:20%}header{grid-area:header}footer{grid-area:footer}nav{position:fixed;border:5px double var(--darkLavender);box-shadow:-5px 5px #393939}menu{grid-area:menu;padding:10px;display:flex;flex-direction:row-reverse}main{grid-area:main;min-height:50rem}#page-title{width:80%}#page-title::after{position:absolute;left:100%;border:1rem solid var(--darkTeal);border-right-color:transparent;content:""}.gallery{flex-direction:row}.icon{grid-area:icon;background-image:url(https://raw.githubusercontent.com/ellezhu1/ellezhu1.github.io/refs/heads/publish/assets/images/Teacup.png);background-size:contain;background-repeat:no-repeat;background-position:right;margin-right:10px}}@media only screen and (min-width: 1440px){.grid-container{margin:0 auto;width:75%}}