html {
    scroll-behavior: smooth;
  }

body{ margin: 24px auto;}

.row {  
    display:flex;
    justify-content: flex-start;
    align-items: center;
    margin-top:3vw;
    margin-left: clamp(20px, 5vw, 320px);
}

.em{
    vertical-align:baseline;
    height: 1.2rem;
    width: 1.2rem;
}

img.screenshot{
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}
#content{
    align-items:flex-start;
    max-width: 700px;
    margin-left: clamp(124px, 27vw, 345px);
    padding-right: 32px;
}
.runin{
    font-weight: 800;
    font-family: 'Molle', cursive;
    font-style: italic;
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    padding-right: .5rem;
    color: rgb(58, 58, 58);
}
.buttoncontainer{
    display: flex;
    justify-content: stretch;
    width: calc(100%-10px);
    padding: 0 20px 0 0;
}

.spaced{
    margin-top: 24px;
}
.button {
    background: white;
    display: inline-block;
    border-radius: 0.5rem;
    padding: .5rem clamp(.2rem, 10%, 1rem);
    text-decoration: none;
    font-size: clamp(1.2rem, 1.5vw, 2rem);
    /* font-family: 'Yusei Magic', system-ui; */
    font-family: 'Molle', cursive;
    font-style: italic;
    margin: .5rem;
    transition-duration: 0.25s;
    cursor: pointer;
    font-weight: 900;
    text-align:center;
}
#indexlogo{
    width:clamp(100px, 30vw, 1000px);
    transform: rotate(-16deg);
    margin-left: -20px;
    margin-right: 8px;
}
.indexsmall {
    flex: 1;
    padding: 24px 24px;
    margin-top:6vw;
}
.indexlarge {
    flex: 2;
    background-color: white;
    padding: 24px 24px;
    transform: rotate(1deg);
    box-shadow: 6px 6px var(--femiPink);
}

.full {    
    flex: 2;
    border: 2px solid var(--femiTeal);
    color: rgb(58, 58, 58);
    text-align: center;
    background: linear-gradient(20deg, #46bda920 0%, #46bda920 47%, rgba(1,112,152,0) 48%, rgba(0,212,255,0) 100%);
    /* text-shadow: 2px 2px 3px black; */
}

.full:hover {
    background-color: var(--femiTealHalf);
    
    text-shadow: 2px 2px 2px white;
}

.half {
        flex: 1;
        border: 2px solid var(--femiBlue);
        color: var(--femiBlue);
        text-align:center;
}
.flah:hover {
    background-color: var(--femiPinkHalf);
    /* color: white; */
    text-shadow: 2px 2px 2px white;
}


.flah {
    flex: 1;
    border: 2px solid var(--femiPink);
    color: rgb(58, 58, 58);
    /* background-color: var(--femiPinkHalf); */
    background: linear-gradient(20deg, #ff88d620 0%, #ff88d620 47%, rgba(1,112,152,0) 48%, rgba(0,212,255,0) 100%);
    /* text-shadow: 1px 1px #00000022; */
}

:root{
    --femiBlue: #7a87ff;
    --femiPink: #ff88d6;
    --femiTeal: #46bda9;
    --femiBlueHalf: #7a87ff40;
    --femiPinkHalf: #ff88d640;
    --femiTealHalf: #46bda940;
}
.item{
    width: clamp(50px, 20vw, 200px);
    text-align:center;
    font-family: 'Kaushan Script', cursive;
    color: var(--femiBlue);
    font-size: clamp(1.7rem, 2.5vw, 2.8rem);
    font-weight: 800;
}
p, li {
    font-family: 'Yusei Magic', system-ui;
    font-size: clamp(1rem, 1.75vw, 1.25rem);
    line-height: 150%;
    padding-right: 20px;
}
p.crumbs, p.crumbs a, p.crumbs a:visited, figcaption {
    font-size: .85rem;
    font-size: clamp(.85rem, 1.25vw, 1rem);
    margin-bottom: 0;
    line-height: 200%;
    color:#00000080;
}

figcaption{
    font-family: 'Yusei Magic', system-ui;
    line-height:150%;
    padding-bottom:24px;
}

blockquote{
    border-left: 8px solid var(--femiBlue);
    padding-left: 16px;
    margin-inline-start: 24px;
}

figure{
    margin-inline-start:0;
}
.contentimg{
    float:left;
    padding-right: 24px;
    margin-left: 0px; 
    width: 100%;
}

li { line-height: 150%;
    padding-bottom: 1rem;
    text-indent: -24px;
}
h1 {
    /* font-family: 'Molle', cursive; */
    font-family: 'Yusei Magic', system-ui;
    color: var(--femiPink);
    margin-top: 8px;
    margin-bottom: 32px;
    line-height:100%;
    font-size: clamp(2.5rem, 3.5vw, 3.5rem);
}
h2 {
    font-family: 'Yusei Magic', system-ui;
    color: var(--femiPink);
    margin-bottom: 1rem;
    margin-top: 2rem;
    font-size: clamp(2rem, 2.9vw, 2.9rem);
}
p a, li a {
color: black;
text-decoration: wavy;
text-decoration-line: underline;
text-decoration-color: var(--femiTeal);
text-underline-offset: 15%;
/* white-space: nowrap; */
}

p a:hover, li a:hover{
    background-color: var(--femiPinkHalf);
}

.button a, .button a:visited, .button a:active{
    text-decoration: none;
    text-align: center;
    color: var(--femiTeal);
}
.button a:hover {
    color: white;
}

ul { 
padding-inline-start: 24px;
margin-top: 0;
margin-bottom: 1rem;
}

li{
list-style: none;
font-size: clamp(1rem, 1.75vw, 1.25rem);


}
li::before{
content: '';
display: inline-block;
height: 16px;
width: 16px;
margin-right: 8px;
background-image: url(/img/cross.svg);
transform:rotate(45deg);
}
p a:visited, li a:visited{color:black;}

#indexcontainer{
    display:flex; 
    align-items: 
    flex-start; 
    width: 80vw; 
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color:var(--femiPinkHalf);
}
#bowimg{
    position:fixed; 
    transform:rotate(3.761deg); 
    margin-top:5px; 
    width:clamp(100px, 18vw, 200px);
}
@media (max-width: 650px) and (max-height:650px){

    #indexcontainer{
        background-position: 0 0; 
        width: 95vw;
        position:unset;
        top: initial;
        transform: initial;
    }
}

@media (max-width: 650px){
    .indexlarge{
        margin-top: -80px;
    }
    #indexcontainer{
        background-position: 0 0; 
        width: 95vw;
        position:unset;
        top: initial;
        transform: initial;
    }
    #indexlogo{
        width:100%;
        margin-top: -100px;
        bottom: 0;
        position: relative;
    }
    .contentimg{
        width: 90%;
    }
    .buttoncontainer, .titlepage {
        flex-direction:column;
        padding: 0;
        width: 90vw;
    }

#bowimg{
    position: absolute;
    margin-top: -10px;
    right: 25px;
}
    #content{
        margin-left: 25px;
    }
}