* {
    box-sizing: border-box;
}

body {
    margin:0;
    text-decoration-color: aliceblue;
    cursor: url(greentea.png), cell;
}

p {
    color:rgb(171, 200, 44);
}

.smaller-font {
    font-size: small;
}

p:hover {
    color:aliceblue;
}
.main-container {
    background:rgb(161, 188, 127);
    display:flex;
    flex-direction: column;
    /* flex-wrap:wrap; */
    height:100vh;
    padding:10px;
    gap:10px;
}

.upper {
    /* background: rgb(219, 122, 122); */
    display:flex;
    width:100%;
    height:100%;
    gap:10px
}

.upper-item {
    background: rgba(11, 35, 100, 0.114);
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.upper-item:hover {
    background-color: rgba(255, 255, 255, 0.32);
}

.middle {
    display:flex;
    width:100%;
    height:100%;
    gap:10px
}

.lower {
    /* background: rgb(74, 92, 70); */
    width:100%;
    height:100%;
    display:flex;
    gap:10px;
}

.left {
    background: rgb(187, 187, 228);
    width: 100%;
 
}

.center {
    background: rgba(247, 247, 161, 0.599);
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center2 {
    background: rgb(247, 247, 161);
    width: 50%;
    height: 50%;
}

.hfarm {
    background:rgba(48, 81, 29, 0.599);
    width: 100%;
    display:flex;
    flex-direction: column;
    gap:10px;
    
}

.horizontal {
    background:rgba(247, 247, 161, 0.599);
    height:100%;
}

.horizontal:hover {
    background-color:rgba(247, 247, 161, 0.861);
}

.vfarm {
    background:rgba(48, 81, 29, 0.599);
    width: 100%;
    display:flex;
    flex-direction: row;
    gap:10px; 
}
.vertical { 
    background:rgba(154, 182, 119, 0.725);
    width:100%;
}

.vertical:hover {
    background-color:rgba(247, 247, 161, 0.861);
}