:root{
                --header: url(/ethel/bannerl.webp);
                --bodybg: #0d0f05;
                --mainbg:#beaa6c;
                --linka:#5a3d1f;
                --acolor:#afa48c;
                --outline:#474f0e;
                --isitreallyyou:url(/ethel/ethel.png);
                --inner:#dac279;
                --landscape:url(/ethel/grass.webp)
            }
          .light {
              --header: url(/ethel/bannerd.webp);
                --bodybg: #222222;
                --mainbg:#3f3d36;
                --linka:#121111;
                --acolor:#afa48c;
                --outline:#817d75;
                --isitreallyyou:url(/ethel/rosary.png);
                --inner:#cac4b2;
                --landscape:url(/ethel/gray.webp)
           }
            @font-face {
                font-family: '/Ethel';
                src: url('/ethel/AugsburgerSchriftML.woff2');
                font-weight: 400;
                font-style: normal;
            }
            *{
              transition:0.5s ease;
            }
            body, html {
                image-rendering: pixelated;
                font-family: 'Copse';
                overflow: auto;
                background: var(--bodybg);
                margin:0;
                padding-bottom:15px;
            }
            h1,h2,h3,h4{
                margin:0;
                padding:0;
                font-family: 'Ethel';
            }
            header{
                background:var(--header);
                width:100%;
                height:180px;
                background-size:cover;
                background-position: center;
                position:relative;
            }
            header::before{
                background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0) 30%, var(--bodybg));
                bottom: 0;
                content: "";
                display: block;
                height: 160px;
                position: absolute;
                width: 100%;
            }
            .logo{
                height:80%;
                display:block;
                position: absolute;
                bottom:-3em;
                left:44%;
            }
            .anchor{height:0; width:0;}
            .main{
                width:1172px;
                background:var(--mainbg);
                padding:10px;
                margin:0 auto;
                margin-top:60px;
                outline:1px solid var(--outline);
                outline-offset: 10px;
                height:800px;
                position: relative;
            }
            .links{
                margin:0 auto;
                justify-content: center;
                text-align: center;
            }
            .links a{
                margin-left:15px;
                background:var(--linka);
                color:var(--acolor);
                text-decoration:none;
                Padding:5px;
              transition:0.5s ;
            }
            .links a:hover{
                outline:1px solid var(--outline);
                outline-offset: 2px;
            }
            .left , .right{
                height:800px;
                background:url(/ethel/border.webp);
                width:36px;
                position: absolute;
            }
            .right{
                transform:rotate(180deg);
                right:0;
            }
            .quote{
                text-align: center;
            }
            .willoughby{
                background:url(/ethel/willoughby.png);
                height:618px;
                width:403px;
                background-repeat: no-repeat;
                z-index: 99;
                position: absolute;
                bottom:0;
                left:-8em;
            }
            .whoisthis{
                background:var(--isitreallyyou);
                width:514px;
                height:500px;
                background-size: cover;
                position: absolute;
                bottom:0;
                right:-11.5em;
                z-index: 99;
            }
            
            .page {
            display: none;}
            .page:target {
                display: block;}
            .page:target ~ #home {
                display: none;}
            .border{
                background:var(--inner);
                width:45%;
                height:90%;
                margin: auto; 
                box-shadow: 0px 0px 4px inset rgba(0, 0, 0, 0.6), 0px 0px 4px rgba(0, 0, 0, 0.2);
            }
            #togglePaletteBtn {
                margin-left:15px;
                background:var(--linka);
                color:var(--acolor);
                text-decoration:none;
                Padding:7px 5px 6px;
                font-family: '/Ethel';
                border:0;
                cursor:pointer;
              transition:0.5s ;
            }
            #togglePaletteBtn:hover {
                outline:1px solid var(--outline);
                outline-offset: 2px;
                cursor:pointer;
                font-style: italic;
            }
            .image{
                background:var(--landscape);
                position: absolute;
                right:2.4em;
                width:24%;
                height:25%;
                z-index: 1;
                background-size: 100% 100%;;
                top:6em;
            }
            .rosary{
                position: absolute;
                width:20%;
                right:6em;
                top:15em;
                z-index: 2;
                transform: rotate(10deg);
            }
            .potrait{
                position: absolute;
                width:20%;
                left:3em;
            }
            .initials{
                position: absolute;
                bottom:0;
                left:12em;
                margin:0;
                font-family: 'Ethel';
            }
            .mother{
                
                position: absolute;
                width:10%;
                left:12em;
                top:13em;
            }
            .bullet{
                opacity: 0;
                position: absolute;
                width:20%;
                z-index: 9;
                transition: .5s;
            }
            .bullet:hover{
                opacity: 1;
                transition: .5s;
            }