/*basic reset*/
* {margin: 0; padding: 0;}

:root {
    --white: #ffffff;
    --notwhite: #ffffe6;
    --lesswhite: #f9f9ec;
    --notblack: #262626;
    --black: #000000;
    --yellow: #fff000;
    --red: #e60000;
    --gray: #8c8c8c;
    --grey: #b3b3b3;
    --brick: #993333;
    --lighterblue: #8fc2ef;
    --lightblue: #63aae9;
    --blue: hsl(208, 75%, 52%);
    --darkblue: #1a6cb3;
    --darkerblue: #135086;
}
body {
    color: var(--lesswhite);
    font-family:Arial Black, Arial, sans-serif;
    max-width: 800px;
    background-color: var(--blue);

}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/*General Typography*/
html {
    font-size: 13px; 
}
a, a:hover, a:visited {
    text-decoration: none;
    color: var(--lesswhite);
}
p {
        color: var(--lesswhite);
    text-align: center;
}
#randomImage {
  transition: opacity 1s ease-in-out; /* 1s means 1 second. Adjust as you like. */
}
#only h2 {
    color: yellow;
}
/*layout*/
#layoutWrap {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
}
#jillyJail {
      width: 420px;
      height: 420px;
      position: relative;
      overflow: hidden;
    text-align: center;
}
      
      #jillyButt {
      position: absolute;
      top: 50%;
      left: 50%;
      cursor: pointer;
    box-shadow: -0.8rem 0.8rem 0.6rem -0.6rem rgb(255 255 255 / 33%) inset,
                0.6rem -0.8rem 0.8rem -0.4rem rgb(0 0 0 / 58%) inset,
                -0.6rem -0.8rem 0.8rem -0.4rem rgb(0 0 0 / 38%) inset,
/*                 0.1rem 0.1rem 0.3rem 0.05rem rgba(30, 144, 255, 0.5),*/
                 -0.2rem 0.4rem 0.4rem 0.05rem rgba(19, 80, 134, 0.77);
    border-top-color: var(--lightblue);
    border-right-color: var(--blue);
    border-bottom-color: var(--darkerblue);
    border-left-color: var(--darkblue);
    color: white;
    border-radius: 0.8rem;
    text-shadow: 1px 0.05rem 0.2rem rgba(0, 0, 0, 0.5);
    background: linear-gradient(rgba(30, 144, 255, 1), rgba(0, 77, 153, 1));
    padding: 6px 24px;
    transition: transform 0.3s ease;
}
#jillyButt:hover {
    color: var(--yellow);
    box-shadow: 0.8rem 0.8rem 0.6rem -0.6rem rgb(255 255 255 / 33%) inset,
                -0.6rem -0.8rem 0.8rem -0.4rem rgb(0 0 0 / 44%) inset,
                 -0.1rem -0.1rem 0.3rem 0.05rem rgba(30, 144, 255, 0.5),
                 0.2rem 0.4rem 0.4rem 0.05rem rgba(19, 80, 134, 0.77);
    border-top-color: var(--lightblue);
    border-right-color: var(--darkblue);
    border-bottom-color: var(--darkblue);
    border-left-color: var(--lightblue);
}