@tailwind base; @tailwind components; @tailwind utilities; @font-face { font-family: "GOTHAM_BOOK"; src: url("assets/fonts/GOTHAM-BOOK-1361523257_0.TTF"); } @font-face { font-family: "GOTHAM_LIGHT"; src: url("assets/fonts/GOTHAM-LIGHT_0.TTF"); } @font-face { font-family: "GOTHAM_MEDIUM"; src: url("assets/fonts/GOTHAM-MEDIUM_0.TTF"); } @font-face { font-family: "GOTHAM_BOLD"; src: url("assets/fonts/UFONTS.COM_GOTHAM-BOLD.TTF"); } * { /* line-height: 1; */ margin: 0; padding: 0; box-sizing: border-box; font-family: "GOTHAM_BOOK"; } a { outline: none; } .newZindex { z-index: 100; } .headerSuperMainDiv { position: fixed; width: 100%; } .headerMainDiv { height: 8vh; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-left: auto; margin-right: auto; background-color: white; padding-left: 6%; padding-right: 6%; } .headerMainLogoAnchor { display: flex; align-items: center; } .headerMainLogo { width: 175px; } .footerMainDiv { padding-top: 30px; padding-bottom: 10px; } .dowloadText { width: 75%; font-size: 45px; } .booksDiv { width: 80%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; row-gap: 100px; margin-left: auto; margin-right: auto; } .bookImg { width: 400px; /* height: 300px; */ } .showDownloadIcon { /* position: absolute; right: 0; */ margin-top: 30px; } li > ul { transform: translatex(100%) scale(0); } li:hover > ul { transform: translatex(101%) scale(1); } li > button svg { transform: rotate(-90deg); } li:hover > button svg { transform: rotate(-270deg); } .group:hover .group-hover\:scale-100 { transform: scale(1); } .group:hover .group-hover\:-rotate-180 { transform: rotate(180deg); } .scale-0 { transform: scale(0); } .min-w-32 { min-width: 8rem; } /* iphone SE */ @media screen and (min-width: 50px) and (max-width: 380px) { .headerMainLogo { width: 95px; } .dowloadText { /* width: 80%; */ font-size: 28px; } } /* mobile */ @media screen and (min-width: 380px) and (max-width: 500px) { .headerMainLogo { width: 95px; } .dowloadText { /* width: 80%; */ font-size: 30px; } .booksDiv { width: 100%; /* column-gap: 80px; */ display: flex; flex-direction: column; /* flex-wrap: wrap; */ /* justify-content: center; */ align-items: center; margin-left: auto; margin-right: auto; } .bookImg { width: 300px; /* height: 400px; */ } } /* ipad */ @media screen and (min-width: 501px) and (max-width: 950px) { .dowloadText { width: 90%; } .booksDiv { width: 90%; column-gap: 80px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-left: auto; margin-right: auto; } .bookImg { width: 300px; /* height: 400px; */ } } /* mini laptop */ @media screen and (min-width: 951px) and (max-width: 1200px) { .headerMainLogo { width: 130px; } .headerMainLogo { width: 120px; } .dowloadText { width: 85%; } .booksDiv { width: 90%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; row-gap: 100px; margin-left: auto; margin-right: auto; } .bookImg { width: 250px; /* height: 350px; */ } } /* mini laptop */ @media screen and (min-width: 1201px) and (max-width: 1400px) { .dowloadText { width: 80%; } .booksDiv { width: 85%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; row-gap: 100px; margin-left: auto; margin-right: auto; } .bookImg { width: 300px; /* height: 400px; */ } } /* mini laptop */ @media screen and (min-width: 1401px) and (max-width: 1500px) { .dowloadText { width: 80%; } .booksDiv { width: 85%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; row-gap: 100px; margin-left: auto; margin-right: auto; } .bookImg { width: 350px; /* height: 450px; */ } } /* laptop */ @media screen and (min-width: 1501px) and (max-width: 1900px) { .dowloadText { width: 75%; } .booksDiv { width: 80%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; row-gap: 100px; margin-left: auto; margin-right: auto; } .booksDivClass { width: 30%; } } @media screen and (min-width: 2201px) { .headerMainLogo { width: 220px; } .dowloadText { width: 83%; font-size: 60px; } .booksDiv { width: 90%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; row-gap: 100px; margin-left: auto; margin-right: auto; } .bookImg { width: 600px; /* height: 600px; */ } }