@font-face {
  font-family:uncut-sans;
  src:url(UncutSans-Regular.otf);
}
@font-face {
  font-family:nimbus-mono;
  src:url(nimbusmono-regular.otf);
}
body{
    margin:auto;
}
.title{
    margin:auto;
    text-align:center;
    width:500px;
    font-family:'uncut-sans', sans-serif;
    font-size:64px;
    padding:40px 0px;
    border-bottom:black solid 1px;
}
.flower-text-list{
    width:500px;
    margin:auto;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.flower-text{
    margin:10px 0px;
    border-right:black solid 1px;
    padding:30px;
    width:36%;
    font-family:'uncut-sans', sans-serif;
}
.flower-number{
    font-family:'nimbus-mono', sans-serif;
    padding-right:10px;
}
.garden{
    border:black solid 1px;
/*   background-color:green;*/
    height:500px;
    width:500px;
    margin:auto;
}
.garden-nested{
     border:black solid 1px;
    background-color:white;
    height:80%;
    width:80%;
    margin:auto;
    border-top: solid white 50px;
    position:relative;
}


.flower{
    position:absolute;
    top:20%;
    left:20%;
    width:50px;
    height:50px;
    border:black solid 2px;
    border-radius:30px;
}


.flower-interior{
    position:absolute;
    top:10px;
    left:10px;
    width:40px;
    height:40px;
    background-color:yellow;
    border-radius:30px;
    
}

.flower-ring{
    opacity:0%;
    position:absolute;
    top:20px;
    left:0px;
    width:50px;
    height:50px;
    border:dotted #00A6BD 3px;
    border-radius:30px;
}
.flower-ring:hover {
    opacity:100%;
}
.flower1{
    
    position:absolute;
    top:30%;
    left:60%;
    width:50px;
    height:50px;
    border:black solid 2px;
    border-radius:30px;
}

.flower1 .flower-interior{
    position:absolute;
    top:20px;
    left:20px;
    width:40px;
    height:40px;
    background-color:orange;
    border-radius:30px;
    

}
.flower1 .flower-ring{
    opacity:0%;
    position:absolute;
    top:20px;
    left:0px;
    width:50px;
    height:50px;
    border:dotted #00A6BD 3px;
    border-radius:30px;
}
.flower1 .flower-ring:hover {
    opacity:100%;
}

.flower2{
    
    position:absolute;
    top:60%;
    left:30%;
    width:50px;
    height:50px;
    border:black solid 2px;
    border-radius:30px;
}

.flower2 .flower-interior{
    position:absolute;
    top:10px;
    left:30px;
    width:40px;
    height:40px;
    background-color:red;
    border-radius:30px;
    

}
.flower2 .flower-ring{
    opacity:0%;
    position:absolute;
    top:20px;
    left:0px;
    width:50px;
    height:50px;
    border:dotted #00A6BD 3px;
    border-radius:30px;
}
.flower2 .flower-ring:hover {
    opacity:100%;
}

.flower3{
    
    position:absolute;
    top:10%;
    left:70%;
    width:50px;
    height:50px;
    border:black solid 2px;
    border-radius:30px;
}

.flower3 .flower-interior{
    position:absolute;
    top:10px;
    left:30px;
    width:40px;
    height:40px;
    background-color:magenta;
    border-radius:30px;
    

}
.flower3 .flower-ring{
    opacity:0%;
    position:absolute;
    top:20px;
    left:0px;
    width:50px;
    height:50px;
     border:dotted #00A6BD 3px;
    border-radius:30px;
}
.flower3 .flower-ring:hover {
    opacity:100%;
}