@font-face {
    font-family: Macondo;
    src: url("fonts/Macondo-Regular.ttf");
}

body{
    background-color : black;
}
#mainContainer{
    min-width:800px;
    width:fit-content;
    margin: auto;
    height:80vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#canvas{
    margin: auto;
    border: inset red 2px;
    position: relative;
    background-color: rgb(53, 87, 29);
    overflow: hidden;
}
#btnUp{
    position: absolute;
    top: 1vw;
    left: 45%;
}
#btnRight{
    position: absolute;
    top: 45%;
    right: 1vw;
    rotate: 90deg;
}
#btnDown{
    position: absolute;
    bottom: 1vw;
    left: 45%;
    rotate: 180deg;
}
#btnLeft{
    position: absolute;
    top: 45%;
    left: 1vw;
    rotate: -90deg;
}
.arrow:hover{
    filter: brightness(130%);
}

.tree{
    position: absolute;
}
#treeInfo{
    visibility: hidden;
    position: absolute;
    background-image: url("images/cardboard.jpg");
    font-family: "Macondo";
    color:rgb(52, 14, 1);
    border: double black 4px;
    width:17vw;
    font-size: 1vw;
    height: 20vh;
}
#info-title{
    margin-bottom: 0px;
}
#info-author{
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 0.8vw;
}
#info-date{
    font-size: 0.8;
}
#hole-img{
    position: absolute;
    width: 64 px;
}




#sidebar{
    background-image:url("images/folded-paper-med.jpg");
    background-size:contain;
    border: double rgb(72, 19, 0) 4px;
    width: 25vw;
    margin-left:2vw;
    font-family: "Macondo";
    color:rgb(72, 19, 0);
}
#sidebar h1{
    text-align: center;
}
#timer{
    display: flex;
    flex-direction: row;
    font-size: 4vw;
    margin: auto;
}
#hour{
    width: 5vw;
}
#minute{
    width: 5vw;
}
.txtInpt{
    margin-top: 1vw;
    margin-bottom: 1vw;
    font-size: 1.5vw;
    font-family: "Macondo";
}
#startBtn{
    border-radius: 0.5vw;
    background-image: url("images/cardboard.jpg");
    border: solid rgb(67, 30, 5) 2px;
    color:rgb(247, 233, 171);
    font-size: 1.7vw;
    font-family: "Macondo";
    width: fit-content;
    margin: auto;
    margin-top: 1.7vw;
}
#startBtn:hover{
    filter:brightness(150%);
}
#treePreview{
    width:10vw;
    border: solid black 3px;
    margin: auto;
}