/* Import the Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
background-color: #F53150;
color: #ffffff;
}
/* Apply global styles */
body {
    /* Set Roboto bold as the font */
    font-family: 'Roboto', sans-serif;
    font-weight: 700;

    /* Set the font color to white */
    color: white;

    /* Set the background image */
    background-image: url('img/CCMBackground.png');

    /* Ensure the background image covers the entire viewport */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    /* Ensure the background image scales with the window size */
    background-attachment: fixed;
    overflow-x: hidden;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 100px; /* Adjust this value as necessary to move the content down and avoid overlapping with the logo */
}


#logo img {
    width: 200px;
    height: auto;
  user-select: none; /* Disable text selection */
  pointer-events: auto; /* Enable mouse events for clicking */
}
/* Logo positioning */
#logo {
    position: absolute;
    top: 10px;  /* adjust as needed for spacing from the top */
    left: 10px; /* adjust as needed for spacing from the left */
    z-index: 1000; /* ensures the logo is above other elements */
}

/* Centering tables */
body {
    align-items: center;
    flex-wrap: wrap; /* allows items to wrap onto the next line if there isn't enough space */
}

table {
    margin: 20px 0; /* provides spacing between tables */
    border-collapse: collapse; /* collapses table borders for a cleaner look */
}
table {
    margin: 0; /* Overwrite the earlier margin setting for tables */
}

a {
    text-decoration: none;
    display: inline-block; /* makes the anchor a block-level element but inline */
    padding: 5px; /* provides padding around the icon */
    line-height: 1; /* ensures there's no extra vertical space around the icon */
}

a i.fas.fa-link {
    color: #F53150;
    padding: 5px; /* sets padding around the icon */
    display: inline-block; /* allows padding to take effect around the icon */
}


.page-title {
    font-size: 2em;  /* adjust as needed for desired size */
    text-transform: uppercase;
    margin-bottom: 20px;  /* adds some space below the title */
    letter-spacing: 1.5px; /* increases spacing between letters for better readability */
  user-select: none; /* Disable text selection */
  pointer-events: auto; /* Enable mouse events for clicking */
}




.equipment-photo {
    width: 500px;
    height: auto; /* maintains aspect ratio */
    display: block; /* makes it a block element so it can be centered using auto margins */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px; /* adds some space below the image */
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* horizontal offset, vertical offset, blur radius, shadow color */
  user-select: none; /* Disable text selection */
  pointer-events: auto; /* Enable mouse events for clicking */
}
/* Media Query for smaller screens */
@media (max-width: 800px) {
    .equipment-photo {
        width: 100%; /* this will make the image scale responsively on smaller screens */
        max-width: 500px; /* ensures the image doesn't grow beyond 500px */
    }
}

/* Table styling */
table {
    border-color: rgba(144, 144, 144, 0.25);
    border-style: solid;
    border-width: 0 1px 1px 1px; /* 0 for top, 1px for right, bottom, and left */
    padding: 0.75rem;
    width: 100%; /* ensures the table takes up full available width */
    max-width: 672px; /* sets the maximum width for the tables */
    margin: 0 auto;   /* centers the table with auto margins */
}
    min-width: 250px; /* ensures each table is at least 250px wide */
    box-sizing: border-box; /* ensures padding and borders are included in the total width */
}

/* Alternating row coloring */
table tr:nth-child(odd) { /* odd rows */
    background-color: #2a2a2a; /* dark grey */
}

table tr:nth-child(even) { /* even rows */
    background-color: #3d3d3d; /* slightly lighter grey */
}
table td {

    padding: 5px; /* adjusts padding inside table cells */
}
/* Table cell dimensions */
table td, table th {
    min-height: 65px;
    max-height: 105px;
    box-sizing: border-box; /* ensures padding and borders are included in the total height */
    color: #888; /* slight grey */
    font-weight: 300; /* lighter weight, assuming Roboto font is used */
}

/* Set a specific width for the link icon column and center the content */
table td:last-child, table th:last-child {
    width: 30px;  /* Adjust as needed based on icon size and desired padding */
    text-align: center;
}
.table-title {
    margin-bottom: 15px;

}


.table-container {
    max-width: 672px;
    width: 100%;
    flex: 1; /* allows tables to grow and take up available space */
    margin: 0 10px; /* provides some horizontal spacing between tables */
margin-top: 20px;
}
.table-container {
    display: flex;           /* Make this a flex container */
    flex-direction: column;  /* Stack its children vertically */
    align-items: flex-start; /* Align children to the start (left) */
    justify-content: flex-start; /* Align children to the top */
}

.tables-container {
    display: flex;
    justify-content: space-between; 
    flex-wrap: wrap; 
    flex-direction: column;
    align-items: center;
    align-content: flex-start; /* This will align the top edges of the children */
    width: 100%;
    max-width: 100%;
}

/* Media Query for smaller viewports */
@media (max-width: 800px) {  /* adjust 800px based on when you want to stack tables */
    .tables-container {
        flex-direction: column; /* stacks the tables */
    }
}
@media (max-width: 800px) {
    .table-container {
        margin-bottom: 30px; /* Adjust the value to your preference */
    }
}

/* On larger screens, display the tables side by side */
@media (min-width: 801px) {
    .tables-container {
        flex-direction: row;
        justify-content: center;
        gap: 20px; /* spacing between tables */
    }
}


.tables-container > .table-container {
    align-self: flex-start;
}


/* Add this CSS to control the layout of the peripherals table */
.peripherals-container {
    max-width: 672px;
    width: 100%;
    margin: 0 auto; /* Center the table horizontally */
    margin-top: 20px; /* Add space between the previous tables and peripherals table */
}

/* Media Query for smaller viewports */
@media (max-width: 800px) {
    .tables-container,
    .peripherals-container {
        flex-direction: column; /* Stack the tables and peripherals on smaller screens */
    }
}


/* Add a margin-bottom to the Monitors table */
.monitors-container {
    margin-bottom: 20px; /* You can adjust the value as needed for the desired gap size */
    
}


/* Toggle Button Container */
.toggle-container {
    position: absolute;
    top: 70px;  /* Adjust as needed for spacing from the logo */
    left: 10px; /* Same horizontal position as the logo */
    z-index: 1001; /* Ensure it's above other elements */
  user-select: none; /* Disable text selection */
  pointer-events: auto; /* Enable mouse events for clicking */
}

/* Toggle Checkbox - Hidden */
.toggle-checkbox {
    display: none;
}

/* Default toggle button styling */
.toggle-label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid rgba(144, 144, 144, 0.25);
    border-radius: 15px;
    transition: background-color 0.3s, color 0.3s;
}

/* Text inside the toggle */
.toggle-text {
    color: #888; /* Slight grey text color */
    transition: color 0.3s;  /* Smooth transition for hover effects */
}

/* Hover effect for the toggle button */
.toggle-label:hover {
    background-color: #F53150; /* Same color as the link icons */
}

.toggle-label:hover .toggle-text,
.toggle-label:hover .toggle-divider {
    color: white; /* White text color on hover */
}

/* Default active state */
.toggle-checkbox:not(:checked) + .toggle-label .toggle-text:first-child {
    color: white;
}

.toggle-checkbox:checked + .toggle-label .toggle-text:last-child {
    color: white;
}

.toggle-checkbox:checked + .toggle-label .toggle-text:first-child {
    color: #888;
}

/* Styling for the divider | */
.toggle-divider {
    margin: 0 10px; /* Add space on both sides of the | */
    color: #888; /* Slight grey text color */
    transition: color 0.3s;  /* Smooth transition for hover effects */
}







footer {
    font-size: 14px;
    color: #888;
    padding: 200px 0 10px; /* 200px top padding, 0 right/left padding, 10px bottom padding */
    text-align: center;
    max-width: 400px; /* Limit the width of the footer */
    margin: 0 auto; /* Center the footer horizontally */
}






/* Add this to your existing CSS */

.menu-button {
  position: absolute;
  top: 50px;
  right: 20px;
  z-index: 10;
  cursor: pointer;
  user-select: none; /* Disable text selection */
  pointer-events: auto; /* Enable mouse events for clicking */
}

.menu-button i {
  font-size: 24px;
  color: #ffffff;
}

.menu-content {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.7));
  padding: 20px;
  border-radius: 5px;
  transform-origin: top right;
  transform: scaleY(0);
  transition: transform 0.3s ease-in-out;
  text-transform: capitalize;
  user-select: none; /* Disable text selection */
  pointer-events: auto; /* Enable mouse events for clicking */
}

.menu-button.active .menu-content {
  display: block;
  transform: scaleY(1);
}

.menu-button.active i {
  transform: rotate(90deg);
}
.menu-content a:hover {
  opacity: 0.8;
}


.menu-content a {
  display: block;
  color: #ffffff;
  text-decoration: none; /* Remove underlines */
  font-size: 18px;
  margin-bottom: 10px;
}