From 720d752748b793a2f5cf3cc14cb75ad86e8919c0 Mon Sep 17 00:00:00 2001
From: sillylaird <sillylaird@fastmail.ca>
Date: Tue, 3 Feb 2026 21:27:57 -0500
Subject: First commit

---
 style.css | 282 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 282 insertions(+)
 create mode 100644 style.css

(limited to 'style.css')

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6fb6edc
--- /dev/null
+++ b/style.css
@@ -0,0 +1,282 @@
+/* Base Styles for Desktop View */
+
+
+
+.button1 {
+    background-color: black;
+    font-family: Comic Sans MS;
+    font-weight: 300;
+}
+
+h1 {
+    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
+    font-size: 1.875rem; /* 30px / 16px (base font size) */
+    padding-left: 40px;
+}
+
+pre {
+    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
+    font-size: 12px;
+    padding-left: 40px;
+}
+
+nav {
+    text-align: left;
+    float: left;
+    width: 30%;
+    padding: 20px;
+}
+/* Consider using flexbox for navigation for better alignment */
+nav a {
+    display: inline-block; /* Keep the anchor as a block or inline-block for better alignment */
+}
+
+article {
+    float: left;
+    padding: 20px;
+    width: 70%;
+}
+
+body {
+    background-color: #ffd;
+    margin: 0; /* Remove default margin */
+}
+/* Consider using viewport units for more responsive sizing */
+iframe {
+    display: block; /* iframes are inline by default */
+    height: 100vh; /* Set height to 100% of the viewport height */
+    width: 100vw; /* Set width to 100% of the viewport width */
+    border: none; /* Remove default border */
+    background: #ffd; /* Just for styling */
+}
+/* Use a more descriptive ID or consider a class */
+#design-cast {
+    position: relative;
+    overflow: hidden;
+}
+
+.member {
+    float: left;
+    width: calc(20% - 2%); /* Adjust width to account for margins */
+    margin: 1% 1% 45px 1%;
+}
+
+.name {
+    bottom: 0px;
+}
+
+.member img {
+    width: 50%;
+    display: block;
+}
+
+ul.flowxl {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+}
+
+ul.flowxl > li {
+    list-style-type: none;
+    text-align: center;
+    width: var(--xiconsize);
+    min-width: var(--xiconsize);
+    max-width: var(--xiconsize);
+    max-height: calc(var(--xiconsize) + 60px);
+    padding: 2px;
+    margin: 0.125rem; /* Use rem for margin */
+    overflow: hidden;
+    font-size: 1rem;
+    line-height: 1;
+}
+
+ul.flowxl > li > a {
+    display: block;
+    /* vertical-align: middle;  This property is not applicable to block-level elements.  It only affects inline or inline-block elements. */
+    line-height: 1;
+    font-size: 1.2rem;
+}
+
+ul.flowxl li > a > img,
+ul.flowxl li > img {
+    display: block;
+    border-radius: 9px;
+    width: auto;
+    max-width: var(--xiconsize);
+    max-height: var(--xiconsize);
+    overflow: hidden;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+ul.flowxl li > a > img[src$=".svg"] {
+    max-width: 170px;
+    max-height: 170px;
+}
+
+table {
+    overflow: auto;
+}
+
+p, a, li, figcaption, div, span {
+    overflow-wrap: anywhere;
+}
+
+.content {
+    margin-left: 0; /* Ensure no extra margin is added */
+}
+/* Consider using a more semantic element like <aside> */
+/* Styling for the sidebar */
+.sidebar {
+    position: fixed; /* Keeps it fixed on all devices */
+    right: 0; /* Align it on the right */
+    top: 0; /* Start from the top */
+    width: 300px; /* Fixed width for larger devices */
+    height: 100%; /* Full height of the screen */
+    background-color: #ffd; /* Background color */
+    border-left: 1px solid #ccc; /* Separate it from the content */
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
+    overflow-y: auto; /* Allow scrolling for long content */
+    z-index: 1000; /* Higher than other elements */
+    display: none; /* Hidden by default */
+    padding: 15px;
+    scroll-behavior: smooth;
+}
+/* Consider using focus styles for accessibility */
+
+.sidebar :link,
+.sidebar :visited {
+    color: #8B8A64;
+    text-decoration: none;
+    border-bottom: 1px dotted;
+}
+
+/* Ensure links are easy to click */
+.sidebar a {
+    display: block;
+    margin: 0.3125rem 0; /* Use rem */
+    font-size: 16px; /* Slightly larger font size */
+}
+
+/* Menu toggle button */
+#menu-toggle {
+    position: fixed; /* It stays on the screen while scrolling */
+    top: 20px; /* 20px from the top */
+    right: 20px; /* 20px from the right */
+    background-color: #ffd; /* Button background */
+    color: black; /* Text color */
+    border: 1px solid #ccc; /* Border for the button */
+    padding: 10px 15px; /* Spacing for button content */
+    cursor: pointer; /* Pointer cursor on hover */
+    font-family: inherit; /* Consistent font */
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Shadow for aesthetics */
+    z-index: 1001; /* Slightly above sidebar */
+}
+/* Use more modern hover styles */
+/* Menu button hover effect */
+#menu-toggle:hover {
+    background-color: #ffd;
+}
+
+/* Responsive Sidebar Styling */
+@media (max-width: 768px) {
+    .sidebar {
+        position: fixed; /* Makes it fixed to the viewport */
+        bottom: 0; /* Position it at the bottom */
+        right: 0; /* Align it to the right */
+        width: 250px; /* Set a consistent width */
+        max-height: 50%; /* Limit the height to not cover too much screen space */
+        overflow-y: auto; /* Enable scrolling if content overflows */
+        background-color: #ffd; /* Set a translucent background */
+        border: 1px solid #ccc; /* Add a border for clarity */
+        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Add a shadow for hover effect */
+        z-index: 1000; /* Ensure it hovers over other elements */
+        padding: 15px;
+    }
+
+    .sidebar.active {
+        display: block; /* Allow display when active */
+    }
+
+    #menu-toggle {
+        top: 10px; /* Less padding on top for mobile */
+        right: 10px; /* Align closer to the edge */
+        padding: 8px 12px; /* Smaller button padding */
+    }
+
+    /* Consider using a container for content and sidebar for better layout control */
+    /* General layout adjustments for smaller screens */
+    body { /* Apply styles to a more specific container if possible */
+        font-size: 14px; /* Adjust font size globally for readability */
+    }
+}
+
+/* Force the lain.png image always on the far left */
+
+
+
+/* Mobile Styles */
+@media screen and (max-width: 768px) {
+    /* Adjust logo for smaller screens */
+    .logo {
+        position: static; /* Make it flow naturally */
+        width: 80px; /* Resize for mobile */
+        margin: 0 auto;
+        display: block;
+    }
+} /* Base styles for desktop */
+
+
+/* Responsive design for mobile (media query for screens smaller than 768px) */
+@media screen and (max-width: 768px) {
+    .contact-section {
+        margin: 0;            /* Remove margin for smaller screens */
+        text-align: center;   /* Center-align content for better readability on mobile */
+        max-width: 100%;      /* Take up the full width of the screen */
+    }
+
+    .logo {
+        position: static;     /* Allow the image to flow naturally in the layout */
+        width: 100px;         /* Resize image for smaller devices */
+        height: auto;         /* Keep proportional scaling */
+    } /* Removed extra closing bracket */
+}
+
+.country-img {
+    height: 12.5rem; /* Use rem units for height */
+    width: 250px; /* Desired width */
+    object-fit: contain; /* Scales image to fit within the box while maintaining aspect ratio */
+    max-width: 100%; /* Ensures responsiveness */
+}
+
+.countries {
+    flex-wrap: wrap; /* Ensures images wrap if they exceed container width */
+    gap: 10px; /* Adds spacing between images */
+    justify-content: center; /* Centers the images horizontally */ /* Added a comment to explain the purpose */
+}
+
+.vpn-logo {
+    width: 200px; /* Set max-width for scaling */
+    max-width: 100%; /* Responsive width */
+    height: auto; /* Maintain aspect ratio */
+    object-fit: contain; /* Handle scaling gracefully */
+}
+
+.toesu-logo {
+    width: 200px; /* Set the default width */
+    max-width: 100%; /* Ensure image scales on smaller screens */
+    height: auto; /* Maintain original aspect ratio */
+    object-fit: contain; /* Gracefully handle image scaling */
+}
+
+.container {
+    display: flex; /* Arrange items side by side */
+    align-items: flex-start; /* Align items to the top */
+}
+
+.item {
+    display: flex; /* Enable flex layout per item */
+    flex-direction: column; /* Stack text on top of the image */
+}
+/* Consider using a CSS reset or normalization library */
+@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');
\ No newline at end of file
-- 
cgit v1.2.3