*, *::after, *::before {
    box-sizing:border-box;
    /* border: 2px solid black; */
}

body {
    background-image: url("sky.jpg");
    margin: 0;
    overflow: hidden;
}

.title {
   font-family: monospace;
   font-size: 2.5rem;
    z-index: 10;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    inset: 0;
    margin: 0;
    flex-direction: column;
    
}

.subtitle {
    margin-top: .5rem;
    
}

.hide {
    display: none;
}

.bird {
    --bird-top: -1000;
    --bird-size: 60px;
    position: absolute;
    background-position: center center;
    width: var(--bird-size);
    height: var(--bird-size);
    left: var(--bird-size);
    top: calc(var(--bird-top) * 1px);
    /* border-radius: 50%; */
}

img {
    width: 110%;
    height: 110%;
    object-fit: cover;
  }

.pipe {
    /* --pipe-width: 120;
    --pipe-left: 100;
    --hole-top: 500;
    --hole-height: 120; */
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--pipe-width) * 1px);
    left: calc(var(--pipe-left) * 1px);
    
}

.pipe > .segment {
    position: absolute;
    width: 100%;
    background-color: hsl(100, 75%, 50%);
}

.pipe > .top {
    top: 0;
    bottom: calc(var(--hole-top) * 1px);
    border: 2px solid black;
    
}

.pipe > .bottom {
    bottom: 0;
    top: calc(100vh - (var(--hole-top) * 1px) + calc(var(--hole-height) * 1px));
    border: 2px solid black;
}