@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300&family=Inter&display=swap");
body {
   height: 100vh;
   width: 100vw;
   top: 0;
   left: 0;
   margin: 0;
   position: absolute;
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   overflow-x: hidden;
}

body .navbar-sct {
   height: 20vh;
   width: 100vw;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
   background-color: #FFF;
   display: flex;
   flex-direction: column;
}

body .navbar-sct .topbar-sct {
   height: 50%;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

body .navbar-sct .topbar-sct .logo-sct {
   height: 100%;
   width: 15vw;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 4vh;
}

body .navbar-sct .topbar-sct .logo-scta {
   color: black;
   text-decoration: none;
}

body .navbar-sct .topbar-sct .logo-sct:hover {
   cursor: default;
}

body .navbar-sct .topbar-sct .search-sct {
   position: relative;
   height: 6vh;
   width: auto;
   margin: 1rem 3rem 1rem 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

body .navbar-sct .topbar-sct .search-sct .link {
   position: absolute;
   left: -4vw;
   top: .9rem;
}

body .navbar-sct .topbar-sct .search-sct #searchbar {
   height: 100%;
   width: 20vw;
   border: none;
   outline: none;
   border-radius: 2rem;
   padding-left: 2rem;
   font-size: 1.1rem;
}

body .navbar-sct .topbar-sct .search-sct #searchbtn {
   height: 2vh;
   width: 2vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

body .navbar-sct .topbar-sct .search-sct #img {
   position: absolute;
   top: 0.6rem;
   left: -1.7rem;
   height: 2rem;
   width: 2rem;
   display: flex;
   justify-content: center;
   align-items: center;
}

body .navbar-sct .botbar-sct {
   height: 50%;
   width: 100%;
}

body .navbar-sct .botbar-sct .allbtn-sct {
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-around;
}

body .navbar-sct .botbar-sct .allbtn-sct .btn-sct {
   display: flex;
   height: 70%;
   width: auto;
   justify-content: center;
   align-items: center;
   transition: all .3s ease-in-out;
}

body .navbar-sct .botbar-sct .allbtn-sct .btn-sct:hover {
   cursor: pointer;
   transform: scale(1.03);
}

body .navbar-sct .botbar-sct .allbtn-sct .btn-sct #img {
   margin-right: 0.7vw;
}

body .navbar-sct .botbar-sct .allbtn-sct .btn-sct #img #btnImg {
   height: 5vh;
   width: auto;
}

body .navbar-sct .botbar-sct .allbtn-sct .btn-sct #label p {
   font-family: 'Inter', sans-serif;
   font-weight: 400;
   font-size: 2vh;
}

body .content-sct {
   position: relative;
   top: 20vh;
   left: 0;
   height: auto;
   width: 100vw;
   background-color: #EFEFEF;
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: default;
}

body .content-sct .trend-sct {
   width: 75vw;
   height: 75vh;
   background-color: #FFFFFF;
   margin-top: 4vh;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
}

body .content-sct .trend-sct .title-sct {
   margin-top: 3vh;
   margin-left: 2vw;
   width: auto;
   height: auto;
}

body .content-sct .trend-sct .title-sct h2 {
   margin: 0;
   font-weight: 700;
}

body .content-sct .trend-sct .grid-sct {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

body .content-sct .trend-sct .grid-sct .grid {
   display: grid;
   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr;
   width: 95%;
   gap: 0px;
   height: 95%;
   cursor: pointer;
}

body .content-sct .trend-sct .grid-sct #img {
   margin: 1rem;
   height: 70%;
   width: auto;
   max-width: 90%;
   position: relative;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
}

body .content-sct .trend-sct .grid-sct #img img {
   object-fit: cover;
}

body .content-sct .trend-sct .grid-sct #name {
   margin: 0rem 1rem;
}

body .content-sct .trend-sct .grid-sct .grid1 {
   grid-row-start: 1;
   grid-column-start: 1;
   grid-row-end: 4;
   grid-column-end: 2;
   max-height: 60vh;
   transition: all .3s ease-in-out;
}

body .content-sct .trend-sct .grid-sct .grid1 #img {
   height: 25rem;
   width: auto;
   max-width: 95%;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: start;
}

body .content-sct .trend-sct .grid-sct .grid1 #img img {
   object-fit: cover;
}

body .content-sct .trend-sct .grid-sct .grid1:hover {
   transform: scale(1.01);
}

body .content-sct .trend-sct .grid-sct .grid1 #name {
   margin: 1rem;
   font-size: 1.5rem;
}

body .content-sct .trend-sct .grid-sct .grid2 {
   grid-row-start: 1;
   grid-column-start: 2;
   grid-row-end: 2;
   grid-column-end: 3;
   max-height: 20vh;
   transition: all .3s ease-in-out;
   min-width: 27%;
}

body .content-sct .trend-sct .grid-sct .grid2:hover {
   transform: scale(1.01);
}

body .content-sct .trend-sct .grid-sct .grid3 {
   grid-row-start: 2;
   grid-column-start: 2;
   grid-row-end: 3;
   grid-column-end: 3;
   max-height: 20vh;
   transition: all .3s ease-in-out;
   min-width: 27%;
}

body .content-sct .trend-sct .grid-sct .grid3:hover {
   transform: scale(1.01);
}

body .content-sct .trend-sct .grid-sct .grid4 {
   grid-row-start: 3;
   grid-column-start: 2;
   grid-row-end: 4;
   grid-column-end: 3;
   max-height: 20vh;
   transition: all .3s ease-in-out;
   min-width: 27%;
}

body .content-sct .trend-sct .grid-sct .grid4:hover {
   transform: scale(1.01);
}

body .you-sct {
   width: 75vw;
   height: 65vh;
   background-color: #FFFFFF;
   margin-top: 4vh;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
}

body .you-sct .title-sct {
   margin-top: 3vh;
   margin-left: 2vw;
   width: auto;
   height: auto;
}

body .you-sct .title-sct h2 {
   margin: 0;
   font-weight: 700;
}

body .you-sct .grid-sct {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

body .you-sct .grid-sct .grid {
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr 1fr;
   width: 95%;
   gap: 0px;
   height: 95%;
}

body .you-sct .grid-sct .grid #grid #img {
   border-radius: 7px;
   height: 25rem;
   width: auto;
   margin: 1rem;
   overflow: hidden;
   display: flex;
   align-items: start;
   justify-content: center;
   cursor: pointer;
}

body .you-sct .grid-sct .grid #grid #img img {
   object-fit: cover;
}

body .you-sct .grid-sct .grid #grid #name {
   margin: 1rem;
   font-size: 1.3rem;
}

body .you-sct .grid-sct .grid .grid1 {
   grid-row-start: 1;
   grid-column-start: 1;
   grid-row-end: 4;
   grid-column-end: 2;
   max-width: 24vw;
   transition: all .3s ease-in-out;
}

body .you-sct .grid-sct .grid .grid1:hover {
   transform: scale(1.01);
}

body .you-sct .grid-sct .grid .grid2 {
   grid-row-start: 1;
   grid-column-start: 2;
   grid-row-end: 1;
   grid-column-end: 3;
   max-width: 24vw;
   transition: all .3s ease-in-out;
}

body .you-sct .grid-sct .grid .grid2:hover {
   transform: scale(1.01);
}

body .you-sct .grid-sct .grid .grid3 {
   grid-row-start: 1;
   grid-column-start: 3;
   grid-row-end: 1;
   grid-column-end: 3;
   max-width: 24vw;
   transition: all .3s ease-in-out;
}

body .you-sct .grid-sct .grid .grid3:hover {
   transform: scale(1.01);
}

body .fav-sct {
   width: 75vw;
   height: 140vh;
   background-color: #FFFFFF;
   margin-top: 4vh;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
}

body .fav-sct .title-sct {
   margin-top: 3vh;
   margin-left: 2vw;
   width: auto;
   height: auto;
}

body .fav-sct .title-sct h2 {
   margin: 0;
   font-weight: 700;
}

body .fav-sct .grid-sct {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

body .fav-sct .grid-sct .grid {
   display: grid;
   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   width: 95%;
   gap: 0px;
   height: 95%;
}

body .fav-sct .grid-sct .grid #grid #img {
   height: 75%;
   width: auto;
   margin: 1rem;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
}

body .fav-sct .grid-sct .grid #grid #name {
   margin: 1rem;
   font-size: 1.3rem;
}

body .fav-sct .grid-sct .grid .grid1 {
   grid-row-start: 1;
   grid-column-start: 1;
   grid-row-end: 2;
   grid-column-end: 10;
   max-height: 25rem;
   cursor: pointer;
   transition: all .3s ease-in-out;
}

body .fav-sct .grid-sct .grid .grid1:hover {
   transform: scale(1.01);
}

body .fav-sct .grid-sct .grid .grid2 {
   grid-row-start: 2;
   grid-column-start: 1;
   grid-row-end: 3;
   grid-column-end: 4;
   max-height: 25rem;
   cursor: pointer;
   transition: all .3s ease-in-out;
}

body .fav-sct .grid-sct .grid .grid2:hover {
   transform: scale(1.01);
}

body .fav-sct .grid-sct .grid .grid3 {
   grid-row-start: 2;
   grid-column-start: 4;
   grid-row-end: 3;
   grid-column-end: 7;
   max-height: 25rem;
   cursor: pointer;
   transition: all .3s ease-in-out;
}

body .fav-sct .grid-sct .grid .grid3:hover {
   transform: scale(1.01);
}

body .fav-sct .grid-sct .grid .grid4 {
   grid-row-start: 2;
   grid-column-start: 7;
   grid-row-end: 3;
   grid-column-end: 10;
   max-height: 25rem;
   cursor: pointer;
   transition: all .3s ease-in-out;
}

body .fav-sct .grid-sct .grid .grid4:hover {
   transform: scale(1.01);
}

body .fav-sct .grid-sct .grid .grid5 {
   grid-row-start: 3;
   grid-column-start: 1;
   grid-row-end: 4;
   grid-column-end: 5;
   max-height: 25rem;
   cursor: pointer;
   transition: all .3s ease-in-out;
}

body .fav-sct .grid-sct .grid .grid5:hover {
   transform: scale(1.01);
}

body .fav-sct .grid-sct .grid .grid6 {
   grid-row-start: 3;
   grid-column-start: 5;
   grid-row-end: 4;
   grid-column-end: 10;
   max-height: 25rem;
   cursor: pointer;
   transition: all .3s ease-in-out;
}

body .fav-sct .grid-sct .grid .grid6:hover {
   transform: scale(1.01);
}

body .all-sct {
   width: 75vw;
   height: auto;
   background-color: #FFFFFF;
   margin-top: 4vh;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
}

body .all-sct .title-sct {
   margin-top: 3vh;
   margin-left: 2vw;
   width: auto;
   height: 7vh;
}

body .all-sct .title-sct h2 {
   margin: 0;
   font-weight: 700;
}

body .all-sct .grid-sct {
   height: auto;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0;
}

body .all-sct .grid-sct .grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   width: 100%;
   gap: 0px;
   height: 100%;
   margin-bottom: auto;
}

body .all-sct .grid-sct .grid:hover {
   cursor: pointer;
}

body .all-sct .grid-sct .grid .recette-sct {
   height: 35vh;
   width: 17vw;
   margin-left: 0;
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 2vh;
   transition: all .3s ease-in-out;
}

body .all-sct .grid-sct .grid .recette-sct:hover {
   transform: scale(1.01);
}

body .all-sct .grid-sct .grid .recette-sct #img {
   height: 80%;
   width: auto;
   margin: 1rem;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
}

body .all-sct .grid-sct .grid .recette-sct #name {
   margin: 1rem;
}