/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* { box-sizing: border-box; }
body {
    background: url(https://www.transparenttextures.com/patterns/noise-pattern-with-subtle-cross-lines.png), var(--burgundy);
    color: black;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--tigers-eye);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--burgundy);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

:root {
  --title-font: "Amatic SC", sans-serif;
  --text-font: "Andika", sans-serif;
  
  --melon: #F1AAA4ff;
  --tigers-eye: #B87121ff;
  --linen: #F2E5DDff;
  --hunyadi-yellow: #EDAB3Aff;
  --burgundy: #831D2Aff;
  --cadet-gray: #8AA6BCff;
  --olive: #757D28ff;
  --gunmetal: #27332Fff; 
}
#wrapper {
    width: min(100%, 980px);
    margin: auto;
    background: url(https://www.transparenttextures.com/patterns/tree-bark.png), var(--olive);
    border: 3px solid var(--tigers-eye);
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    position:relative;
}

#index-header {
    width: 100%;
    opacity: 0.8;
    background: var(--linen);
    border: 5px dotted var(--burgundy);
    border-radius: 15px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 10px;
    font: bold 2.5rem var(--title-font);
}

#index-sugarcookie {
    position: absolute;
    top: 153px;
    right: 27px;
}

#index-sugarcookie img {
    height: 150px;
    width: 150px;
    transform: rotate(27deg);
}

.wrapper-bar {
    background: var(--tigers-eye);
    border: 5px double var(--hunyadi-yellow);
    border-radius: 15px;
    padding: 0.5rem;
    font: 400 0.8rem var(--text-font);
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 25%;
    height: 200px;
    overflow: auto;
}

.wrapper-landing {
    width: 70%;
    flex: 1;
    height: 200px;
    background: var(--gunmetal);
    border-radius: 15px;
    color: var(--linen);
    display: flex;
    align-items: flex-start;
    padding: 1.5rem;
    font: 500 0.8rem var(--text-font);
    text-align: justify;
    line-height: 200%;
}

.wrapper-cookietin {
  height: 500px;
    width: 100%;
    border: 5px solid var(--burgundy);
    border-radius: 15px;
    background: var(--cadet-gray);
}

.wrapper-inthekitchen {
  width: 100%;
    height: 300px;
    border-bottom: 5px solid var(--burgundy);
    border-left: 5px dotted var(--burgundy);
}