/* ~~~~STYLE GUIDE~~~~ */

:root {
    --primary: #C47457; /* Terracota 196 116 87*/
    --secondary: #9C9E80; /* Sage 156 158 128 */
    --background: #F9F4EA; /* Oyster 249 244 234 */
    --accent1: #B68936; /* Copper 182 137 54*/
    --accent2:#605F4B; /* Truffle 96 95 75*/
    --accent3: #CDAD85; /* Sand 205 173 133*/
}
@font-face {
    font-family: 'Century Gothic';
    src: url('../fonts/centurygothic.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Century Gothic Bold';
    src: url('../fonts/centurygothic_bold.ttf');
    font-weight: normal;
    font-style: normal;
}
a {
    text-decoration: none;
}
h1 {
    color:var(--accent2);
    font-family: 'Century Gothic Bold', sans-serif;
    font-size: 3em;
    transform: scale(1) ;
    transition: transform 0.4s ease-in-out
}
h2 {
    color: var(--accent2) ;
    font-family: 'Century Gothic Bold', sans-serif ;
    font-size: 2rem ;
}
h3 {
    color: var(--accent2) ;
    font-family: 'Century Gothic' , sans-serif ;
    font-size: 1.5rem ;
}
h4 {
    color: var(--accent2);
    font-size: 1.4rem;
    font-weight: normal;
}
body {
    background-color: var(--background);
}
.growtheffect:hover {
    transform: scale(1.3);
    transition: 0.4s ease;
}

.centered-text {
    text-align: center ;
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}
.spaced-element {
    padding-top: 4em; /* padding around */
}

.pots:hover { /*pseudo-class makes defined style appear when hovering over element. used for sidebar svgs */
    filter: opacity(90%); /* filter. other options include: brightness, contract, grayscale, invert, saturate, sepia, hue-rotate, blur, drop-shadow */
    transform: scale(1.2) ;
    transition: transform 0.2s ease-in-out ;
}

/* ~~~~2X7 GRID~~~~ */
.index_container {
    display: grid;
    grid-template-rows: 18rem 14rem 20rem 12rem 12rem 15rem 20rem ;
    grid-template-columns: 18rem 50rem ;
    place-content: center center;

}
/* Grid - Header and Body */
.item-header {
    grid-area: 1 / 2 / 2 / 3 ; /* row-start col-start row-end col-end*/
    align-self: end;
    justify-self: right;
}
.item-header > img {
    width: 90%;
    margin-left: 2rem;
    padding-top: 1.5rem;
}
.item-bg {
    grid-area: 1  / 1 / 8 / 3 ;
    object-fit: contain ;
}
.item-headertxt {
    grid-area: 1 / 1 / 2 / 2 ;
    text-align: center ;
    padding: 1.5rem ;
    padding-top: 2.2rem ;
    color: var(--primary) ;
    transform: scale(1.1) ;
    transition: transform 0.2s ease-in-out ;
}
/*These are the style elements contained in the main body grid spcace */
.item-mainbody {
    grid-area: 2 / 2 / 5 / 3 ;
    text-align: center ;
    padding-right: 8rem ;
    padding-left: 8rem ;
    padding-top: 4rem ; 
    font-family: 'Century Gothic';
}
.item-mainbody > img {
    width: 16rem;
}
.colored-word {
    color:var(--accent1) ;
}
/* Grid - LeftSide Pot SVGs */

.item-teapot {
    grid-area: 2 / 1 / 3 / 2 ; 
    align-self: end ;
    justify-self: center ;
    width: 70% ;
}
.item-bigpot {
    grid-area: 3 / 1 / 4 / 2 ;
    align-self: end ;
    justify-self: center ;
    width: 65% ;
}
.item-firstpot {
    grid-area: 4 / 1 / 5 / 2 ;
    align-self: end ;
    justify-self: center ;
    width: 70% ;
}
.item-cupsmugs {
    grid-area: 5 / 1 / 6 / 2 ;
    align-self: end ;
    justify-self: center ;
    width: 50% ;
}
.item-bowls {
    grid-area: 6 / 1 / 7 / 2 ;
    align-self: end ;
    justify-self: center ;
    width: 60% ;
}
.item-practice {
    grid-area: 7 / 1 / 8 / 2 ;
}

/* Grid - LeftSide Text for Pot SVGs */
.item-teapottxt {
    grid-area: 2 / 1 / 3 / 2 ;
    text-align: center;
}
.item-bigpottxt {
    grid-area: 3 / 1 / 4 / 2 ;
    text-align: center;
}
.item-firstpottxt {
    grid-area: 4 / 1 / 5 / 2 ;
    text-align: center;
}
.item-cupsmugstxt {
    grid-area: 5 / 1 / 6 / 2 ;
    text-align: center;
}
.item-bowlstxt {
    grid-area: 6 / 1 / 7 / 2 ;
    text-align: center;
}
.item-practicetxt {
    grid-area: 7 / 1 / 8 / 2 ;
    text-align: center;
}

/* Gallery */
.item-gallerytxt {
    grid-area: 5 / 2 / 8 / 3;
    text-align: center;
}

.gallery {
    grid-area: 5 / 2 / 8 / 3;
    display: grid;
    grid-template-columns: repeat(3, 11rem);
    grid-template-rows: repeat(3, 11rem);
    gap: 11px;
    padding-top: 6rem;
    place-content: start center; /*first value is align-content, second is justify-content*/
    overflow: visible;
}
.gallery > img {
    width: 10rem;
    aspect-ratio: 1;
    border: 5px solid var(--accent3);
    border-radius: 7%;
    overflow: hidden;
    transition: 0.4s ease-in-out;
}
.gallery > img:hover {
    transform: scale(1.75);
    border: 5px solid var(--primary);
    transition: 0.8s ease;
}
.item-gallerytxt {
    padding-top: 1rem;
}
.capy {
    width: 16rem;
    position: fixed;
    bottom: 0;
    right: 15rem;
}