/* If you replace the image to the left but it looks too small, go to the '.imgwrapper' selector and increase the flex-grow property.
If you want to change the image size on mobile version, go to the '@media(max-width:515px)' selector and change the widths for the '.img' selector accordingly. ♡ */


/* fonts */
 @font-face {
     font-family: CoalhandLuke;
     src: url(../font/CoalhandLuke.ttf);
}
 @font-face {
     font-family: Honey_Salt;
     src: url(../font/Honey_Salt.otf);
}
 :root {
    /* colors */
     --background-image: url("../img/bg/fabric-heartsplaid-pink.png");
     --background-color: #ffd9f8;
     --text: #532635;
     --box-background: #fefaf4;
     --accent: #e1373a;
     --accent-dark: #7a2d1d;
     --accent-light: #e47ba0;
     --accent-lighter: #ffd1e9;
    /* fonts */
     --base-font: 'Honey_Salt', sans-serif;
     --text-size: 18px;
     --secondary-font: 'CoalhandLuke', sans-serif;
    /* misc styling */
     --background-image-size: auto;
     --max-width: 850px;
     --spacing: 15px;
     --border-radius: 8px;
     --text-underline: wavy var(--accent-light);
     --border: 20px solid transparent;
     --shadow-color: var(--accent);
     --shadow-color-hover: var(--accent-light);
     --title-color: var(--box-background);
     --nav-width: 120px;
    /* don't mess with these unless you really want to */
     --header-size: clamp(2em, calc(var(--max-width) / 20), 30px);
}
 * {
     box-sizing: border-box;
     max-width: 100%;
     scrollbar-color: var(--accent-light) var(--accent-dark);
     -ms-overflow-style: none;
     box-decoration-break: clone;
     margin: 0;
     padding: 0;
}

 ::selection {
     background-color: #211e20;
     color: #e9efec;
}
 .container {
     display: flex;
     flex-direction: row;
     gap: 1rem;
     max-width: var(--max-width);
     margin: 0 auto;
}
 body{
     background-image: var(--background-image);
     background-attachment: fixed;
     font-family: var(--base-font);
     font-size: var(--text-size);
     color: var(--text);
     margin: 5%;
}
 .imgwrapper{
     display: flex;
     flex-grow: 1;
     flex-basis: 0;
}
 .img{
     align-self: center;
     width: 100%;
     min-width: 215px;
}
 .main{
     display: flex;
     flex-direction: column;
     flex-grow: 3;
     flex-basis: 0;
     gap: 1rem;
}
 .box{
     display: flex;
     gap: 1rem;
}
 .sticker{
     align-self: center;
     width: 200px;
}
 .content{
     flex-grow: 6;
     flex-basis: 0;
     min-width: 220px;
     height: 220px;
     border: 4px double var(--accent-dark);
     border-radius: 5px;
     padding: 1rem;
     overflow: scroll;
     overflow-x: hidden;
     text-align: center;
     line-height: 1.5;
     flex-direction: column;
     gap: 0.5rem;
     background-image: url(../img/bg/mag-white-txtbleed2.png);
     letter-spacing: 1px;
}
 .headers{
     font-size: 30px;
     text-align: left;
     font-weight: normal;
     font-family: var(--secondary-font);              
     letter-spacing: 0;
}

 details {
     text-align: left;
}
 summary{
     cursor: pointer;
     text-align: center;
     text-transform: uppercase;

}
 footer {
    text-align: center;
    margin: 5px;
    text-transform: uppercase;
    padding: 10px;
     font-size: 30px;
}
 h1{
     display: inline-block;
     margin: 0 0 auto;
     text-align: center;
     margin: 20px 10px 0px;
     padding: 0px 30px 0px 30px;
     display: align-self;
     flex-direction: column;
     display: none;
     text-transform: uppercase;

}
h3{
         text-transform: uppercase;

}
 hr{
     border: 1px dashed var(--accent-dark);
}
 a{
     text-decoration: none;
     color: #903643;
     cursor: pointer;
}
 a:hover{
     font-style: italic;
}
 a:active{
     font-style: italic;
     font-weight: bold;
}

    .sticker{
     max-width: 200px;
    }

 .button img {
     image-rendering: pixelated;
     width: 88px;
     height: 31px;
}

 @media(max-width:730px){
    body{
         height: calc(100vh - env(safe-area-inset-bottom));
        /* For iOS devices */
    }
     h1{
         display: table-column;
    }
     .container{
         flex-direction: column;
    }
     .content{
         height: auto;
    }
     .imgwrapper {
         display: none;
    }
    .sticker{
         display: none;
    }
}