/* layout */
:root {
    --border:pink ;
    --accent: pink;
    --bg: #ffd2d2;
    --gradientTop: white;
    --gradientBottom: rgba(255, 240, 240, 0.8);
}

 ul { list-style-type: none; }


* { 
box-sizing: border-box;
}


body {
padding: 10px;
font-family: 'Proggy Clean', sans-serif, magica;
background-image: url("img/backgrounds+favicons/spring.png");
background-size: cover;
background-attachment:fixed;
background-repeat: no-repeat;

}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.container {
	width:880px;
	margin: 0 auto 12px auto;
	border: 6px solid transparent;
	outline: 3px solid var(--gradientTsop);
	outline-offset: 4px;
    border: 6px solid transparent;
    outline: 3px solid transparent;
    outline-offset: 4px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    gap: 5px;
    background-color: #fff0eb;
    border: 2px solid #b27ca6;
 border-radius: 6px;
    }
   
    .container.flipped {
        flex-direction: row-reverse;
      }

    .small { width: 150px; }
    

    .half { width: 711px; background: none;
       font-family: 'balsamiq sans';
         border: 0px solid white;
        letter-spacing: 0.1px;
        position: relative;
        font-size: 10pt;
        line-height: 1.2;
    }
    .half2 { width: 284.8px; }
   .full { width: 866px;}


header {
background-size: cover;
background-position: 0% 50%;
width: 866px;
height: 180px;
border: 2px solid var(--border);
border-radius: 5px;
position: relative;
}

header span {
font-family: "magica";
font-size: 2.5rem;
  position: absolute;
  bottom: -5px;      
  left: 33%;         
font-weight: bold;
color: #ffffff;
margin: 4px;
text-shadow: #b27ca6 1px 0px 0px, #b27ca6 0.540302px 0.841471px 0px, #b27ca6 -0.416147px 0.909297px 0px, #b27ca6 -0.989992px 0.14112px 0px, #b27ca6 -0.653644px -0.756802px 0px, #b27ca6 0.283662px -0.958924px 0px, #b27ca6 0.96017px -0.279415px 0px;
}

nav {
border: 2px solid var(--border);
border-radius: 5px;
padding: 5px;
background: linear-gradient(var(--gradientTop),var(--gradientBottom));
}

nav div {
text-align: center;
font-size: 1.25rem;
margin: 5px 5px 10px 5px;
color: white;
text-shadow: #b27ca6 1px 0px 0px, #b27ca6 0.540302px 0.841471px 0px, #b27ca6 -0.416147px 0.909297px 0px, #b27ca6 -0.989992px 0.14112px 0px, #b27ca6 -0.653644px -0.756802px 0px, #b27ca6 0.283662px -0.958924px 0px, #b27ca6 0.96017px -0.279415px 0px;
border-radius: 5px ;
font-family: magica;
}

section {
        border: 2px solid var(--border);
        border-radius: 5px;
        background: linear-gradient(var(--gradientTop),var(--gradientBottom));
        padding: 5px;
        }

footer {
text-align: center;
margin-bottom: 5vw;
font-size: 0.8rem;
}

/* text */
.mainboxescontent p {margin: 5px; margin-top: 15px; margin-bottom: 15px;
}

 .mainboxes{
      width: 555px;
   background:none;
    border: 0px solid white;
    padding: 0px;
    margin: 0px 0px 5px 0px;

    }

   .mainboxescontent{
        padding: 0px 15px 0px 15px;pa
     
        } 

/* a */



nav a:hover, nav a:focus {
background: linear-gradient(to right,var(--bg), var(--gradientBottom), var(--gradientTop));font-style: italic; color: #000000;
}

nav a {
    color: #000000;
    font-size: 11pt;
display: block;
margin: 5px;
background: linear-gradient(to right,var(--bg),var(--gradientBottom));
border-radius: 5px;
padding: 2px 7px;
text-decoration: none;
}

.full a {color: #b27ca6;}

/* header */

h1, h2, h3, h4, h5, h6, p  { 
margin: 5px;
line-height: 1.2;
}

h2 { 
font-weight: normal;
text-align: center;
font-size:14px;
background-image: linear-gradient(  #edc8e5, #c57fb6);
color: white;
border-radius:3px;
border:1px solid;
margin:1em 0;
padding:0 1em
}

dt {color: #b27ca6;}

h3 { 
font-size: 1.1rem;
}

 .subheader h3{
        margin: 0px;
        font-family: "magica";
    
        }

        .subheader{
            background-image: linear-gradient( #fafefd, #ffb2d6);
            border-bottom: 1px solid #ffb2d6;
            padding: 3px;
            color: #fff;
            letter-spacing: 1px;
            border-radius: 10px;
       
            }

    #header{
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #ff668a;
    background-image: linear-gradient(to right, #ff668a, #ffbfce);
    color: #fff;
    letter-spacing: 3px;
    }

/* extra */

  .masonry {column-count: 2;
column-gap: 6px;
}

.masonry img {width: 100%;
display: block;
margin-bottom:6px;
border-radius: 6px;}

li {list-style: none;}


                    details > summary {
    list-style-type: '♡ ';
}

details[open] > summary {
    list-style-type: '♡ ';
}


  .sidecontent ul, li{
      font-size: 12px;
margin: 0px;
list-style-type: none;
padding-left: 0px;
letter-spacing: 1px;

}

 .no-animation {
    transition: none !important
  }

    .bw-image {
    filter: grayscale(100%);
   
  }

  .bw-image:hover {
    filter: grayscale(0%);
  }

  .saturate-image {}

  .saturate-image:hover {filter: saturate(180%);}

  .sepia-image {filter: sepia(50%);}
  .sepia-image:hover {filter: sepia(0%)}

/* media screen */

@media screen and (min-width: 4000px) {
.container {
padding-left: 2px;
}
}
  

@media screen and (max-width: 800px) {
   body {
   background-size: cover ;
    }
    }