html,
body {
     margin: 0;
     padding: 0;
     border: none;
     background-color: #ffffff;
     font-family: "Outfit", sans-serif;
     font-optical-sizing: auto;
     font-size: 20px;
     font-weight: 500;
     color: #000000;
     position: relative;
}

* {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

a {
     text-decoration: none;
     cursor: pointer;
}

header {
     width: 100%;
     height: 16vh;
     padding: 0 5vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;

}

header img {
     height: 5vh;
}

header .title {
     font-size: 2rem;
     color: #84b02c;
}

header .search {
     color: #01aeff;
}

main {
     max-width: 100%;
     padding: 0 5vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     gap: 2vw;
}

.item {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     height: 340px;
     position: relative;
     text-decoration: none;
}

.item:nth-child(2n) {
     -webkit-box-flex: 1;
     -ms-flex: 1 1 calc(10% - 2vw);
     flex: 1 1 calc(10% - 2vw);
}

.item:nth-child(3n+1) {
     -webkit-box-flex: 1;
     -ms-flex: 1 1 calc(15% - 2vw);
     flex: 1 1 calc(15% - 2vw);
}

.item:nth-child(4n+1) {
     -webkit-box-flex: 1;
     -ms-flex: 1 1 calc(33.333% - 2vw);
     flex: 1 1 calc(33.333% - 2vw);
}

.item:nth-child(5n+1) {
     -webkit-box-flex: 1;
     -ms-flex: 1 1 calc(25% - 2vw);
     flex: 1 1 calc(25% - 2vw);
}

.item form {
     height: 100%;
     width: 100%;
}

.item button {
     border: none;
     outline: none;
     background-color: transparent;
     padding: 0;
     margin: 0;
     height: 100%;
     width: 100%;
     cursor: pointer;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     position: relative;
}

.item:hover .section {
     background-color: rgba(255, 255, 255, 1);
     color: #000000;
}

.item img {
     height: 100%;
     width: 100%;
     -o-object-fit: cover;
     object-fit: cover;
}

.item .section {
     position: absolute;
     bottom: 1vh;
     left: 1vh;
     z-index: 50;
     padding: 1vh 1vw 1vh 0.25vw;
     background-color: rgba(255, 255, 255, 0.65);
     font-size: 0.85rem;
     font-weight: 600;
     color: #505050;
     text-align: left;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
}

footer {
     width: 100%;
     height: 12vh;
     padding: 0 5vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}

.totop {
     background-color: transparent;
     border: none;
     outline: none;
     padding: 0;
     margin: 0;
     position: fixed;
     right: 1vw;
     bottom: 5vh;
     font-size: 1.75rem;
     color: #ffcd01;
     cursor: pointer;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
}

.totop:hover {
     color: #84b02c;
}