:root{
  --white: #ebeedf;
  --light-pink: #f3cece;
  --pink: #c59191;
  --dark-pink: #b76565;
  --red: #983434;
  --purple: #7d354c;
  --dark-purple: #541d27
  --brown: #6a412e ;
}


a:link {
    color: var(--red);
    text-decoration: none;
    font-weight: bold;
}
a:visited {
    color: var(--dark-pink);
}
a:hover {
    text-decoration: underline;
    color: var(--pink);
  transition: all 0.3s ease;
}
a:active {
    font-style: italic;
}
::selection {
    background-color: rgba(252, 135, 193, 0.5);
    color: white;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: #d9b4b4;
}


input{
appearance: none;
    border: 5px solid white;
    border-radius: 50%;
}
input:checked{
    border: 5px solid var(--dark-pink);
}

label {
    color: var(--dark-pink);
}
label:has(input:checked){
   color: var(--purple); 
  transition: all 0.5s ease;
}

body{
  overflow-wrap: break-word;
  color: var(--purple);
  background: var(--white) /*url("bg-img-pink.png") repeat-x*/
}

body:has(#light:checked){
  --white: #ebeedf;
  --light-pink: #f3cece;
  --pink: #c59191;
  --dark-pink: #b76565;
  --red: #983434;
  --purple: #7d354c;
  --dark-purple: #541d27
  --brown: #6a412e ;
}
body:has(#dark:checked){
  --white: #c2a1a1;
  --light-pink: #512323;
  --pink: #a95d62;
  --dark-pink: #e8a2a2;
  --red: #983434;
  --purple: #541d27;
  --dark-purple: #7d354c
  --brown: #55271c ;
}

.container{
  box-sizing: border-box;
  background-color: rgba(255, 216, 228, 0.45) ;
  background-image: url("bg-img-pink2.png"), url("bg-lace2.png") repeat-x repeat-y;
  border-radius: 15px;
  border: 2px dashed var(--pink); 
    font-family: Verdana, sans-serif;
    font-size: 12px;
    letter-spacing: 0.005rem;
    line-height: 1.5;
    margin: 3vw auto;
    max-width: 75vw;
  max-height: 95vh;
  overflow: auto;
    padding: 2em 1.5em;
  display: grid;
  gap: 1.2em;
  grid-template-columns: 250px auto;
  grid-template-areas:
    "aside main"
    "aside footer";
}


aside{
  grid-area: aside;
  border: 2px dashed var(--pink);
  border-radius: 15px;
  background-color: white;
  padding: 1em 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  align-items: center;
}

header{
  grid-area: header;
  background-color: var(--white);
  border: 2px dashed var(--dark-pink);
  border-radius: 15px;
    padding: 0.2em 1em;
    margin: auto;
    width: fit-content;
}
header h2{
  margin: 0;
  color: var(--pink); 
}

nav p, section, .divvies{
  text-align: center;
}

#img1{
  width: 170px;
  height: 100px;
  border-image: url(border1.png) 30 30 round;
}
nav h3, article h4 {
  color: var(--dark-pink);
  padding: 2px 1em;
  margin: 0;
}
stamp-wall{
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  gap: 0.7em 0.5em;
}
.stamps img{
  width: 99px;
  height: 56px;
}
stamp-wall img{
  width: 120px;
  height: 20px;
}
#img2{
  width: 130px;
  height: 50px;
}


main{
    display: flex;
    flex-direction: column;
  gap: 0.6em;
    grid-area: main;
    align-items: center;
  margin: 1em 0.3em;
  max-height: 75vh;
  border: 2px dashed var(--pink);
  border-image: url(border-3.png) 30 30 round;
}

section{
  margin: 0.5em;
}
  desc-text{
    display: flex;
    flex-direction: row;
    padding: 0.5em; 
    margin: 0.5em;
    border-image: url(border-2.png) 30 30 round;
    width: fit-content;
    align-items: center;
    background-color: white;
  }
    desc-text img {
    width: 30px;
    height: 30px;
  }

fe-ed{
  display: flex;
  flex-direction: column;
  overflow: auto;
  margin: 1em 0.7em;
  border-image: url(border-4.png) 30 30 round;
  gap: 0.5em;
}
  article{
    border: 2px dashed var(--pink);
    border-radius: 10px;
    padding: 0;
}
    article h4 {
    border-radius: 8px 8px 0 0;
    background-color: var(--light-pink);
}
      .content{
    border-radius: 0 0 10px 10px ;
    padding: 0.5em;
}


footer{
  grid-area: footer;
  text-align: center;
}





@media screen and (max-width: 750px) {
.container {
    letter-spacing: 0.010rem;
    line-height: 1.6;
    margin: 2.5w;
    max-width: 85vw;
  max-height: 95vh;
    padding: 2em 1em;
  display: grid;
  gap: 0.7em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "aside"
    "main"
    "footer";
}
aside{
    display: grid;
    gap: 0.5em;
  grid-template-areas: 
    "header header"
    "img1 nav"
    "stamp-wall stamp-wall"
  }
  
    header{grid-area: header;}
    #img1{grid-area: img1;}
  nav{grid-area: nav;}
  stamp-wall{
    grid-area: stamp-wall;
    max-height: 100px;
  }
}

@media (prefers-color-scheme : dark) {
  :root{
  --white: #c2a1a1;
  --light-pink: #512323;
  --pink: #a95d62;
  --dark-pink: #e8a2a2;
  --red: #983434;
  --purple: #541d27;
  --dark-purple: #7d354c
  --brown: #55271c ;
}
}
@media (prefers-color-scheme : light) {
    :root{
  --white: #ebeedf;
  --light-pink: #f3cece;
  --pink: #c59191;
  --dark-pink: #b76565;
  --red: #983434;
  --purple: #7d354c;
  --dark-purple: #541d27
  --brown: #6a412e ;
}
}