:root {
  /*animation values*/
  --t-fast: 0.5s;
  --t-med: 0.8s;
  --t-slow: 1s;
  --easing: cubic-bezier(.2,.3,.5,1); 


  --accent-color1: #D9A9CC;
  --accent-color2: #43754A;
  
  --white: #eaeaea;
  --header-h: 0vh;

}

a { text-decoration: none; padding: 10px; color: var(--accent-color1);}


body { 
  margin: 20px;
  min-width: 100vh; 
  min-height: 100vh;
  background-color: var(--accent-color2);
}


.box{
  width: 75vw;
  height:fit-content;
  border:3px solid var(--accent-color1);
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  white-space: normal;
  word-break: normal;
  cursor: pointer;
}

.box .content{
  color: var(--accent-color1);
  overflow: hidden;
  text-align: left;
}

.corner {
  position: absolute;
  font-size: 13px;
  font-weight: bold;
  color: #eaeaea;
  padding: 6px 6px;
}

.corner[pos="top-left"] {top: -19px; left:-10px;  }
.corner[pos="top-right"] {top: -19px; right:-10px;}
.corner[pos="bottom-left"] {bottom: -19px; left: -10px;}
.corner[pos="bottom-right"] {bottom: -19px; right: -10px;} 

.head,.body,.foot,.page{
  font-family: "agave";
  display:grid;
  place-items:center;
  color: var(--accent-color1);
  background-color: var(--accent-color2);

:where(.head-font,.foot-font,.box,l,.path,.corner){
  transition: all var(--t-med) var(--easing);
  color: var(--accent-color1);
}

.foot {
  position:fixed;
  inset:  90vh 0px 0px 0px;
  z-index: 1000;
}

.foot-font {
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;  
  margin: 10px;
  padding: 10px;
}

h1 {
  color: var(--accent-color1);
  margin-top:0;
  margin-bottom:0;
}

.head {
  position: fixed;
  padding-top: 2px;
  inset: 0px  2px 2px;
  height: var(--header-h);
  z-index: 1000;
}

.head-font {
  display: inline-grid;
  position: relative;
  font-size: 20pt;
  align-items: center;
  text-decoration: none;
  padding:2px;
  margin: 5px;
}
.head-font:hover{
  column-gap: 2rem;
  padding: 2px 10px; 
  color: var(--accent-color1);
  /*transition: all var(--t-med) var(--easing);*/
}

l {
  position: relative;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 1px;
  cursor: pointer;
  margin-inline: 1px;
}

l:hover{
  letter-spacing: .05rem;
  background-color: #ff5700;
  color: var(--accent-color1);
}

l::before,
l::after{
  content:"";
  position: relative;
}

l::before{
  content:"";
  margin-right:1px;
}

l::after {
  content:"";
  margin-left:1px;
}
l:hover::before{
  content:"";
  margin-right:1rem;
}
l:hover::after{
  content:"";
  margin-left:1rem;
}

.page{
  margin-top: var(--header-h);
  padding-top: 5px;
  height: 100vh;
  width: 100vw;
}