├── .gitignore
├── .vscode
    └── settings.json
├── public
    ├── images
    │   ├── mv1.jpg
    │   ├── mv2.jpg
    │   ├── mv3.jpg
    │   ├── mv4.jpg
    │   ├── mv5.jpg
    │   ├── mv6.jpg
    │   ├── new1.jpg
    │   ├── new2.jpg
    │   ├── new3.jpg
    │   ├── new4.jpg
    │   ├── new5.jpg
    │   ├── batman.jpg
    │   ├── matrix.png
    │   ├── userava1.jpg
    │   ├── userava2.jpg
    │   ├── userava3.jpg
    │   ├── userava4.jpg
    │   └── userava5.jpg
    ├── js
    │   └── script.js
    ├── index.html
    └── css
    │   └── styles.css
├── input.css
├── package.json
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5501
3 | }
4 | 


--------------------------------------------------------------------------------
/public/images/mv1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/mv1.jpg


--------------------------------------------------------------------------------
/public/images/mv2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/mv2.jpg


--------------------------------------------------------------------------------
/public/images/mv3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/mv3.jpg


--------------------------------------------------------------------------------
/public/images/mv4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/mv4.jpg


--------------------------------------------------------------------------------
/public/images/mv5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/mv5.jpg


--------------------------------------------------------------------------------
/public/images/mv6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/mv6.jpg


--------------------------------------------------------------------------------
/public/images/new1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/new1.jpg


--------------------------------------------------------------------------------
/public/images/new2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/new2.jpg


--------------------------------------------------------------------------------
/public/images/new3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/new3.jpg


--------------------------------------------------------------------------------
/public/images/new4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/new4.jpg


--------------------------------------------------------------------------------
/public/images/new5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/new5.jpg


--------------------------------------------------------------------------------
/public/images/batman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/batman.jpg


--------------------------------------------------------------------------------
/public/images/matrix.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/matrix.png


--------------------------------------------------------------------------------
/public/images/userava1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/userava1.jpg


--------------------------------------------------------------------------------
/public/images/userava2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/userava2.jpg


--------------------------------------------------------------------------------
/public/images/userava3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/userava3.jpg


--------------------------------------------------------------------------------
/public/images/userava4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/userava4.jpg


--------------------------------------------------------------------------------
/public/images/userava5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArinSoftware/gega-project/HEAD/public/images/userava5.jpg


--------------------------------------------------------------------------------
/input.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   h1, h2, h3, h4, h5, h6 {
 7 |     @apply font-gemunu uppercase;
 8 |   }
 9 | 
10 |   h2 {
11 |     @apply text-2xl tracking-wider
12 |   }
13 | 
14 |   a {
15 |     @apply font-gemunu;
16 |   }
17 | 
18 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gega-project",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "watch": "npx tailwindcss -i ./input.css -o ./public/css/styles.css --watch"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "tailwindcss": "^3.2.4"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/public/js/script.js:
--------------------------------------------------------------------------------
 1 | const sunIcon = document.querySelector('#sun');
 2 | const moonIcon = document.querySelector('#moon');
 3 | const body = document.querySelector('body');
 4 | 
 5 | sunIcon.addEventListener('click', () => {
 6 |   sunIcon.classList.add('hidden');
 7 |   moonIcon.classList.remove('hidden');
 8 |   body.classList.remove('dark');
 9 | });
10 | 
11 | moonIcon.addEventListener('click', () => {
12 |   moonIcon.classList.add('hidden');
13 |   sunIcon.classList.remove('hidden');
14 |   body.classList.add('dark');
15 | });
16 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: ['./public/**/*.{html,js}'],
 4 |   darkMode: 'class',
 5 |   theme: {
 6 |     container: {
 7 |       center: true,
 8 |       screens: {
 9 |         lg: '1140px',
10 |         xl: '1140px',
11 |         '2xl': '1140px',
12 |       },
13 |     },
14 |     extend: {
15 |       fontFamily: {
16 |         gemunu: ['Gemunu Libre', 'sans-serif'],
17 |         open: ['Open Sans', 'sans-serif'],
18 |       },
19 | 
20 |       colors: {
21 |         'gega-red': '#BC1A45',
22 |         'gega-melon': '#FFD369',
23 |         'gega-grey': '#DDDDDD',
24 |         'gega-white': '#F7F7F7',
25 |       },
26 | 
27 |       spacing: {
28 |         128: '32rem',
29 |       },
30 |     },
31 |   },
32 |   plugins: [],
33 | };
34 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 | 
  8 |   <!--Google Fonts-->
  9 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 |   <link href="https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@400;700&family=Open+Sans&display=swap"
 12 |     rel="stylesheet">
 13 | 
 14 |   <!--Font Awesome-->
 15 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
 16 |     integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
 17 |     crossorigin="anonymous" referrerpolicy="no-referrer" />
 18 | 
 19 |   <link href="./css/styles.css" rel="stylesheet">
 20 | </head>
 21 | 
 22 | <body class="font-open dark">
 23 | 
 24 |   <!--Dark/Light Toggle-->
 25 |   <div class="absolute top-1 left-5 cursor-pointer text-lg">
 26 |     <i class="fa-solid fa-sun text-white" id="sun"></i>
 27 |     <i class="fa-solid fa-moon text-black hidden" id="moon"></i>
 28 |   </div>
 29 | 
 30 |   <!--Header Section-->
 31 |   <header class="dark:bg-black bg-white py-6 lg:py-12 dark:text-gega-grey text-black uppercase">
 32 |     <!--Header Container-->
 33 |     <div class="container flex items-center justify-between space-x-8 lg:space-x-16">
 34 |       <!--Logo-->
 35 |       <a href="#"
 36 |         class="pl-4 md:pl-0 text-4xl lg:text-6xl font-bold text-transparent bg-gradient-to-r bg-clip-text from-gega-red to-gega-grey">GEGA</a>
 37 | 
 38 |       <!--Mobile Menu-->
 39 |       <div class="block md:hidden pr-4">
 40 |         <div class="space-y-1 cursor-pointer">
 41 |           <div class="bg-gega-grey w-8 h-1 rounded-full"></div>
 42 |           <div class="bg-gega-grey w-8 h-1 rounded-full"></div>
 43 |           <div class="bg-gega-grey w-8 h-1 rounded-full"></div>
 44 |         </div>
 45 |       </div>
 46 | 
 47 |       <!--Navigation-->
 48 |       <nav class="hidden md:flex justify-between flex-1">
 49 |         <!--Menu-->
 50 |         <div class="flex items-center lg:text-lg space-x-4 lg:space-x-8">
 51 |           <a href="#" class="hover:text-gega-melon transition duration-500">movies</a>
 52 |           <a href="#" class="hover:text-gega-melon transition duration-500">celebrities</a>
 53 |           <a href="#" class="hover:text-gega-melon transition duration-500">blog</a>
 54 |           <a href="#" class="hover:text-gega-melon transition duration-500">news</a>
 55 |           <a href="#" class="hover:text-gega-melon transition duration-500">about</a>
 56 |         </div>
 57 |         <!--Login Area-->
 58 |         <div class="flex items-center space-x-4 lg:space-x-8">
 59 |           <!--Search Area-->
 60 |           <form>
 61 |             <div class="group border-r px-4 mx-4 py-1 border-gega-red">
 62 |               <input type="text"
 63 |                 class="opacity-0 group-hover:opacity-100 bg-transparent border-b border-gega-red focus:outline-none w-24 lg:w-44 transition duration-500 ">
 64 |               <button class="-ml-4 group-hover:ml-0 transition duration-500"><i
 65 |                   class="fas fa-search group-hover:text-gega-red transition duration-500"></i></button>
 66 |             </div>
 67 |           </form>
 68 |           <!--Signup Area-->
 69 |           <div class="flex items-center space-x-4 lg:space-x-8 lg:text-lg">
 70 |             <a href="#">Login</a>
 71 |             <a href="#"
 72 |               class="bg-gega-red px-3 py-1 hover:bg-rose-600 hover:text-gega-grey cursor-pointer transition duration-500 whitespace-nowrap">Sign
 73 |               Up</a>
 74 |           </div>
 75 |         </div>
 76 |       </nav>
 77 |     </div>
 78 |   </header>
 79 | 
 80 |   <!--Hero Section-->
 81 |   <section class="h-96 lg:h-128 group relative">
 82 |     <!--Hero Image-->
 83 |     <img src="./images/batman.jpg" alt="Main Image" class="h-full w-full object-cover">
 84 | 
 85 |     <!--Hero Content-->
 86 |     <div class="absolute bottom-0 w-full bg-gradient-to-b from-transparent to-black">
 87 |       <!--Hero Content Container-->
 88 |       <div class="container pl-10 lg:pl-0">
 89 |         <h3 class="text-gega-melon tracking-wider group-hover:mb-1 duration-500">
 90 |           Action, Darama, Thriller
 91 |         </h3>
 92 |         <h1 class="text-4xl lg:text-6xl text-gega-grey group-hover:mb-1 duration-500">
 93 |           The Dark Knight
 94 |         </h1>
 95 |         <p class="text-gega-grey group-hover:mb-2 duration-500 text-sm lg:text-base w-3/4 lg:w-2/3">
 96 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quas officia aut quidem? Numquam fuga quis
 97 |           repellendus ad beatae culpa?
 98 |         </p>
 99 |         <!--Detail Container-->
100 |         <div
101 |           class="flex space-x-8 opacity-0 group-hover:opacity-100 group-hover:mb-10 lg:group-hover:mb-20 duration-1000">
102 |           <!--Watch-->
103 |           <div class="flex space-x-2 items-center cursor-pointer">
104 |             <a href="#" class="text-gega-grey uppercase lg:text-lg hover:text-gega-red duration-500">Watch Trailer</a>
105 |             <div class="flex h-8 w-8 rounded-full text-center items-center justify-center bg-gega-red text-gega-grey">
106 |               <i class="fas fa-play"></i>
107 |             </div>
108 |           </div>
109 | 
110 |           <!--INFO-->
111 |           <div class="flex space-x-2 items-center cursor-pointer">
112 |             <a href="#" class="text-gega-grey uppercase lg:text-lg hover:text-gega-red duration-500">Full Synopsis</a>
113 |             <div class="flex h-8 w-8 rounded-full text-center items-center justify-center bg-gega-red text-gega-grey">
114 |               <i class="fas fa-arrow-right"></i>
115 |             </div>
116 |           </div>
117 |         </div>
118 | 
119 |       </div>
120 |     </div>
121 | 
122 |     <!--Points-->
123 |     <div class="flex space-x-3 absolute bottom-5 left-10 opacity-0 group-hover:opacity-100 duration-1000">
124 |       <div class="w-3 h-3 lg:w-4 lg:h-4 rounded-full bg-gega-red"></div>
125 |       <div class="w-3 h-3 lg:w-4 lg:h-4 rounded-full bg-gega-grey"></div>
126 |       <div class="w-3 h-3 lg:w-4 lg:h-4 rounded-full bg-gega-grey"></div>
127 |       <div class="w-3 h-3 lg:w-4 lg:h-4 rounded-full bg-gega-grey"></div>
128 |     </div>
129 |   </section>
130 | 
131 |   <!--Movies Section-->
132 |   <section class="py-24 bg-black">
133 |     <!--Movies Content-->
134 |     <div class="container flex flex-col lg:flex-row lg:space-x-16 space-y-8 lg:space-y-0">
135 |       <!--Left Content-->
136 |       <div class="basis-2/3">
137 |         <!--Titles-->
138 |         <div class="flex space-x-2 divide-x divide-gega-red divide-opacity-50 mb-8 pl-10 lg:pl-0">
139 |           <h2 class="text-gega-red"><a href="#">Latest</a></h2>
140 |           <h2 class="text-gega-grey pl-2 hover:text-gega-red duration-500"><a href="#">Popular</a></h2>
141 |           <h2 class="text-gega-grey pl-2 hover:text-gega-red duration-500"><a href="#">Best</a></h2>
142 |         </div>
143 |         <!--Images Container-->
144 |         <div class="flex flex-wrap">
145 |           <!--Image 1-->
146 |           <div class="group relative overflow-hidden basis-1/3 md:basis-1/4 lg:basis-1/3">
147 |             <!--Image-->
148 |             <img src="./images/mv1.jpg" class="group-hover:scale-110 group-hover:opacity-50 duration-500">
149 |             <!--Image Detail Container-->
150 |             <div class="absolute px-6 bottom-8">
151 |               <h3 class="text-gega-grey group-hover:text-gega-melon group-hover:mb-2 duration-500">Oblivion</h3>
152 |               <p class="text-xs opacity-0 group-hover:opacity-100 group-hover:mb-10 duration-500 text-gega-grey">Lorem
153 |                 ipsum dolor sit amet
154 |                 consectetur adipisicing elit. Praesentium,
155 |                 impedit.</p>
156 |               <!--Icons Container-->
157 |               <div
158 |                 class="absolute flex space-x-8 text-gega-grey opacity-0 -bottom-2 group-hover:bottom-2 group-hover:opacity-100 duration-500">
159 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-play"></i></a>
160 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-arrow-right"></i></a>
161 |               </div>
162 |             </div>
163 |           </div>
164 |           <!--Image 2-->
165 |           <div class="group relative overflow-hidden basis-1/3 md:basis-1/4  lg:basis-1/3">
166 |             <!--Image-->
167 |             <img src="./images/mv6.jpg" class="group-hover:scale-110 group-hover:opacity-50 duration-500">
168 |             <!--Image Detail Container-->
169 |             <div class="absolute px-6 bottom-8">
170 |               <h3 class="text-gega-grey group-hover:text-gega-melon group-hover:mb-2 duration-500">Oblivion</h3>
171 |               <p class="text-xs opacity-0 group-hover:opacity-100 group-hover:mb-10 duration-500 text-gega-grey">Lorem
172 |                 ipsum dolor sit amet
173 |                 consectetur adipisicing elit. Praesentium,
174 |                 impedit.</p>
175 |               <!--Icons Container-->
176 |               <div
177 |                 class="absolute flex space-x-8 text-gega-grey opacity-0 -bottom-2 group-hover:bottom-2 group-hover:opacity-100 duration-500">
178 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-play"></i></a>
179 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-arrow-right"></i></a>
180 |               </div>
181 |             </div>
182 |           </div>
183 |           <!--Image 3-->
184 |           <div class="group relative overflow-hidden basis-1/3 md:basis-1/4  lg:basis-1/3">
185 |             <!--Image-->
186 |             <img src="./images/mv2.jpg" class="group-hover:scale-110 group-hover:opacity-50 duration-500">
187 |             <!--Image Detail Container-->
188 |             <div class="absolute px-6 bottom-8">
189 |               <h3 class="text-gega-grey group-hover:text-gega-melon group-hover:mb-2 duration-500">Oblivion</h3>
190 |               <p class="text-xs opacity-0 group-hover:opacity-100 group-hover:mb-10 duration-500 text-gega-grey">Lorem
191 |                 ipsum dolor sit amet
192 |                 consectetur adipisicing elit. Praesentium,
193 |                 impedit.</p>
194 |               <!--Icons Container-->
195 |               <div
196 |                 class="absolute flex space-x-8 text-gega-grey opacity-0 -bottom-2 group-hover:bottom-2 group-hover:opacity-100 duration-500">
197 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-play"></i></a>
198 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-arrow-right"></i></a>
199 |               </div>
200 |             </div>
201 |           </div>
202 |           <!--Image 4-->
203 |           <div class="group relative overflow-hidden basis-1/3 md:basis-1/4 lg:basis-1/3">
204 |             <!--Image-->
205 |             <img src="./images/mv3.jpg" class="group-hover:scale-110 group-hover:opacity-50 duration-500">
206 |             <!--Image Detail Container-->
207 |             <div class="absolute px-6 bottom-8">
208 |               <h3 class="text-gega-grey group-hover:text-gega-melon group-hover:mb-2 duration-500">Oblivion</h3>
209 |               <p class="text-xs opacity-0 group-hover:opacity-100 group-hover:mb-10 duration-500 text-gega-grey">Lorem
210 |                 ipsum dolor sit amet
211 |                 consectetur adipisicing elit. Praesentium,
212 |                 impedit.</p>
213 |               <!--Icons Container-->
214 |               <div
215 |                 class="absolute flex space-x-8 text-gega-grey opacity-0 -bottom-2 group-hover:bottom-2 group-hover:opacity-100 duration-500">
216 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-play"></i></a>
217 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-arrow-right"></i></a>
218 |               </div>
219 |             </div>
220 |           </div>
221 |           <!--Image 5-->
222 |           <div class="group relative overflow-hidden basis-1/3 md:basis-1/4 lg:basis-1/3">
223 |             <!--Image-->
224 |             <img src="./images/mv4.jpg" class="group-hover:scale-110 group-hover:opacity-50 duration-500">
225 |             <!--Image Detail Container-->
226 |             <div class="absolute px-6 bottom-8">
227 |               <h3 class="text-gega-grey group-hover:text-gega-melon group-hover:mb-2 duration-500">Oblivion</h3>
228 |               <p class="text-xs opacity-0 group-hover:opacity-100 group-hover:mb-10 duration-500 text-gega-grey">Lorem
229 |                 ipsum dolor sit amet
230 |                 consectetur adipisicing elit. Praesentium,
231 |                 impedit.</p>
232 |               <!--Icons Container-->
233 |               <div
234 |                 class="absolute flex space-x-8 text-gega-grey opacity-0 -bottom-2 group-hover:bottom-2 group-hover:opacity-100 duration-500">
235 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-play"></i></a>
236 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-arrow-right"></i></a>
237 |               </div>
238 |             </div>
239 |           </div>
240 |           <!--Image 6-->
241 |           <div class="group relative overflow-hidden basis-1/3 md:basis-1/4  lg:basis-1/3">
242 |             <!--Image-->
243 |             <img src="./images/mv5.jpg" class="group-hover:scale-110 group-hover:opacity-50 duration-500">
244 |             <!--Image Detail Container-->
245 |             <div class="absolute px-6 bottom-8">
246 |               <h3 class="text-gega-grey group-hover:text-gega-melon group-hover:mb-2 duration-500">Oblivion</h3>
247 |               <p class="text-xs opacity-0 group-hover:opacity-100 group-hover:mb-10 duration-500 text-gega-grey">Lorem
248 |                 ipsum dolor sit amet
249 |                 consectetur adipisicing elit. Praesentium,
250 |                 impedit.</p>
251 |               <!--Icons Container-->
252 |               <div
253 |                 class="absolute flex space-x-8 text-gega-grey opacity-0 -bottom-2 group-hover:bottom-2 group-hover:opacity-100 duration-500">
254 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-play"></i></a>
255 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-arrow-right"></i></a>
256 |               </div>
257 |             </div>
258 |           </div>
259 |           <!--Image 7-->
260 |           <div class="group relative overflow-hidden basis-1/3 md:basis-1/4  lg:basis-1/3 hidden md:block lg:hidden">
261 |             <!--Image-->
262 |             <img src="./images/mv1.jpg" class="group-hover:scale-110 group-hover:opacity-50 duration-500">
263 |             <!--Image Detail Container-->
264 |             <div class="absolute px-6 bottom-8">
265 |               <h3 class="text-gega-grey group-hover:text-gega-melon group-hover:mb-2 duration-500">Oblivion</h3>
266 |               <p class="text-xs opacity-0 group-hover:opacity-100 group-hover:mb-10 duration-500 text-gega-grey">Lorem
267 |                 ipsum dolor sit amet
268 |                 consectetur adipisicing elit. Praesentium,
269 |                 impedit.</p>
270 |               <!--Icons Container-->
271 |               <div
272 |                 class="absolute flex space-x-8 text-gega-grey opacity-0 -bottom-2 group-hover:bottom-2 group-hover:opacity-100 duration-500">
273 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-play"></i></a>
274 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-arrow-right"></i></a>
275 |               </div>
276 |             </div>
277 |           </div>
278 |           <!--Image 8-->
279 |           <div class="group relative overflow-hidden basis-1/3 md:basis-1/4  lg:basis-1/3  hidden md:block lg:hidden">
280 |             <!--Image-->
281 |             <img src="./images/mv2.jpg" class="group-hover:scale-110 group-hover:opacity-50 duration-500">
282 |             <!--Image Detail Container-->
283 |             <div class="absolute px-6 bottom-8">
284 |               <h3 class="text-gega-grey group-hover:text-gega-melon group-hover:mb-2 duration-500">Oblivion</h3>
285 |               <p class="text-xs opacity-0 group-hover:opacity-100 group-hover:mb-10 duration-500 text-gega-grey">Lorem
286 |                 ipsum dolor sit amet
287 |                 consectetur adipisicing elit. Praesentium,
288 |                 impedit.</p>
289 |               <!--Icons Container-->
290 |               <div
291 |                 class="absolute flex space-x-8 text-gega-grey opacity-0 -bottom-2 group-hover:bottom-2 group-hover:opacity-100 duration-500">
292 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-play"></i></a>
293 |                 <a class="hover:text-gega-red" href="#"><i class="fa-solid fa-arrow-right"></i></a>
294 |               </div>
295 |             </div>
296 |           </div>
297 |         </div>
298 |       </div>
299 |       <!--Right Content-->
300 |       <div class="basis-1/3 pl-10 lg:pl-0">
301 |         <!--Title-->
302 |         <h2 class="text-gega-grey mb-8">Hot News</h2>
303 |         <!--News Container-->
304 |         <div
305 |           class="flex flex-row lg:flex-col lg:h-full lg:pb-16 justify-start lg:justify-between flex-wrap lg:flex-nowrap space-y-4">
306 |           <!--Item-->
307 |           <div class="flex items-center group basis-3/4 md:basis-1/2">
308 |             <!--News Image Container-->
309 |             <div class="basis-1/3 h-full">
310 |               <img src="./images/new1.jpg" class="h-full w-full object-cover" alt="">
311 |             </div>
312 |             <!--Item Dteail-->
313 |             <div
314 |               class="pl-8 basis-2/3 text-gega-grey group-hover:text-gega-melon group-hover:cursor-pointer duration-500">
315 |               <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, delectus.</p>
316 |               <p class="text-xs tracking-tighter mt-2 font-bold font-gemunu">ON NOW 01 2022</p>
317 |             </div>
318 |           </div>
319 |           <!--Item-->
320 |           <div class="flex items-center group basis-3/4 md:basis-1/2">
321 |             <!--News Image Container-->
322 |             <div class="basis-1/3 h-full">
323 |               <img src="./images/new1.jpg" class="h-full w-full object-cover" alt="">
324 |             </div>
325 |             <!--Item Dteail-->
326 |             <div
327 |               class="pl-8 basis-2/3 text-gega-grey group-hover:text-gega-melon group-hover:cursor-pointer duration-500">
328 |               <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, delectus.</p>
329 |               <p class="text-xs tracking-tighter mt-2 font-bold font-gemunu">ON NOW 01 2022</p>
330 |             </div>
331 |           </div>
332 |           <!--Item-->
333 |           <div class="flex items-center group basis-3/4 md:basis-1/2">
334 |             <!--News Image Container-->
335 |             <div class="basis-1/3 h-full">
336 |               <img src="./images/new1.jpg" class="h-full w-full object-cover" alt="">
337 |             </div>
338 |             <!--Item Dteail-->
339 |             <div
340 |               class="pl-8 basis-2/3 text-gega-grey group-hover:text-gega-melon group-hover:cursor-pointer duration-500">
341 |               <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, delectus.</p>
342 |               <p class="text-xs tracking-tighter mt-2 font-bold font-gemunu">ON NOW 01 2022</p>
343 |             </div>
344 |           </div>
345 |           <!--Item-->
346 |           <div class="flex items-center group basis-3/4 md:basis-1/2">
347 |             <!--News Image Container-->
348 |             <div class="basis-1/3 h-full">
349 |               <img src="./images/new1.jpg" class="h-full w-full object-cover" alt="">
350 |             </div>
351 |             <!--Item Dteail-->
352 |             <div
353 |               class="pl-8 basis-2/3 text-gega-grey group-hover:text-gega-melon group-hover:cursor-pointer duration-500">
354 |               <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, delectus.</p>
355 |               <p class="text-xs tracking-tighter mt-2 font-bold font-gemunu">ON NOW 01 2022</p>
356 |             </div>
357 |           </div>
358 |           <!--Item-->
359 |           <div class="flex items-center group  basis-3/4 md:basis-1/2 md:hidden lg:flex">
360 |             <!--News Image Container-->
361 |             <div class="basis-1/3 h-full">
362 |               <img src="./images/new1.jpg" class="h-full w-full object-cover" alt="">
363 |             </div>
364 |             <!--Item Dteail-->
365 |             <div
366 |               class="pl-8 basis-2/3 text-gega-grey group-hover:text-gega-melon group-hover:cursor-pointer duration-500">
367 |               <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, delectus.</p>
368 |               <p class="text-xs tracking-tighter mt-2 font-bold font-gemunu">ON NOW 01 2022</p>
369 |             </div>
370 |           </div>
371 |         </div>
372 |       </div>
373 |     </div>
374 |   </section>
375 | 
376 |   <!--Matrix Section-->
377 |   <section class="bg-gega-white">
378 |     <!--Matris section container-->
379 |     <div class="container flex items-center justify-center relative pl-10 lg:pl-0">
380 |       <!--Left Content-->
381 |       <div class="hidden md:block md:basis-1/3 lg:basis-1/2">
382 |         <img src="./images/matrix.png" alt="" class="lg:absolute lg:bottom-0">
383 |       </div>
384 |       <!--Right Content-->
385 |       <div class="md:basis-2/3 lg:basis-1/2">
386 |         <!--Right content container-->
387 |         <div class="flex flex-col justify-center py-10 w-3/4 md:w-full">
388 |           <h3 class="tracking-wider text-gega-melon">ACTION, DRAMA, THRILLER</h3>
389 |           <h2 class="mb-2">Matrix Reloaded</h2>
390 |           <p class="text-sm mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus unde repellat impedit
391 |             consequatur soluta
392 |             obcaecati totam animi excepturi est vero?</p>
393 |           <h3 class="tracking-wider text-gega-red">8 wins 34 nominations</h3>
394 |         </div>
395 |       </div>
396 | 
397 |       <!--Oldie-->
398 |       <div
399 |         class="left-10 absolute -top-12 lg:left-0 w-24 h-24 bg-gega-melon rounded-full text-center flex items-center">
400 |         <p class="font-gemunu uppercase font-bold text-xl text-gega-red -rotate-45">Oldie & Goldie</p>
401 |       </div>
402 |     </div>
403 |   </section>
404 | 
405 |   <!--Post Section-->
406 |   <section class="py-24 bg-black text-gega-grey">
407 |     <!--Container-->
408 |     <div class="container px-10 lg:px-0">
409 |       <!--Title-->
410 |       <h2 class="text-gega-red"><a href="#">Popular Posts</a></h2>
411 | 
412 |       <!--Grid Area-->
413 |       <div class="grid grid-cols-6 gap-10">
414 |         <!--Item 1-->
415 |         <div class="col-span-6 md:col-span-3 border border-gega-red">
416 |           <!--Item 1 Header-->
417 |           <div class="border-b border-gega-red p-4 flex items-center justify-between">
418 |             <h3>ACCUSANTIUM DOLOREMQUE LAUDANT...</h3>
419 |             <img src="./images/userava1.jpg" alt="" class="rounded-full">
420 |           </div>
421 |           <!--Item 1 Para-->
422 |           <p class="p-4 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, consequatur
423 |             temporibus dolorem nihil
424 |             excepturi quos. Amet cupiditate aperiam temporibus perferendis?</p>
425 |           <!--Item 1 Footer-->
426 |           <div
427 |             class="border-t border-gega-red p-4 flex items-center justify-end space-x-4 font-bold font-gemunu text-xs">
428 |             <p>ON DEC 17, 2022</p>
429 |             <div class="flex items-center justify-center space-x-1">
430 |               <i class="fa-regular fa-comment"></i>
431 |               <p>12</p>
432 |               <i class="fa-regular fa-heart"></i>
433 |               <p>09</p>
434 |             </div>
435 |           </div>
436 |         </div>
437 | 
438 |         <!--Item 2-->
439 |         <div class="col-span-6 md:col-span-3 border border-gega-red">
440 |           <!--Item 1 Header-->
441 |           <div class="border-b border-gega-red p-4 flex items-center justify-between">
442 |             <h3>ACCUSANTIUM DOLOREMQUE LAUDANT...</h3>
443 |             <img src="./images/userava1.jpg" alt="" class="rounded-full">
444 |           </div>
445 |           <!--Item 1 Para-->
446 |           <p class="p-4 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, consequatur
447 |             temporibus dolorem nihil
448 |             excepturi quos. Amet cupiditate aperiam temporibus perferendis?</p>
449 |           <!--Item 1 Footer-->
450 |           <div
451 |             class="border-t border-gega-red p-4 flex items-center justify-end space-x-4 font-bold font-gemunu text-xs">
452 |             <p>ON DEC 17, 2022</p>
453 |             <div class="flex items-center justify-center space-x-1">
454 |               <i class="fa-regular fa-comment"></i>
455 |               <p>12</p>
456 |               <i class="fa-regular fa-heart"></i>
457 |               <p>09</p>
458 |             </div>
459 |           </div>
460 |         </div>
461 | 
462 |         <!--Item 3-->
463 |         <div class="col-span-6 md:col-span-3 lg:col-span-2 border border-gega-red">
464 |           <!--Item 1 Header-->
465 |           <div class="border-b border-gega-red p-4 flex items-center justify-between">
466 |             <h3>ACCUSANTIUM DOLOREMQUE LAUDANT...</h3>
467 |             <img src="./images/userava1.jpg" alt="" class="rounded-full">
468 |           </div>
469 |           <!--Item 1 Para-->
470 |           <p class="p-4 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, consequatur
471 |             temporibus dolorem nihil
472 |             excepturi quos. Amet cupiditate aperiam temporibus perferendis?</p>
473 |           <!--Item 1 Footer-->
474 |           <div
475 |             class="border-t border-gega-red p-4 flex items-center justify-end space-x-4 font-bold font-gemunu text-xs">
476 |             <p>ON DEC 17, 2022</p>
477 |             <div class="flex items-center justify-center space-x-1">
478 |               <i class="fa-regular fa-comment"></i>
479 |               <p>12</p>
480 |               <i class="fa-regular fa-heart"></i>
481 |               <p>09</p>
482 |             </div>
483 |           </div>
484 |         </div>
485 | 
486 |         <!--Item 4-->
487 |         <div class="col-span-6 md:col-span-3 lg:col-span-2 border border-gega-red">
488 |           <!--Item 1 Header-->
489 |           <div class="border-b border-gega-red p-4 flex items-center justify-between">
490 |             <h3>ACCUSANTIUM DOLOREMQUE LAUDANT...</h3>
491 |             <img src="./images/userava1.jpg" alt="" class="rounded-full">
492 |           </div>
493 |           <!--Item 1 Para-->
494 |           <p class="p-4 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, consequatur
495 |             temporibus dolorem nihil
496 |             excepturi quos. Amet cupiditate aperiam temporibus perferendis?</p>
497 |           <!--Item 1 Footer-->
498 |           <div
499 |             class="border-t border-gega-red p-4 flex items-center justify-end space-x-4 font-bold font-gemunu text-xs">
500 |             <p>ON DEC 17, 2022</p>
501 |             <div class="flex items-center justify-center space-x-1">
502 |               <i class="fa-regular fa-comment"></i>
503 |               <p>12</p>
504 |               <i class="fa-regular fa-heart"></i>
505 |               <p>09</p>
506 |             </div>
507 |           </div>
508 |         </div>
509 | 
510 |         <!--Item 5-->
511 |         <div class="hidden lg:block lg:col-span-2 border border-gega-red">
512 |           <!--Item 1 Header-->
513 |           <div class="border-b border-gega-red p-4 flex items-center justify-between">
514 |             <h3>ACCUSANTIUM DOLOREMQUE LAUDANT...</h3>
515 |             <img src="./images/userava1.jpg" alt="" class="rounded-full">
516 |           </div>
517 |           <!--Item 1 Para-->
518 |           <p class="p-4 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, consequatur
519 |             temporibus dolorem nihil
520 |             excepturi quos. Amet cupiditate aperiam temporibus perferendis?</p>
521 |           <!--Item 1 Footer-->
522 |           <div
523 |             class="border-t border-gega-red p-4 flex items-center justify-end space-x-4 font-bold font-gemunu text-xs">
524 |             <p>ON DEC 17, 2022</p>
525 |             <div class="flex items-center justify-center space-x-1">
526 |               <i class="fa-regular fa-comment"></i>
527 |               <p>12</p>
528 |               <i class="fa-regular fa-heart"></i>
529 |               <p>09</p>
530 |             </div>
531 |           </div>
532 |         </div>
533 | 
534 |       </div>
535 |     </div>
536 |   </section>
537 | 
538 |   <!--Footer Section-->
539 |   <footer class="bg-black text-gega-grey">
540 |     <!--Footer Container-->
541 |     <div class="container flex flex-col md:flex-row px-10 lg:px-0 pb-8">
542 |       <!--Left-->
543 |       <div class="basis-1/3">
544 |         <a href="#"
545 |           class="text-2xl lg:text-3xl font-bold text-transparent bg-gradient-to-r bg-clip-text from-gega-red to-gega-grey">GEGA</a>
546 |         <p class="text-sm mt-2">2022 ArinSOFT No &copy; COPYRIGHT</p>
547 |       </div>
548 |       <!--Middle-->
549 |       <div class="basis-1/3">
550 |         <h2 class="mb-2 text-gega-red">LINKS</h2>
551 |         <div class="grid grid-cols-5 gap-2 uppercase">
552 |           <a class="col-span-2 hover:text-gega-melon duration-500" href="#">Movies</a>
553 |           <a class="col-span-2 hover:text-gega-melon duration-500" href="#">Celebrities</a>
554 |           <a class="col-span-2 hover:text-gega-melon duration-500" href="#">Blog</a>
555 |           <a class="col-span-2 hover:text-gega-melon duration-500" href="#">News</a>
556 |           <a class="col-span-2 hover:text-gega-melon duration-500" href="#">Abput</a>
557 |         </div>
558 |       </div>
559 |       <!--Right-->
560 |       <div class="basis-1/3">
561 |         <h2 class="mb-2 text-gega-red">FOLLOW US</h2>
562 |         <form action="" class="flex">
563 |           <input class="py-1 px-2 bg-transparent border border-gega-red placeholder:text-xs outline-none"
564 |             placeholder="TYPE YOUR EMAIL" type="text">
565 |           <button
566 |             class="py-1 px-2 bg-transparent border border-gega-red bg-gega-red font-gemunu uppercase">Subscribe</button>
567 |         </form>
568 |       </div>
569 |     </div>
570 |   </footer>
571 |   <script src="./js/script.js"></script>
572 | </body>
573 | 
574 | </html>


--------------------------------------------------------------------------------
/public/css/styles.css:
--------------------------------------------------------------------------------
   1 | /*
   2 | ! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com
   3 | */
   4 | 
   5 | /*
   6 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
   7 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
   8 | */
   9 | 
  10 | *,
  11 | ::before,
  12 | ::after {
  13 |   box-sizing: border-box;
  14 |   /* 1 */
  15 |   border-width: 0;
  16 |   /* 2 */
  17 |   border-style: solid;
  18 |   /* 2 */
  19 |   border-color: #e5e7eb;
  20 |   /* 2 */
  21 | }
  22 | 
  23 | ::before,
  24 | ::after {
  25 |   --tw-content: '';
  26 | }
  27 | 
  28 | /*
  29 | 1. Use a consistent sensible line-height in all browsers.
  30 | 2. Prevent adjustments of font size after orientation changes in iOS.
  31 | 3. Use a more readable tab size.
  32 | 4. Use the user's configured `sans` font-family by default.
  33 | 5. Use the user's configured `sans` font-feature-settings by default.
  34 | */
  35 | 
  36 | html {
  37 |   line-height: 1.5;
  38 |   /* 1 */
  39 |   -webkit-text-size-adjust: 100%;
  40 |   /* 2 */
  41 |   -moz-tab-size: 4;
  42 |   /* 3 */
  43 |   -o-tab-size: 4;
  44 |      tab-size: 4;
  45 |   /* 3 */
  46 |   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  47 |   /* 4 */
  48 |   font-feature-settings: normal;
  49 |   /* 5 */
  50 | }
  51 | 
  52 | /*
  53 | 1. Remove the margin in all browsers.
  54 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
  55 | */
  56 | 
  57 | body {
  58 |   margin: 0;
  59 |   /* 1 */
  60 |   line-height: inherit;
  61 |   /* 2 */
  62 | }
  63 | 
  64 | /*
  65 | 1. Add the correct height in Firefox.
  66 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  67 | 3. Ensure horizontal rules are visible by default.
  68 | */
  69 | 
  70 | hr {
  71 |   height: 0;
  72 |   /* 1 */
  73 |   color: inherit;
  74 |   /* 2 */
  75 |   border-top-width: 1px;
  76 |   /* 3 */
  77 | }
  78 | 
  79 | /*
  80 | Add the correct text decoration in Chrome, Edge, and Safari.
  81 | */
  82 | 
  83 | abbr:where([title]) {
  84 |   -webkit-text-decoration: underline dotted;
  85 |           text-decoration: underline dotted;
  86 | }
  87 | 
  88 | /*
  89 | Remove the default font size and weight for headings.
  90 | */
  91 | 
  92 | h1,
  93 | h2,
  94 | h3,
  95 | h4,
  96 | h5,
  97 | h6 {
  98 |   font-size: inherit;
  99 |   font-weight: inherit;
 100 | }
 101 | 
 102 | /*
 103 | Reset links to optimize for opt-in styling instead of opt-out.
 104 | */
 105 | 
 106 | a {
 107 |   color: inherit;
 108 |   text-decoration: inherit;
 109 | }
 110 | 
 111 | /*
 112 | Add the correct font weight in Edge and Safari.
 113 | */
 114 | 
 115 | b,
 116 | strong {
 117 |   font-weight: bolder;
 118 | }
 119 | 
 120 | /*
 121 | 1. Use the user's configured `mono` font family by default.
 122 | 2. Correct the odd `em` font sizing in all browsers.
 123 | */
 124 | 
 125 | code,
 126 | kbd,
 127 | samp,
 128 | pre {
 129 |   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 130 |   /* 1 */
 131 |   font-size: 1em;
 132 |   /* 2 */
 133 | }
 134 | 
 135 | /*
 136 | Add the correct font size in all browsers.
 137 | */
 138 | 
 139 | small {
 140 |   font-size: 80%;
 141 | }
 142 | 
 143 | /*
 144 | Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 145 | */
 146 | 
 147 | sub,
 148 | sup {
 149 |   font-size: 75%;
 150 |   line-height: 0;
 151 |   position: relative;
 152 |   vertical-align: baseline;
 153 | }
 154 | 
 155 | sub {
 156 |   bottom: -0.25em;
 157 | }
 158 | 
 159 | sup {
 160 |   top: -0.5em;
 161 | }
 162 | 
 163 | /*
 164 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 165 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 166 | 3. Remove gaps between table borders by default.
 167 | */
 168 | 
 169 | table {
 170 |   text-indent: 0;
 171 |   /* 1 */
 172 |   border-color: inherit;
 173 |   /* 2 */
 174 |   border-collapse: collapse;
 175 |   /* 3 */
 176 | }
 177 | 
 178 | /*
 179 | 1. Change the font styles in all browsers.
 180 | 2. Remove the margin in Firefox and Safari.
 181 | 3. Remove default padding in all browsers.
 182 | */
 183 | 
 184 | button,
 185 | input,
 186 | optgroup,
 187 | select,
 188 | textarea {
 189 |   font-family: inherit;
 190 |   /* 1 */
 191 |   font-size: 100%;
 192 |   /* 1 */
 193 |   font-weight: inherit;
 194 |   /* 1 */
 195 |   line-height: inherit;
 196 |   /* 1 */
 197 |   color: inherit;
 198 |   /* 1 */
 199 |   margin: 0;
 200 |   /* 2 */
 201 |   padding: 0;
 202 |   /* 3 */
 203 | }
 204 | 
 205 | /*
 206 | Remove the inheritance of text transform in Edge and Firefox.
 207 | */
 208 | 
 209 | button,
 210 | select {
 211 |   text-transform: none;
 212 | }
 213 | 
 214 | /*
 215 | 1. Correct the inability to style clickable types in iOS and Safari.
 216 | 2. Remove default button styles.
 217 | */
 218 | 
 219 | button,
 220 | [type='button'],
 221 | [type='reset'],
 222 | [type='submit'] {
 223 |   -webkit-appearance: button;
 224 |   /* 1 */
 225 |   background-color: transparent;
 226 |   /* 2 */
 227 |   background-image: none;
 228 |   /* 2 */
 229 | }
 230 | 
 231 | /*
 232 | Use the modern Firefox focus style for all focusable elements.
 233 | */
 234 | 
 235 | :-moz-focusring {
 236 |   outline: auto;
 237 | }
 238 | 
 239 | /*
 240 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 241 | */
 242 | 
 243 | :-moz-ui-invalid {
 244 |   box-shadow: none;
 245 | }
 246 | 
 247 | /*
 248 | Add the correct vertical alignment in Chrome and Firefox.
 249 | */
 250 | 
 251 | progress {
 252 |   vertical-align: baseline;
 253 | }
 254 | 
 255 | /*
 256 | Correct the cursor style of increment and decrement buttons in Safari.
 257 | */
 258 | 
 259 | ::-webkit-inner-spin-button,
 260 | ::-webkit-outer-spin-button {
 261 |   height: auto;
 262 | }
 263 | 
 264 | /*
 265 | 1. Correct the odd appearance in Chrome and Safari.
 266 | 2. Correct the outline style in Safari.
 267 | */
 268 | 
 269 | [type='search'] {
 270 |   -webkit-appearance: textfield;
 271 |   /* 1 */
 272 |   outline-offset: -2px;
 273 |   /* 2 */
 274 | }
 275 | 
 276 | /*
 277 | Remove the inner padding in Chrome and Safari on macOS.
 278 | */
 279 | 
 280 | ::-webkit-search-decoration {
 281 |   -webkit-appearance: none;
 282 | }
 283 | 
 284 | /*
 285 | 1. Correct the inability to style clickable types in iOS and Safari.
 286 | 2. Change font properties to `inherit` in Safari.
 287 | */
 288 | 
 289 | ::-webkit-file-upload-button {
 290 |   -webkit-appearance: button;
 291 |   /* 1 */
 292 |   font: inherit;
 293 |   /* 2 */
 294 | }
 295 | 
 296 | /*
 297 | Add the correct display in Chrome and Safari.
 298 | */
 299 | 
 300 | summary {
 301 |   display: list-item;
 302 | }
 303 | 
 304 | /*
 305 | Removes the default spacing and border for appropriate elements.
 306 | */
 307 | 
 308 | blockquote,
 309 | dl,
 310 | dd,
 311 | h1,
 312 | h2,
 313 | h3,
 314 | h4,
 315 | h5,
 316 | h6,
 317 | hr,
 318 | figure,
 319 | p,
 320 | pre {
 321 |   margin: 0;
 322 | }
 323 | 
 324 | fieldset {
 325 |   margin: 0;
 326 |   padding: 0;
 327 | }
 328 | 
 329 | legend {
 330 |   padding: 0;
 331 | }
 332 | 
 333 | ol,
 334 | ul,
 335 | menu {
 336 |   list-style: none;
 337 |   margin: 0;
 338 |   padding: 0;
 339 | }
 340 | 
 341 | /*
 342 | Prevent resizing textareas horizontally by default.
 343 | */
 344 | 
 345 | textarea {
 346 |   resize: vertical;
 347 | }
 348 | 
 349 | /*
 350 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 351 | 2. Set the default placeholder color to the user's configured gray 400 color.
 352 | */
 353 | 
 354 | input::-moz-placeholder, textarea::-moz-placeholder {
 355 |   opacity: 1;
 356 |   /* 1 */
 357 |   color: #9ca3af;
 358 |   /* 2 */
 359 | }
 360 | 
 361 | input::placeholder,
 362 | textarea::placeholder {
 363 |   opacity: 1;
 364 |   /* 1 */
 365 |   color: #9ca3af;
 366 |   /* 2 */
 367 | }
 368 | 
 369 | /*
 370 | Set the default cursor for buttons.
 371 | */
 372 | 
 373 | button,
 374 | [role="button"] {
 375 |   cursor: pointer;
 376 | }
 377 | 
 378 | /*
 379 | Make sure disabled buttons don't get the pointer cursor.
 380 | */
 381 | 
 382 | :disabled {
 383 |   cursor: default;
 384 | }
 385 | 
 386 | /*
 387 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 388 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
 389 |    This can trigger a poorly considered lint error in some tools but is included by design.
 390 | */
 391 | 
 392 | img,
 393 | svg,
 394 | video,
 395 | canvas,
 396 | audio,
 397 | iframe,
 398 | embed,
 399 | object {
 400 |   display: block;
 401 |   /* 1 */
 402 |   vertical-align: middle;
 403 |   /* 2 */
 404 | }
 405 | 
 406 | /*
 407 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 408 | */
 409 | 
 410 | img,
 411 | video {
 412 |   max-width: 100%;
 413 |   height: auto;
 414 | }
 415 | 
 416 | /* Make elements with the HTML hidden attribute stay hidden by default */
 417 | 
 418 | [hidden] {
 419 |   display: none;
 420 | }
 421 | 
 422 | h1, h2, h3, h4, h5, h6 {
 423 |   font-family: Gemunu Libre, sans-serif;
 424 |   text-transform: uppercase;
 425 | }
 426 | 
 427 | h2 {
 428 |   font-size: 1.5rem;
 429 |   line-height: 2rem;
 430 |   letter-spacing: 0.05em;
 431 | }
 432 | 
 433 | a {
 434 |   font-family: Gemunu Libre, sans-serif;
 435 | }
 436 | 
 437 | *, ::before, ::after {
 438 |   --tw-border-spacing-x: 0;
 439 |   --tw-border-spacing-y: 0;
 440 |   --tw-translate-x: 0;
 441 |   --tw-translate-y: 0;
 442 |   --tw-rotate: 0;
 443 |   --tw-skew-x: 0;
 444 |   --tw-skew-y: 0;
 445 |   --tw-scale-x: 1;
 446 |   --tw-scale-y: 1;
 447 |   --tw-pan-x:  ;
 448 |   --tw-pan-y:  ;
 449 |   --tw-pinch-zoom:  ;
 450 |   --tw-scroll-snap-strictness: proximity;
 451 |   --tw-ordinal:  ;
 452 |   --tw-slashed-zero:  ;
 453 |   --tw-numeric-figure:  ;
 454 |   --tw-numeric-spacing:  ;
 455 |   --tw-numeric-fraction:  ;
 456 |   --tw-ring-inset:  ;
 457 |   --tw-ring-offset-width: 0px;
 458 |   --tw-ring-offset-color: #fff;
 459 |   --tw-ring-color: rgb(59 130 246 / 0.5);
 460 |   --tw-ring-offset-shadow: 0 0 #0000;
 461 |   --tw-ring-shadow: 0 0 #0000;
 462 |   --tw-shadow: 0 0 #0000;
 463 |   --tw-shadow-colored: 0 0 #0000;
 464 |   --tw-blur:  ;
 465 |   --tw-brightness:  ;
 466 |   --tw-contrast:  ;
 467 |   --tw-grayscale:  ;
 468 |   --tw-hue-rotate:  ;
 469 |   --tw-invert:  ;
 470 |   --tw-saturate:  ;
 471 |   --tw-sepia:  ;
 472 |   --tw-drop-shadow:  ;
 473 |   --tw-backdrop-blur:  ;
 474 |   --tw-backdrop-brightness:  ;
 475 |   --tw-backdrop-contrast:  ;
 476 |   --tw-backdrop-grayscale:  ;
 477 |   --tw-backdrop-hue-rotate:  ;
 478 |   --tw-backdrop-invert:  ;
 479 |   --tw-backdrop-opacity:  ;
 480 |   --tw-backdrop-saturate:  ;
 481 |   --tw-backdrop-sepia:  ;
 482 | }
 483 | 
 484 | ::backdrop {
 485 |   --tw-border-spacing-x: 0;
 486 |   --tw-border-spacing-y: 0;
 487 |   --tw-translate-x: 0;
 488 |   --tw-translate-y: 0;
 489 |   --tw-rotate: 0;
 490 |   --tw-skew-x: 0;
 491 |   --tw-skew-y: 0;
 492 |   --tw-scale-x: 1;
 493 |   --tw-scale-y: 1;
 494 |   --tw-pan-x:  ;
 495 |   --tw-pan-y:  ;
 496 |   --tw-pinch-zoom:  ;
 497 |   --tw-scroll-snap-strictness: proximity;
 498 |   --tw-ordinal:  ;
 499 |   --tw-slashed-zero:  ;
 500 |   --tw-numeric-figure:  ;
 501 |   --tw-numeric-spacing:  ;
 502 |   --tw-numeric-fraction:  ;
 503 |   --tw-ring-inset:  ;
 504 |   --tw-ring-offset-width: 0px;
 505 |   --tw-ring-offset-color: #fff;
 506 |   --tw-ring-color: rgb(59 130 246 / 0.5);
 507 |   --tw-ring-offset-shadow: 0 0 #0000;
 508 |   --tw-ring-shadow: 0 0 #0000;
 509 |   --tw-shadow: 0 0 #0000;
 510 |   --tw-shadow-colored: 0 0 #0000;
 511 |   --tw-blur:  ;
 512 |   --tw-brightness:  ;
 513 |   --tw-contrast:  ;
 514 |   --tw-grayscale:  ;
 515 |   --tw-hue-rotate:  ;
 516 |   --tw-invert:  ;
 517 |   --tw-saturate:  ;
 518 |   --tw-sepia:  ;
 519 |   --tw-drop-shadow:  ;
 520 |   --tw-backdrop-blur:  ;
 521 |   --tw-backdrop-brightness:  ;
 522 |   --tw-backdrop-contrast:  ;
 523 |   --tw-backdrop-grayscale:  ;
 524 |   --tw-backdrop-hue-rotate:  ;
 525 |   --tw-backdrop-invert:  ;
 526 |   --tw-backdrop-opacity:  ;
 527 |   --tw-backdrop-saturate:  ;
 528 |   --tw-backdrop-sepia:  ;
 529 | }
 530 | 
 531 | .container {
 532 |   width: 100%;
 533 |   margin-right: auto;
 534 |   margin-left: auto;
 535 | }
 536 | 
 537 | @media (min-width: 1140px) {
 538 |   .container {
 539 |     max-width: 1140px;
 540 |   }
 541 | }
 542 | 
 543 | .absolute {
 544 |   position: absolute;
 545 | }
 546 | 
 547 | .relative {
 548 |   position: relative;
 549 | }
 550 | 
 551 | .bottom-0 {
 552 |   bottom: 0px;
 553 | }
 554 | 
 555 | .bottom-5 {
 556 |   bottom: 1.25rem;
 557 | }
 558 | 
 559 | .left-10 {
 560 |   left: 2.5rem;
 561 | }
 562 | 
 563 | .bottom-8 {
 564 |   bottom: 2rem;
 565 | }
 566 | 
 567 | .-bottom-2 {
 568 |   bottom: -0.5rem;
 569 | }
 570 | 
 571 | .-top-12 {
 572 |   top: -3rem;
 573 | }
 574 | 
 575 | .top-1 {
 576 |   top: 0.25rem;
 577 | }
 578 | 
 579 | .left-5 {
 580 |   left: 1.25rem;
 581 | }
 582 | 
 583 | .col-span-6 {
 584 |   grid-column: span 6 / span 6;
 585 | }
 586 | 
 587 | .col-span-2 {
 588 |   grid-column: span 2 / span 2;
 589 | }
 590 | 
 591 | .mx-4 {
 592 |   margin-left: 1rem;
 593 |   margin-right: 1rem;
 594 | }
 595 | 
 596 | .-ml-4 {
 597 |   margin-left: -1rem;
 598 | }
 599 | 
 600 | .mb-8 {
 601 |   margin-bottom: 2rem;
 602 | }
 603 | 
 604 | .mt-2 {
 605 |   margin-top: 0.5rem;
 606 | }
 607 | 
 608 | .mb-2 {
 609 |   margin-bottom: 0.5rem;
 610 | }
 611 | 
 612 | .block {
 613 |   display: block;
 614 | }
 615 | 
 616 | .flex {
 617 |   display: flex;
 618 | }
 619 | 
 620 | .grid {
 621 |   display: grid;
 622 | }
 623 | 
 624 | .hidden {
 625 |   display: none;
 626 | }
 627 | 
 628 | .h-1 {
 629 |   height: 0.25rem;
 630 | }
 631 | 
 632 | .h-96 {
 633 |   height: 24rem;
 634 | }
 635 | 
 636 | .h-full {
 637 |   height: 100%;
 638 | }
 639 | 
 640 | .h-8 {
 641 |   height: 2rem;
 642 | }
 643 | 
 644 | .h-3 {
 645 |   height: 0.75rem;
 646 | }
 647 | 
 648 | .h-24 {
 649 |   height: 6rem;
 650 | }
 651 | 
 652 | .w-8 {
 653 |   width: 2rem;
 654 | }
 655 | 
 656 | .w-24 {
 657 |   width: 6rem;
 658 | }
 659 | 
 660 | .w-full {
 661 |   width: 100%;
 662 | }
 663 | 
 664 | .w-3\/4 {
 665 |   width: 75%;
 666 | }
 667 | 
 668 | .w-3 {
 669 |   width: 0.75rem;
 670 | }
 671 | 
 672 | .flex-1 {
 673 |   flex: 1 1 0%;
 674 | }
 675 | 
 676 | .basis-2\/3 {
 677 |   flex-basis: 66.666667%;
 678 | }
 679 | 
 680 | .basis-1\/3 {
 681 |   flex-basis: 33.333333%;
 682 | }
 683 | 
 684 | .basis-3\/4 {
 685 |   flex-basis: 75%;
 686 | }
 687 | 
 688 | .-rotate-45 {
 689 |   --tw-rotate: -45deg;
 690 |   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 691 | }
 692 | 
 693 | .cursor-pointer {
 694 |   cursor: pointer;
 695 | }
 696 | 
 697 | .grid-cols-6 {
 698 |   grid-template-columns: repeat(6, minmax(0, 1fr));
 699 | }
 700 | 
 701 | .grid-cols-5 {
 702 |   grid-template-columns: repeat(5, minmax(0, 1fr));
 703 | }
 704 | 
 705 | .flex-row {
 706 |   flex-direction: row;
 707 | }
 708 | 
 709 | .flex-col {
 710 |   flex-direction: column;
 711 | }
 712 | 
 713 | .flex-wrap {
 714 |   flex-wrap: wrap;
 715 | }
 716 | 
 717 | .items-center {
 718 |   align-items: center;
 719 | }
 720 | 
 721 | .justify-start {
 722 |   justify-content: flex-start;
 723 | }
 724 | 
 725 | .justify-end {
 726 |   justify-content: flex-end;
 727 | }
 728 | 
 729 | .justify-center {
 730 |   justify-content: center;
 731 | }
 732 | 
 733 | .justify-between {
 734 |   justify-content: space-between;
 735 | }
 736 | 
 737 | .gap-10 {
 738 |   gap: 2.5rem;
 739 | }
 740 | 
 741 | .gap-2 {
 742 |   gap: 0.5rem;
 743 | }
 744 | 
 745 | .space-x-8 > :not([hidden]) ~ :not([hidden]) {
 746 |   --tw-space-x-reverse: 0;
 747 |   margin-right: calc(2rem * var(--tw-space-x-reverse));
 748 |   margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 749 | }
 750 | 
 751 | .space-y-1 > :not([hidden]) ~ :not([hidden]) {
 752 |   --tw-space-y-reverse: 0;
 753 |   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
 754 |   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 755 | }
 756 | 
 757 | .space-x-4 > :not([hidden]) ~ :not([hidden]) {
 758 |   --tw-space-x-reverse: 0;
 759 |   margin-right: calc(1rem * var(--tw-space-x-reverse));
 760 |   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 761 | }
 762 | 
 763 | .space-x-2 > :not([hidden]) ~ :not([hidden]) {
 764 |   --tw-space-x-reverse: 0;
 765 |   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
 766 |   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 767 | }
 768 | 
 769 | .space-x-3 > :not([hidden]) ~ :not([hidden]) {
 770 |   --tw-space-x-reverse: 0;
 771 |   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
 772 |   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 773 | }
 774 | 
 775 | .space-y-8 > :not([hidden]) ~ :not([hidden]) {
 776 |   --tw-space-y-reverse: 0;
 777 |   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
 778 |   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 779 | }
 780 | 
 781 | .space-y-4 > :not([hidden]) ~ :not([hidden]) {
 782 |   --tw-space-y-reverse: 0;
 783 |   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
 784 |   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 785 | }
 786 | 
 787 | .space-x-1 > :not([hidden]) ~ :not([hidden]) {
 788 |   --tw-space-x-reverse: 0;
 789 |   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
 790 |   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 791 | }
 792 | 
 793 | .divide-x > :not([hidden]) ~ :not([hidden]) {
 794 |   --tw-divide-x-reverse: 0;
 795 |   border-right-width: calc(1px * var(--tw-divide-x-reverse));
 796 |   border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
 797 | }
 798 | 
 799 | .divide-gega-red > :not([hidden]) ~ :not([hidden]) {
 800 |   --tw-divide-opacity: 1;
 801 |   border-color: rgb(188 26 69 / var(--tw-divide-opacity));
 802 | }
 803 | 
 804 | .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
 805 |   --tw-divide-opacity: 0.5;
 806 | }
 807 | 
 808 | .overflow-hidden {
 809 |   overflow: hidden;
 810 | }
 811 | 
 812 | .whitespace-nowrap {
 813 |   white-space: nowrap;
 814 | }
 815 | 
 816 | .rounded-full {
 817 |   border-radius: 9999px;
 818 | }
 819 | 
 820 | .border {
 821 |   border-width: 1px;
 822 | }
 823 | 
 824 | .border-r {
 825 |   border-right-width: 1px;
 826 | }
 827 | 
 828 | .border-b {
 829 |   border-bottom-width: 1px;
 830 | }
 831 | 
 832 | .border-t {
 833 |   border-top-width: 1px;
 834 | }
 835 | 
 836 | .border-gega-red {
 837 |   --tw-border-opacity: 1;
 838 |   border-color: rgb(188 26 69 / var(--tw-border-opacity));
 839 | }
 840 | 
 841 | .bg-black {
 842 |   --tw-bg-opacity: 1;
 843 |   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 844 | }
 845 | 
 846 | .bg-gega-grey {
 847 |   --tw-bg-opacity: 1;
 848 |   background-color: rgb(221 221 221 / var(--tw-bg-opacity));
 849 | }
 850 | 
 851 | .bg-transparent {
 852 |   background-color: transparent;
 853 | }
 854 | 
 855 | .bg-gega-red {
 856 |   --tw-bg-opacity: 1;
 857 |   background-color: rgb(188 26 69 / var(--tw-bg-opacity));
 858 | }
 859 | 
 860 | .bg-gega-white {
 861 |   --tw-bg-opacity: 1;
 862 |   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 863 | }
 864 | 
 865 | .bg-gega-melon {
 866 |   --tw-bg-opacity: 1;
 867 |   background-color: rgb(255 211 105 / var(--tw-bg-opacity));
 868 | }
 869 | 
 870 | .bg-white {
 871 |   --tw-bg-opacity: 1;
 872 |   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 873 | }
 874 | 
 875 | .bg-gradient-to-r {
 876 |   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 877 | }
 878 | 
 879 | .bg-gradient-to-b {
 880 |   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 881 | }
 882 | 
 883 | .from-gega-red {
 884 |   --tw-gradient-from: #BC1A45;
 885 |   --tw-gradient-to: rgb(188 26 69 / 0);
 886 |   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 887 | }
 888 | 
 889 | .from-transparent {
 890 |   --tw-gradient-from: transparent;
 891 |   --tw-gradient-to: rgb(0 0 0 / 0);
 892 |   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 893 | }
 894 | 
 895 | .to-gega-grey {
 896 |   --tw-gradient-to: #DDDDDD;
 897 | }
 898 | 
 899 | .to-black {
 900 |   --tw-gradient-to: #000;
 901 | }
 902 | 
 903 | .bg-clip-text {
 904 |   -webkit-background-clip: text;
 905 |           background-clip: text;
 906 | }
 907 | 
 908 | .object-cover {
 909 |   -o-object-fit: cover;
 910 |      object-fit: cover;
 911 | }
 912 | 
 913 | .p-4 {
 914 |   padding: 1rem;
 915 | }
 916 | 
 917 | .py-6 {
 918 |   padding-top: 1.5rem;
 919 |   padding-bottom: 1.5rem;
 920 | }
 921 | 
 922 | .px-4 {
 923 |   padding-left: 1rem;
 924 |   padding-right: 1rem;
 925 | }
 926 | 
 927 | .py-1 {
 928 |   padding-top: 0.25rem;
 929 |   padding-bottom: 0.25rem;
 930 | }
 931 | 
 932 | .px-3 {
 933 |   padding-left: 0.75rem;
 934 |   padding-right: 0.75rem;
 935 | }
 936 | 
 937 | .py-24 {
 938 |   padding-top: 6rem;
 939 |   padding-bottom: 6rem;
 940 | }
 941 | 
 942 | .px-6 {
 943 |   padding-left: 1.5rem;
 944 |   padding-right: 1.5rem;
 945 | }
 946 | 
 947 | .py-10 {
 948 |   padding-top: 2.5rem;
 949 |   padding-bottom: 2.5rem;
 950 | }
 951 | 
 952 | .px-10 {
 953 |   padding-left: 2.5rem;
 954 |   padding-right: 2.5rem;
 955 | }
 956 | 
 957 | .px-2 {
 958 |   padding-left: 0.5rem;
 959 |   padding-right: 0.5rem;
 960 | }
 961 | 
 962 | .pl-4 {
 963 |   padding-left: 1rem;
 964 | }
 965 | 
 966 | .pr-4 {
 967 |   padding-right: 1rem;
 968 | }
 969 | 
 970 | .pl-10 {
 971 |   padding-left: 2.5rem;
 972 | }
 973 | 
 974 | .pl-2 {
 975 |   padding-left: 0.5rem;
 976 | }
 977 | 
 978 | .pl-8 {
 979 |   padding-left: 2rem;
 980 | }
 981 | 
 982 | .pb-8 {
 983 |   padding-bottom: 2rem;
 984 | }
 985 | 
 986 | .text-center {
 987 |   text-align: center;
 988 | }
 989 | 
 990 | .font-open {
 991 |   font-family: Open Sans, sans-serif;
 992 | }
 993 | 
 994 | .font-gemunu {
 995 |   font-family: Gemunu Libre, sans-serif;
 996 | }
 997 | 
 998 | .text-4xl {
 999 |   font-size: 2.25rem;
1000 |   line-height: 2.5rem;
1001 | }
1002 | 
1003 | .text-sm {
1004 |   font-size: 0.875rem;
1005 |   line-height: 1.25rem;
1006 | }
1007 | 
1008 | .text-xs {
1009 |   font-size: 0.75rem;
1010 |   line-height: 1rem;
1011 | }
1012 | 
1013 | .text-xl {
1014 |   font-size: 1.25rem;
1015 |   line-height: 1.75rem;
1016 | }
1017 | 
1018 | .text-2xl {
1019 |   font-size: 1.5rem;
1020 |   line-height: 2rem;
1021 | }
1022 | 
1023 | .text-lg {
1024 |   font-size: 1.125rem;
1025 |   line-height: 1.75rem;
1026 | }
1027 | 
1028 | .font-bold {
1029 |   font-weight: 700;
1030 | }
1031 | 
1032 | .uppercase {
1033 |   text-transform: uppercase;
1034 | }
1035 | 
1036 | .tracking-wider {
1037 |   letter-spacing: 0.05em;
1038 | }
1039 | 
1040 | .tracking-tighter {
1041 |   letter-spacing: -0.05em;
1042 | }
1043 | 
1044 | .text-gega-grey {
1045 |   --tw-text-opacity: 1;
1046 |   color: rgb(221 221 221 / var(--tw-text-opacity));
1047 | }
1048 | 
1049 | .text-transparent {
1050 |   color: transparent;
1051 | }
1052 | 
1053 | .text-gega-melon {
1054 |   --tw-text-opacity: 1;
1055 |   color: rgb(255 211 105 / var(--tw-text-opacity));
1056 | }
1057 | 
1058 | .text-gega-red {
1059 |   --tw-text-opacity: 1;
1060 |   color: rgb(188 26 69 / var(--tw-text-opacity));
1061 | }
1062 | 
1063 | .text-white {
1064 |   --tw-text-opacity: 1;
1065 |   color: rgb(255 255 255 / var(--tw-text-opacity));
1066 | }
1067 | 
1068 | .text-black {
1069 |   --tw-text-opacity: 1;
1070 |   color: rgb(0 0 0 / var(--tw-text-opacity));
1071 | }
1072 | 
1073 | .opacity-0 {
1074 |   opacity: 0;
1075 | }
1076 | 
1077 | .outline-none {
1078 |   outline: 2px solid transparent;
1079 |   outline-offset: 2px;
1080 | }
1081 | 
1082 | .transition {
1083 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1084 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1085 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1086 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1087 |   transition-duration: 150ms;
1088 | }
1089 | 
1090 | .duration-500 {
1091 |   transition-duration: 500ms;
1092 | }
1093 | 
1094 | .duration-1000 {
1095 |   transition-duration: 1000ms;
1096 | }
1097 | 
1098 | .placeholder\:text-xs::-moz-placeholder {
1099 |   font-size: 0.75rem;
1100 |   line-height: 1rem;
1101 | }
1102 | 
1103 | .placeholder\:text-xs::placeholder {
1104 |   font-size: 0.75rem;
1105 |   line-height: 1rem;
1106 | }
1107 | 
1108 | .hover\:bg-rose-600:hover {
1109 |   --tw-bg-opacity: 1;
1110 |   background-color: rgb(225 29 72 / var(--tw-bg-opacity));
1111 | }
1112 | 
1113 | .hover\:text-gega-melon:hover {
1114 |   --tw-text-opacity: 1;
1115 |   color: rgb(255 211 105 / var(--tw-text-opacity));
1116 | }
1117 | 
1118 | .hover\:text-gega-grey:hover {
1119 |   --tw-text-opacity: 1;
1120 |   color: rgb(221 221 221 / var(--tw-text-opacity));
1121 | }
1122 | 
1123 | .hover\:text-gega-red:hover {
1124 |   --tw-text-opacity: 1;
1125 |   color: rgb(188 26 69 / var(--tw-text-opacity));
1126 | }
1127 | 
1128 | .focus\:outline-none:focus {
1129 |   outline: 2px solid transparent;
1130 |   outline-offset: 2px;
1131 | }
1132 | 
1133 | .group:hover .group-hover\:bottom-2 {
1134 |   bottom: 0.5rem;
1135 | }
1136 | 
1137 | .group:hover .group-hover\:ml-0 {
1138 |   margin-left: 0px;
1139 | }
1140 | 
1141 | .group:hover .group-hover\:mb-1 {
1142 |   margin-bottom: 0.25rem;
1143 | }
1144 | 
1145 | .group:hover .group-hover\:mb-2 {
1146 |   margin-bottom: 0.5rem;
1147 | }
1148 | 
1149 | .group:hover .group-hover\:mb-10 {
1150 |   margin-bottom: 2.5rem;
1151 | }
1152 | 
1153 | .group:hover .group-hover\:scale-110 {
1154 |   --tw-scale-x: 1.1;
1155 |   --tw-scale-y: 1.1;
1156 |   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1157 | }
1158 | 
1159 | .group:hover .group-hover\:cursor-pointer {
1160 |   cursor: pointer;
1161 | }
1162 | 
1163 | .group:hover .group-hover\:text-gega-red {
1164 |   --tw-text-opacity: 1;
1165 |   color: rgb(188 26 69 / var(--tw-text-opacity));
1166 | }
1167 | 
1168 | .group:hover .group-hover\:text-gega-melon {
1169 |   --tw-text-opacity: 1;
1170 |   color: rgb(255 211 105 / var(--tw-text-opacity));
1171 | }
1172 | 
1173 | .group:hover .group-hover\:opacity-100 {
1174 |   opacity: 1;
1175 | }
1176 | 
1177 | .group:hover .group-hover\:opacity-50 {
1178 |   opacity: 0.5;
1179 | }
1180 | 
1181 | .dark .dark\:bg-black {
1182 |   --tw-bg-opacity: 1;
1183 |   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1184 | }
1185 | 
1186 | .dark .dark\:text-gega-grey {
1187 |   --tw-text-opacity: 1;
1188 |   color: rgb(221 221 221 / var(--tw-text-opacity));
1189 | }
1190 | 
1191 | @media (min-width: 768px) {
1192 |   .md\:col-span-3 {
1193 |     grid-column: span 3 / span 3;
1194 |   }
1195 | 
1196 |   .md\:block {
1197 |     display: block;
1198 |   }
1199 | 
1200 |   .md\:flex {
1201 |     display: flex;
1202 |   }
1203 | 
1204 |   .md\:hidden {
1205 |     display: none;
1206 |   }
1207 | 
1208 |   .md\:w-full {
1209 |     width: 100%;
1210 |   }
1211 | 
1212 |   .md\:basis-1\/4 {
1213 |     flex-basis: 25%;
1214 |   }
1215 | 
1216 |   .md\:basis-1\/2 {
1217 |     flex-basis: 50%;
1218 |   }
1219 | 
1220 |   .md\:basis-1\/3 {
1221 |     flex-basis: 33.333333%;
1222 |   }
1223 | 
1224 |   .md\:basis-2\/3 {
1225 |     flex-basis: 66.666667%;
1226 |   }
1227 | 
1228 |   .md\:flex-row {
1229 |     flex-direction: row;
1230 |   }
1231 | 
1232 |   .md\:pl-0 {
1233 |     padding-left: 0px;
1234 |   }
1235 | }
1236 | 
1237 | @media (min-width: 1024px) {
1238 |   .lg\:absolute {
1239 |     position: absolute;
1240 |   }
1241 | 
1242 |   .lg\:bottom-0 {
1243 |     bottom: 0px;
1244 |   }
1245 | 
1246 |   .lg\:left-0 {
1247 |     left: 0px;
1248 |   }
1249 | 
1250 |   .lg\:col-span-2 {
1251 |     grid-column: span 2 / span 2;
1252 |   }
1253 | 
1254 |   .lg\:block {
1255 |     display: block;
1256 |   }
1257 | 
1258 |   .lg\:flex {
1259 |     display: flex;
1260 |   }
1261 | 
1262 |   .lg\:hidden {
1263 |     display: none;
1264 |   }
1265 | 
1266 |   .lg\:h-128 {
1267 |     height: 32rem;
1268 |   }
1269 | 
1270 |   .lg\:h-4 {
1271 |     height: 1rem;
1272 |   }
1273 | 
1274 |   .lg\:h-full {
1275 |     height: 100%;
1276 |   }
1277 | 
1278 |   .lg\:w-44 {
1279 |     width: 11rem;
1280 |   }
1281 | 
1282 |   .lg\:w-2\/3 {
1283 |     width: 66.666667%;
1284 |   }
1285 | 
1286 |   .lg\:w-4 {
1287 |     width: 1rem;
1288 |   }
1289 | 
1290 |   .lg\:basis-1\/3 {
1291 |     flex-basis: 33.333333%;
1292 |   }
1293 | 
1294 |   .lg\:basis-1\/2 {
1295 |     flex-basis: 50%;
1296 |   }
1297 | 
1298 |   .lg\:flex-row {
1299 |     flex-direction: row;
1300 |   }
1301 | 
1302 |   .lg\:flex-col {
1303 |     flex-direction: column;
1304 |   }
1305 | 
1306 |   .lg\:flex-nowrap {
1307 |     flex-wrap: nowrap;
1308 |   }
1309 | 
1310 |   .lg\:justify-between {
1311 |     justify-content: space-between;
1312 |   }
1313 | 
1314 |   .lg\:space-x-16 > :not([hidden]) ~ :not([hidden]) {
1315 |     --tw-space-x-reverse: 0;
1316 |     margin-right: calc(4rem * var(--tw-space-x-reverse));
1317 |     margin-left: calc(4rem * calc(1 - var(--tw-space-x-reverse)));
1318 |   }
1319 | 
1320 |   .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
1321 |     --tw-space-x-reverse: 0;
1322 |     margin-right: calc(2rem * var(--tw-space-x-reverse));
1323 |     margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
1324 |   }
1325 | 
1326 |   .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
1327 |     --tw-space-y-reverse: 0;
1328 |     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
1329 |     margin-bottom: calc(0px * var(--tw-space-y-reverse));
1330 |   }
1331 | 
1332 |   .lg\:py-12 {
1333 |     padding-top: 3rem;
1334 |     padding-bottom: 3rem;
1335 |   }
1336 | 
1337 |   .lg\:px-0 {
1338 |     padding-left: 0px;
1339 |     padding-right: 0px;
1340 |   }
1341 | 
1342 |   .lg\:pl-0 {
1343 |     padding-left: 0px;
1344 |   }
1345 | 
1346 |   .lg\:pb-16 {
1347 |     padding-bottom: 4rem;
1348 |   }
1349 | 
1350 |   .lg\:text-6xl {
1351 |     font-size: 3.75rem;
1352 |     line-height: 1;
1353 |   }
1354 | 
1355 |   .lg\:text-lg {
1356 |     font-size: 1.125rem;
1357 |     line-height: 1.75rem;
1358 |   }
1359 | 
1360 |   .lg\:text-base {
1361 |     font-size: 1rem;
1362 |     line-height: 1.5rem;
1363 |   }
1364 | 
1365 |   .lg\:text-3xl {
1366 |     font-size: 1.875rem;
1367 |     line-height: 2.25rem;
1368 |   }
1369 | 
1370 |   .group:hover .lg\:group-hover\:mb-20 {
1371 |     margin-bottom: 5rem;
1372 |   }
1373 | }


--------------------------------------------------------------------------------