@import url("fonts/fontsheet.css"); 
:root { 
    --site-bg: url('bgimage.png'); 
    --font-family:'figtree'; 
    --gradient-bg: linear-gradient(135deg, #FFB8E7, #FFB0DC, #FFC8C2 90%); 
    --accent-color: #E8C1CD; 
    --link-color: #FFA1BF; 
    --bg-color: #FFF; 
    --text-color: #00000; 
    --favorite-color: #ED779F; 
} 
 
* { 
    scrollbar-color: var(--favorite-color) var(--bg-color); 
    scrollbar-width: thin; 
} 
::selection { 
    background: var(--favorite-color); 
    color: var(--bg-color); 
} 
 
html {scroll-behavior: smooth;} 
 
body { 
    margin: 0; 
    background-color: var(--bg-color); 
    background-image: var(--site-bg); 
    background-repeat: repeat; 
} 

p {
  text-color: black;
  z-index: 4;
}
 
 
header > h1 { 
    margin: 1em auto; 
    max-width: 600; 
    padding-left: 1em; 
    font-family:'playwrite'; 
    font-weight: bold; 
   text-shadow: -4px -4px 0 #fff; 
   font-size: 60px; 
    text-align: center; 
} 
 
 
nav { 
    padding: 0 1em 1em 1em; 
    font-weight: bold; 
} 
 
nav ul { 
    max-width: 960px; 
    margin: auto; 
    line-height: 3rem; 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    list-style-type: none; 
    padding-left: 0; 
    justify-content: space-evenly; 
} 
 
nav ul li:hover { 
  transform: translateY(-2px); 
  transition: 0.2s ease; 
} 
/*makes the buttons jump when you hover*/ 
 
 
nav li a { 
    position: relative; 
    background-image: linear-gradient(0deg, #FF6EBF, #FFC8C2 90%); 
    border: 1px solid var(--favorite-color); 
    border-radius: 20px; 
    padding: .5em 3em; 
    text-decoration: none; 
    transition: color 400ms ease-out, border-color 400ms ease-out; 
    font-family:'avory-i-pe-variable'; 
} 
 
nav li a::before { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  border-radius: inherit; 
  background: linear-gradient( 
    180deg, 
    rgba(255,255,255,0.35), 
    rgba(255,255,255,0) 60% 
  ); 
  pointer-events: none; 
} 
 
nav li a:hover { 
    border: 1px solid var(--accent-color); 
} 
 
a { 
    transition: color 400ms ease-out; 
} 
 
a:hover { 
    color: var(--text-color2); 
} 
 
nav ul li a.active { 
  color: #fff;             
} 
 
 
.starlist { 
list-style-type: "✦";  
color: #0000;} 

.textheader { 
    margin: 1em auto; 
    max-width: 960px; 
    padding-left: 1em; 
    font-family:'avory-i-pe-variable'; 
    font-weight: bold; 
   text-shadow: -4px -4px 0 #fff; 
   font-size: 40px; 
} 
 
.headerimg { 
   display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: auto; 
} 
 
.card >* { 
  display: flow-root; 
  margin: 1em; 
  padding: 1.2em; 
  background-image: var(--gradient-bg); 
  border: 1px solid #FFF; 
  border-radius: 20px; 
  position: relative; 
  overflow: hidden; 
  z-index:2;
} 

.card p {
  color:black;
  z-index:99;
}
 
.card::before { 
  content: ""; 
  position: relative; 
  border-radius: inherit; 
  background: linear-gradient( 
    180deg, 
    rgba(255,255,255,0.7), 
    rgba(255,255,255,0) 55% 
  ); 
  pointer-events: none; 
  z-index:1;
} 
/*adds highlight to cards*/  
 
.card:hover { 
  transform: translateY(-2px); 
  transition: 0.2s ease; 
} 
 
 
#sidebar { 
    min-width: 50px; 
    max-width: 250px; 
    width:20%; 
    text-align: left; 
    float: left; 
    font-size: 16px; 
    position: relative; 
} 
 
.sidebarlinks a:visited { 
    text-decoration: underline; 
} 
 
.sidebarlinks:hover { 
  transform: translateY(-2px); 
  transition: 0.2s ease; 
} 
 
 
#mainhome { 
  min-width: 400px; 
  max-height: 600px; 
  min-height: 200px; 
  overflow: auto; 
} 
 
#contactme p { 
    margin: .5em; 
    text-align: center; 
    font-size: 16px;  
} 
 
 
#content { 
    display: flex; 
    max-width: 960px; 
    margin: auto; 
} 
 
main { 
    image-rendering: auto; 
} 
 
   
.img-right { float: right; } 
 
footer { 
    text-align: center; 
    font-size: small; 
    padding: 1em; 
} 
 
@media only screen and (max-width: 800px) { 
    #content { 
       
        flex-direction: column; 
        flex-wrap: wrap; 
    } 
    nav ul { 
      justify-content: center; 
    } 
       
    #sidebar { 
        mas-width: 200px; 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: left; 
        align-items: left; 
        padding-top: 2em; 
    } 
    #sidebar ul {    
        margin: 0 1em; 
        display: flex; 
        line-height: 2em; 
        padding-left: .5em 
        justify-content: left; 
        align-items: left; 
    } 
    #sidebar li { 
        margin: .3em 1em; 
    } 
    main { 
        max-height: fit-content; 
        padding: 1em; 
    } 
    .img-right, .img-left { 
        float: none; 
        text-align: center; 
    } 
}