* {
    box-sizing:border-box;
}
body {
    background-color:#eee2e9;
    padding:0px;
    margin:0px;
    font-size:22px;
    font-family:Verdana, sans-serif;
}

a {
    color:#ce5569;
    transition:0.1s;
}
a:hover {
    color:#f1778b;
}


/* nav !*/
nav {
    background-color:#fff;
    background-image:linear-gradient(#fff,#fff,#fee);
    width:100%;
    position:fixed;
    border-bottom: 2px #df667a solid;
}
nav > li {
    padding:0.5em 1em;
    float:right;
    list-style-type:none;
    border-left:2px #df667a solid;
    text-decoration:none;
    color:#df667a;
    transition:0.2s;
}

nav > li > a {
    color:inherit;
    text-decoration:inherit;
    transition:inherit;
}
nav > li:hover {
    text-decoration:underline; 
    background-color:#ffeaef;
    background-image:linear-gradient(#ffeaef,#ffeaef,#f1d1d9);
}
nav > li > a:hover {
    color:inherit;
}
nav > li:active, nav > li>a:active {
    color:white;
}
nav > img {
    float:left;
    height:2.19em;
    margin:0px;
}
hamburger {
    display:none;
}
/* burgw */
header {
    padding:2.5em;
    padding-top:5em;
    background-color:#ffdddf;
    background-image:url("images/skibidibanner.png");
    background-size: cover;
    background-position: center;
    background-color: rgba(255,234,239,0.2);
    background-blend-mode: screen;

}
header > *, header {
    text-align:center;
    margin:0px;
    color:#fff;
    text-shadow: -1px -1px 0 #df667a, 1px -1px 0 #df667a, -1px 1px 0 #df667a, 1px 1px 0 #df667a;
}
header > img {
    width:40%; 
    max-width:1000px;
}
article {
    padding:1em 7em;
    font-size:16px;
    color:#ac3347;
}

.light {
    background-color:#f9f1f4;
}
blockquote {
    font-style:italic;
    padding-left:2.5em;
    margin:1em 0px;
    text-decoration:underline;
}

/* index */

carol {
    width:50%;
    height:25vw;
    background-color:#ffeeee;
    display:block;
    margin:0.5em auto;
    transition:0.2s;
    border-radius:5px;
    border:#ac3347 solid 2px;
}
carol > p {
    padding:0.5em;
}


#img1 {
    background-image:url(https://royaltoiletry.com/wp-content/uploads/2024/06/luxury-toilet-with-elegant-gold-plated-surface4.jpg);
}
#img2 {
    background-image:url(https://royaltoiletry.com/wp-content/uploads/2021/07/luxury-toilet-with-gold-lines-3.jpg);
}
#img3 {
    background-image:url(https://m.media-amazon.com/images/I/71fbUMtggRL.jpg);
}

#img1, #img2, #img3 {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}






/* about page */
.apple {
    margin:auto;
    width:100%;
}
.apple > div {
    width:40%;
    padding:1em;
    margin:0px;
    background-color:#f9f1f4;
    border-radius:5px;
    border:#ac3347 solid 2px;
}

#left {
    float:left;
}

#right {
    float:right;
}
.apple > div > img {
    width:100%;
    border-radius:4px;
    border:inherit;
    transition:0.2s;
} 
.apple > div > img:hover {
    transform:scale(1.025);
}
/* download */
.download, button {
    color:inherit;
    border:#ac3347 solid 2px;
    transition:0.4s;
    border-radius:4px;
    padding:.5em 1em;
    font-size:inherit;
    display:block;
    margin:auto;
    background-image:linear-gradient(#fff,#fff,#fee);
    
}

button:hover {
    background-image:linear-gradient(#ffeaef,#ffeaef,#f1d1d9);
    transform:scale(1.1);
}
.center {
    text-align:center;
}

#downloadhtml {
    width:20%;
    display:block;
    margin:auto;
    transition:1s;padding:1em;
    filter:hue-rotate(350deg);
}
#downloadhtml:hover {
    transform:rotate(2turn);
}

/* preview */

iframe {
    display:block;
    width:60vw;
    margin:auto;
    height:30vw;
    border-radius:5px;
}
ol > li, ul > li {
    padding:0.25em;
}
question, answer {
    display:block;
}
question {
    font-weight:bold;
    padding-bottom:0.25em;
}
answer {
    font-style:italic;
        padding-bottom:0.5em;
}

#mydesc {
    text-align:center;
}