body {
    display:flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    background: linear-gradient(
    to bottom left,
        red,
        orange 50%,
        red 75%,
        orangered 75%,
        red 100%
        );
    font-family:Georgia, 'Times New Roman', Times, serif;
    height:100vh;
    
}

select {
    width: 40%;
    /* font-size: 1.2rem; */
    box-sizing: padding-box;
}

.big-container {
    background:radial-gradient(white, blue);
    padding:15px;
    border:5px #ff4a02 solid;
    border-radius:30px;
}

.instructions {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:15px;
}

button {
    padding:10px 12px;
}

.container {
    height:500px;
    display: flex;
    width:500px;
}

.inside {
    width:100%;
    height:100%;
    z-index: 1;
}

/* img{
    height:400px;
} */

/* .one {
    background-color: rgb(255, 120, 120);
} */

/* found this animation here: https://prismic.io/blog/css-background-effects*/
.lines {
    position:absolute;
    height:500px;
    margin:auto;
    width:500px;
    
    display:flex;
    justify-content: space-between;
    z-index: -2;
}

.line {
    position:relative;
    width:2px;
    height:100%;
    overflow: hidden;
}

.line::after {
    content:'';
    display:block;
    position:absolute;
    height:15vh;
    width:100%;
    top:-50%;
    left:0;
    background:linear-gradient(to bottom,rgba(255,255,255,0) 0%, blue 75%, #ffffff 100%);
    animation: drop 1.5s 0s infinite;
    animation-fill-mode:forwards;
    /* animation-timing-function: cubic-bezier(0.4,0.26,0,0.97); */
}

.line:nth-child(1)::after {
    animation: drop 3s infinite;
}

.line:nth-child(1)::after {
    animation: drop 1.5s 0s infinite;
    animation-delay:2s;
}

.line:nth-child(2)::after {
    animation: drop .5s 0s infinite;
    animation-delay:0s
}

.line:nth-child(3)::after {
    animation: drop 1.5s 0s infinite;
    animation-delay:1s
}

.line:nth-child(4)::after {
    animation: drop 2s 0s infinite;
    animation-delay: .2s
}

.line:nth-child(5)::after {
    animation: drop 1.5s 0s infinite;
    animation-delay:.1s
}

.line:nth-child(6)::after {
    animation: drop 1s 0s infinite;
    animation-delay:.1s
}

.line:nth-child(7)::after {
    animation: drop .5s 0s infinite;
    animation-delay:1s
}

.line:nth-child(8)::after {
    animation: drop 1.5s 0s infinite;
    animation-delay:.5s
}

.line:nth-child(9)::after {
    animation: drop 2s 0s infinite;
    animation-delay:1s
}

.line:nth-child(10)::after {
    animation: drop .5s 0s infinite;
    animation-delay:1s
}

.line:nth-child(11)::after {
    animation: drop 3s 0s infinite;
    animation-delay:1s
}

@keyframes drop {
    0% {
        top:-50%;
    }
    100% {
        top:110%;
    }    
}

.hide {
    visibility: hidden;
}

.inside {
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items:center;
    background-size:100%;
    background-position:center;
    transition: background-size ease .5s,
                background-color ease .2s;
}


/*  Used this to help learn the transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions */

.one:hover {
    background-size: 110%;
    background-color:rgba(255, 120, 120,.2)
}

.two:hover {
    background-size: 110%;
    background-color:rgba(66, 146, 119,.2)
}

.three:hover {
    background-size: 110%;
    background-color:rgba(74, 74, 255,.2)
}

.inside:hover > .hide {
    visibility:visible;
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(10px);
    padding:5px;
}

h2 {
    
    text-transform: capitalize;
    display:none;
    z-index: 1;
    font-family:'Pokemon Solid','Times New Roman', Times, serif;
    color:rgb(223, 223, 3);
    text-shadow: 4px 4px 4px blue;
    letter-spacing: 2px;
}

h1 {
    font-family:'Pokemon Solid','Times New Roman', Times, serif;
    color:rgb(223, 223, 3);
    text-shadow: 4px 4px 4px blue;
    letter-spacing: 3px;
    font-size:3rem;
}

img {
    position:absolute;
    width:400px;
    height:400px;
    z-index: -1;
}

.contrast1 {
    filter:contrast(0%);
}

path {
    fill:transparent
}