First commit

1 files changed, 282 insertions, 0 deletions

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