:root {
  --white: #faf5f7;
  --white1: #ebdfe4;
  --black: #42373f;
  --green: #c2e3bf;
  --green1: #93b88f;
  --pink: #ff96aa;
  --pink1: #eb5783;
  
  --inset: inset 0 7px 7px -5px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
  --outline: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black), 0 0;
  
  }
  
  @font-face {
    src: url(https://file.garden/ZXJkOcYwORXn2d9V/stamps/kindergarten.ttf);
    font-family: kinder;
  }
  
  @font-face {
    src: url(https://file.garden/ZXJkOcYwORXn2d9V/stamps/GLAMOURGIRL.TTF);
    font-family: glam;
  }
  
  .main {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  background: var(--white);
  font-family: kinder;
  border-width: 7px;
border-style: solid; 
border-image: url("https://file.garden/ZXJkOcYwORXn2d9V/stamps/black%20edited.png") 8 fill round;         
    
}

.head {
  width: 100%;
  aspect-ratio: 5 / 1;
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/stamps/fls/suburbchick.png);
  background-size: 75%;
  background-position-y: 25%;
  position: relative;
  transition: 0.5s;
  border-radius: 20px 20px 0px 0px;
}

.head:hover {
  background-size: 85%;
}

.sidenav {
  position: absolute;
  width: calc(25% - 20px);
  height: 150px;
  padding: 10px;
  background: linear-gradient(180deg,rgba(122, 100, 118, 1) 0%, rgba(66, 55, 63, 1) 100%);
  right: 16.25%;
  top: 20px;
  border: 2px solid var(--black);
  text-align: right;
    --p: 25%; /* control the shape (can be percentage) */
  clip-path: polygon(var(--p) 0,100% 0,100% 100%,0 100%);
  box-shadow: var(--inset);
  color: var(--white);
  border-radius: 0px 20px 0px 0px;
}

.divider.polk {
  width: 100%;
  height: 50px;
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/stamps/fls/polk%20edited.png);
  background-size: 33%;
  background-repeat: repeat-x;
}

.buttons a {
  display: inline-block;
  background: linear-gradient(180deg,var(--pink) 0%, var(--pink1) 100%);
  border: 1px solid var(--black);
  border-radius: 5px;
  padding: 10px;
  font-family: glam;
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.25em;
  transition: 1s;
      --p: 10%; /* control the shape (can be percentage) */
  clip-path: polygon(var(--p) 0,100% 0,100% 100%,0 100%);
  box-shadow: var(--inset);
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black), 0 0;
}

.buttons a:hover {
  width: 125px;
  border-radius: 20px;
}


.buttons a#one {
  width: 225px;
}


.buttons a#two {
  width: 250px;
}

.buttons a#three {
  width: 275px;
}

flex {
  display: flex;

}

flex left, flex middle {
  display: block;
  margin-right: 5px;
}

flex right {
  display: block;
}

flex.one {
  border-width: 8px;
border-style: solid; 
margin-top: -10px;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
background: var(--white);
padding: 5px;
}