:root{
    --linkcolor:red;
    --linkcolor2:white;
}

body{
    background:url(artipece.jpg);
    color:white;
    margin:0;
    font-family:'ugh';
    font-size:1.5rem;
    overflow:hidden;
}

main{
    background:url(movingplastic.gif);
    background-size:cover;
    width:50vw;
    height:100vh;
    margin:0;
    padding:1% 3% 0 3%;
    box-sizing: border-box;

    position:relative;
}

section{
    max-height:83%;
    overflow-y:auto;
}

#cactus1{
    top:-3%;
    left:0;
    transform: scaleY(-1);
}

#cactus2{
    top:0;
    right:0;
}

#cactus3{
    bottom:-5%;
    left:20%;
}

#fish1{
    top:-2%;
    left:40%;
    transform: scaleX(-1) rotate(3deg);
}

#fish2{
    top:40%;
    right:-5%;
    z-index:9999;
}

#fish3{
    bottom:0;
    right:10%;
    transform:rotate(-10deg);
}

a{
    color:white;
    text-shadow: -1px -1px 0 var(--linkcolor), 1px -1px 0 var(--linkcolor), -1px 1px 0 var(--linkcolor), 1px 1px 0 var(--linkcolor);
}

a:hover{
    color:red;
    text-shadow: -1px -1px 0 var(--linkcolor2), 1px -1px 0 var(--linkcolor2), -1px 1px 0 var(--linkcolor2), 1px 1px 0 var(--linkcolor2);
}

a:hover:before{
    content:url(point.png);
}

.sticker{
    position:absolute;
}

header{
    color:greenyellow;
}


.question:before{
    content: 'q: ';
    color:magenta;
}

.question{
    display:block;
    text-decoration:underline;
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
    text-decoration-color:orange;
}

.answer:before{
    content: 'a: ';
    color:blue;
}

p:hover{
    background:rgba(0,0,0,0.8);
}

@font-face {
    font-family: 'retrocompute';
    src: url(Retrocompute.ttf);
}

@font-face {
    font-family: 'ugh';
    src: url(ugh.ttf);
}