*, *::before, *::after{box-sizing:border-box;margin: 0;padding: 0; font-family: "Arial", sans-serif;}


html{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    width: 100%;
     min-height: 100vh;
     /* border: 4px solid red; */
} 

body {
    display: flex;
    justify-content: flex-start;align-items: flex-start;flex-direction: column;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(45deg, rgba(4, 200, 254, 0.8), rgba(46, 4, 254, 0.8), rgba(4, 4, 254, 0.8), rgba(4, 200, 254, 0.8));  
    padding: 0;
    margin:0;
    background-size: cover; 
    background-position: center;  
    background-repeat: no-repeat; 
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    scroll-behavior: smooth;
/* border: 4px solid black;  */
}

/* START OF HOME PAGE index.html */

.home-main-additions {
     display: flex;justify-content: center;align-items: center;flex-direction: row;flex-wrap: wrap;
     margin-top: 0.4em;
     font-size: 22px;
     font-weight: bold;
     width: 100%;
    height: auto;
    color: lime;
}

#main-top {
    display: block;
    padding: 6px;
    background: linear-gradient(45deg, rgba(4, 200, 254, 0.8), rgba(46, 4, 254, 0.8), rgba(233, 4, 254, 0.8), rgba(254, 8, 4, 0.8), rgba(233, 4, 254, 0.8), rgba(46, 4, 254, 0.8), rgba(4, 200, 254, 0.8));
    /* box-shadow: 1px 1px 9px 9px white; */
    width: 100%;
    /* border: 3px solid blue; */
}

.main-top-category {
    display: block;
    padding: 4px;
    margin-top: 0.5em;
    box-shadow: 1px 1px 9px 9px white;
    /* border: 4px solid black; */
}

.main-top-subcategory {
   border: 1px solid transparent; 
}

.main-top-undercategory {
   display: flex;justify-content: flex-start;align-items: center;flex-direction: row;flex-wrap: wrap;
    gap: 0.5em;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    width:100%;
    /* border:4px solid black; */
}

.main-bottom-undercategory {
    display: flex;justify-content: flex-start;align-items: center;
    width: fit-content;
    background: lime;
    padding: 4px;
    border-radius: 10px;
    /* border:3px solid lime;border-radius: 8px; */
}

.home-main-wrap {
    display: flex; justify-content: center;align-items: baseline;flex-direction: row;flex-wrap: wrap;
    margin: 0;
    padding: 0;
    /* border: 3px solid red; */
}

.home-main-header {
    color: wheat;
    padding: 4px;
    font-size: 20px;
}

.home-main-underwrap {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    grid-column: span 5;
    grid-auto-rows: min-content;
    column-gap: 0.3rem;
    row-gap: 0.5rem;
    justify-content: flex-start;
    width: 100%;
    height: 70vh;
    /* height: auto; */
    overflow-y: auto;
    scrollbar-width: none; 
    margin: 0;
    padding: 2px;
    border-bottom: 4px solid lime;
    border-top:3px solid lime;
    /* border:4px solid black; */

}

.front-welcome {
    display: inline-flex;justify-self: center;align-items: center;
    position: relative;
    margin-top: 10vw;
    padding: 0.5em 1em;
     width: fit-content;
    height: auto;
    font-size: 40px;
    font-weight: bold;
    color: #dee2e6;
    background: transparent;
    box-shadow: 1px 1px 9px 9px white;
    border-radius: 30px;
}

.home-items-submaster {
    display: flex;justify-content: center;align-items:flex-start;flex-direction: row;flex-wrap: wrap;
    width: 100%;
    height: auto;
    background: rgb(4, 204, 249);
    overflow: hidden;
    padding: 0;
    border-radius: 15px;
    /* border: 4px solid blue; */

}

.home-items-masterview {
    display: flex;justify-content: center;align-items: center;flex-direction:row;flex-wrap: wrap;
    width: 100%;
    /* border: 4px solid maroon; */
}

.home-items-view {
    display: flex;justify-content: center;align-items: center;flex-direction:row;flex-wrap: wrap;
    align-self: flex-start;
    width: 100%;
    font-weight: bold;
    color: blue;
    background: lime;
    /* border: 4px solid olive; */
}

.home-items-secondmaster {
    width: 100%;
    color: blue;
    overflow: hidden;
    background: white;
    /* border: 4px solid red; */
}

.home-items-image {
    display: flex;justify-content: center;align-items: center;flex-direction:row;flex-wrap: wrap;
    align-self: flex-start;
    width: 100%;
    height: auto;
    /* border: 4px solid orange;  */
}

.home-items-pdf {
    display: flex;justify-content: center;align-items: center;flex-direction:row;flex-wrap: wrap;
    width: 100%;
    padding: 3px;
    /* border: 4px solid orange;  */
}

.home-items-subpdf {
     font-size: 18px;
    color: blue; 
}

.home-items-xlsx {
     font-size: 18px;
    color: blue; 
}


.home-items-txt {
     font-size: 18px;
    color: blue;
}



.home-items-nofile {
     font-size: 14px;
    color: blue;
}

.home-items-subdescription {
   display: flex;justify-content: center;align-items:center;flex-direction: column;flex-wrap: wrap;
   width: 100%;
   height: auto;
   font-size: 18px;
   font-weight: 600;
   padding: 3px;
   /* gap: 4px; */
   margin-top: 0.4em;
   margin-bottom: 0.4em;
   /* border: 4px solid black; */
}

.home-items-price {
  font-size: 16px;
  font-weight: 600;
  padding: 3px;
  border-top: 3px solid black;
}

.home-items-cats-display {
    display:flex;justify-content: center;align-items: flex-start;flex-direction: row;flex-wrap: wrap;
    width: 100%;
    align-self: flex-start;
    top: 0;
    margin-top: 0;
    /* border: 4px solid lime; */
}

.home-items-view-cats {
    display: inline-flex;justify-content: center;align-items: center;flex-direction: row;flex-wrap: wrap;
    align-self: flex-end;
    width: 100%;
    bottom: 0;
    margin-top: 0.3em;
    font-size: 20px;
    font-weight: bold;
    color: blue;
    background: lime;
    /* border: 4px solid violet; */
}

/* END OF HOME PAGE index.html */


@media (max-width: 900px) {

    #main-top {
       display: none; 
    }

    .main-top-category {
    display: none;
   
}

.home-main-underwrap {
   
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-column: span 5;
    grid-auto-rows: min-content;
    column-gap: 0.3rem;
    row-gap: 0.5rem;
    justify-content: flex-start;
    width: 100%;
    height: 71vh;
    overflow-y: auto;
    scrollbar-width: none; 
    margin: 0;
    padding: 2px;
    border-bottom: 4px solid lime;
    border-top:3px solid lime;

}

}

@media (max-width: 600px) {

     #main-top {
       display: none; 
    }

    .main-top-category {
    display: none;
   
}

.home-main-underwrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-column: span 5;
    grid-auto-rows: min-content;
    column-gap: 0.3rem;
    row-gap: 0.5rem;
    justify-content: flex-start;
    width: auto;
    height: 79vh;
    overflow-y: auto;
    scrollbar-width: none; 
    margin: 0;
    padding: 2px;
    /* background: #7eabff; */
    border-bottom: 4px solid lime;
    border-top:3px solid lime;

}

}