/* Reset rule */
* {
    border: 0; margin: 0; padding: 0; box-sizing: border-box;
}

body {
    outline: 2px solid red;
    position: relative;
}

.wrapper {
    background: linear-gradient(to left, transparent, 55%, #eee), url(/images/jellies.jpg);
    padding-bottom: 500vh;
}

header {
    width: 100vw;
    padding: 2%; padding-bottom: 1%;
    text-align: left;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-indent: 3%;
    border-bottom: 2px solid gray;
    margin-bottom: 50px;
}

h1 {
    color: darkblue;
    text-shadow: 2px 2px 2px hotpink;
    font-size: 4em;
    padding-bottom: 2%;
}

h2 {
    color: darkblue;
    text-indent: 12%;
    margin-bottom: 4vh;
}

header > a {
    border-radius: 10px;
    color: #eee;
    padding: 10px;
    position: absolute; left: 92vw; top: 4vh;
    transition: ease-in-out .3s;
}

header > a:hover {
    background-color: rgba(50, 50, 180, 0.3);
    color: lightgray;
}

.circle {
    outline: 1px solid lightgray;
    box-shadow: 2px 2px 2px darkgray;
    background-color: #eee;
    padding: 50px;
    width: 500px;
    position: absolute; left: 7%;
}

.circle > div {
    outline: 2px solid white;
    width: 400px; height: 250px;
    background: repeating-linear-gradient(
        190deg,
      rgba(255, 0, 0, 0.5) 40px,
      rgba(255, 153, 0, 0.5) 80px,
      rgba(255, 255, 0, 0.5) 120px,
      rgba(0, 255, 0, 0.5) 160px,
      rgba(0, 0, 255, 0.5) 200px,
      rgba(75, 0, 130, 0.5) 240px,
      rgba(238, 130, 238, 0.5) 280px,
      rgba(255, 0, 0, 0.5) 300px
    ), repeating-linear-gradient(
      -190deg,
      rgba(255, 0, 0, 0.5) 30px,
      rgba(255, 153, 0, 0.5) 60px,
      rgba(255, 255, 0, 0.5) 90px,
      rgba(0, 255, 0, 0.5) 120px,
      rgba(0, 0, 255, 0.5) 150px,
      rgba(75, 0, 130, 0.5) 180px,
      rgba(238, 130, 238, 0.5) 210px,
      rgba(255, 0, 0, 0.5) 230px
    ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
        200px, blue 250px, indigo 300px, violet 350px, red 370px);
}

.actualcircle {
    outline: 1px solid lightgray;
    box-shadow: 2px 2px 2px darkgray;
    background-color: #eee;
    padding: 50px;
    width: 500px;
    position: absolute; left: 30%; top: 20%;
}

.actualcircle > div {
    background-image: url(/images/jackolantern.jpg);
    background-position: 50% 50%;
    width: 400px; height: 400px;
    border-radius: 50%;
    outline: 2px solid white;
}

.stripes {
    outline: 1px solid lightgray;
    box-shadow: 2px 2px 2px darkgray;
    background-color: #eee;
    padding: 50px;
    width: 500px;
    position: absolute; left: 56%; top: 37%;
}

.stripes > div {
    background-image: repeating-linear-gradient(140deg, hotpink, hotpink 30px, blueviolet 31px, blueviolet 33px, #234 34px, #234 60px, blueviolet 61px, blueviolet 63px, hotpink 64px);
    width: 400px; height: 200px;
}

.repeatingradial {
    outline: 1px solid lightgray;
    box-shadow: 2px 2px 2px darkgray;
    background-color: #eee;
    padding: 50px;
    width: 500px;
    position: absolute; left: 30%; top: 48%;
}

.repeatingradial > div {
    width: 400px; height: 400px;
    background: radial-gradient(white 1px, purple 15px, orange 45px, #eee 50%);
}

.bullets {
    outline: 1px solid lightgray;
    box-shadow: 2px 2px 2px darkgray;
    background-color: #eee;
    padding: 50px;
    width: 500px;
    position: absolute; left: 7%; top: 65%;
    list-style-image: url(/images/starfish-16.png);
}

h4 {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 24px;
    text-decoration: underline;
    margin-bottom: 15px;
}

.text {
    border: 2px solid hotpink; border-radius: 15px;
    position: absolute; top: 400vh; left: 22%;
    padding: 10px;
    background: linear-gradient(blueviolet, #ddd);
    /* background-color: rgba(250, 250, 250, 0.4); */
}

p {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    font-size: 2em;
}

.text img {
    margin-left: 43%;
}

.button {
    border: 2px solid white;
    padding: 50px;
    width: 400px; height: 400px;
    border-radius: 50%;
    position: absolute; left: 33%; bottom: 250px;
}

.button:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

aside {
    color: #ddd;
    width: 17%;
    position: absolute; top: 70%; left: 80%;
}

aside > p {
    text-align: left;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

footer {
    border: 2px solid green;
    width: 98.7vw; height: 600px;
    position: absolute; bottom: 5px;
    background: url(/images/astronaut.jpg) 50% 50%;
    background-repeat: no-repeat;
    background-size: 100vw;
}