added CornTV

corntv/styles.css

@@ -0,0 +1,144 @@
+html, body {
+    font-family: 'Orbitron', sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #333;
+    text-align: center;
+    color: white;
+    overflow-x: hidden; /* Prevent horizontal scrolling */
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: 1.25em;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.875em;
+    width: 100%; /* Ensure header takes full width */
+    padding: 0 1em; /* Add horizontal padding */
+}
+
+.logo-container {
+    width: 80%;
+    max-width: 44em;
+    display: flex;
+    justify-content: center; /* Center logo inside the container */
+    margin: 0 auto; /* Center container itself */
+}
+
+.mainlogo, .sublogo {
+    max-width: 100%; /* Scale down if necessary */
+    height: auto;
+}
+
+h1 {
+    font-size: 2em;
+    margin-top: 1em;
+    margin-bottom: 0.1em;
+}
+
+h2 {
+    font-size: 1.6em;
+    margin-top: 1em;
+    margin-bottom: 0.1em;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2em;
+    justify-content: center;
+}
+
+.app-icon-link {
+    text-decoration: none;
+}
+
+.app-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.875em; /* 30px / 16px = 1.875em */
+    border-radius: 0.9375em; /* 15px / 16px = 0.9375em */
+    transition: transform 0.3s;
+    width: 15em; /* 250px / 16px = 15.625em */
+    height: 15em; /* 250px / 16px = 15.625em */
+    color: white;
+}
+
+.app-icon img {
+    width: 6.25em; /* 100px / 16px = 6.25em */
+    height: 6.25em; /* 100px / 16px = 6.25em */
+}
+
+.app-icon p {
+    margin-top: 1.25em; /* 20px / 16px = 1.25em */
+    font-size: 1.5em;
+}
+
+.app-icon:hover {
+    transform: scale(1.1);
+}
+
+.app-icon.red {
+    background: linear-gradient(145deg, #f25555, #c91e1e);
+}
+
+.app-icon.orange {
+    background: linear-gradient(145deg, #f2b06f, #fc771e);
+}
+
+.app-icon.blue {
+    background: linear-gradient(145deg, #1a94b8, #2c67f2);
+}
+
+.app-icon.green {
+    background: linear-gradient(145deg, #74D680, #378B29);
+}
+
+.app-icon.yellow {
+    background: linear-gradient(145deg, #fcf06c, #fcea2a);
+    color: black;
+}
+
+.app-icon.purple {
+    background: linear-gradient(145deg, #c29ae0, #8459a5);
+}
+
+.app-icon.contact {
+    background: linear-gradient(145deg, #ffffff, #dbdbdb);
+    color: black;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .logo-container {
+        width: 90%;
+    }
+
+    .mainlogo, .sublogo {
+        max-width: 90%; /* Scale down logo */
+    }
+}
+
+@media (max-width: 480px) {
+    .logo-container {
+        width: 95%;
+    }
+
+    .mainlogo, .sublogo {
+        max-width: 80%; /* Scale down more for smaller screens */
+    }
+}