style.css

/* Custom Stylesheet - GRID Conversion */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

/* -------------------------------------------------- */
/* General                                            */
/* -------------------------------------------------- */

html {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    cursor: url("https://rc24.xyz/images/cursors/wii.cur"), default;
    color: #c0c0c0;
}

body {
    color: #000;
    font-size: 16px; /* Adjust base font size for mobile */
    line-height: 1.6; /* Improve line spacing for readability */
}

p {
    line-height: 1.6rem;
}

a {
    color: #00b0f4;
    cursor: url("https://rc24.xyz/images/cursors/wii-hover.cur"), pointer;
    text-decoration: none; /* Ensure links are styled consistently */
}

/* -------------------------------------------------- */
/* Typography                                         */
/* -------------------------------------------------- */

h1 {
    font-size: 1.5em; /* Adjust heading size for mobile */
    text-align: center; /* Center headings */
}

.header {
    color: #2196F3;
}

.light {
    color: #000;
    /* yes I know this ain't white */
}

.actually-red {
    color: #ea454b;
}

/* -------------------------------------------------- */
/* Layout                                             */
/* -------------------------------------------------- */

.header-content,
.main-headshot,
.intro-section,
.project-section,
.main-footer {
    text-align: center;
    padding: 20px;
}

.intro-section,
.project-section {
    max-width: 95%; /* Prevent content from stretching too wide on mobile */
    margin: 0 auto; /* Center the content on mobile */
    padding: 15px; /* Adjust padding for mobile */
    margin-bottom: 20px; /* Add margin between sections */
}

.main-headshot img {
    max-width: 100%; /* Scale images to fit container */
    height: auto;
}

.fixed-bottom-right {
    position: fixed;
    bottom: 30px;
    right: 50px;
    width: 80px;
    height: 80px;
    z-index: 1000;
    opacity: 0.25;
}

/* -------------------------------------------------- */
/* Navigation                                         */
/* -------------------------------------------------- */

.navbar {
    background-color: #222;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 10px 20px;
}

.navbar-brand {
    grid-column: 1;
}

.navbar-brand a {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
}

.navbar-toggler {
    background: transparent;
    border: none;
    cursor: pointer;
    display: none; /* Hidden by default on larger screens */
    grid-column: 3;
}

.navbar-toggler-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
}

.navbar-menu {
    grid-column: 2;
    display: grid;
    justify-content: flex-end;
}

.navbar-nav {
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: white;
    padding: 5px 10px;
    display: block;
}

.nav-link.active {
    font-weight: bold;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    list-style: none;
    position: absolute;
    background-color: #333;
    padding: 10px;
    border-radius: 5px;
    display: none;
    top: 100%;
    left: 0;
    width: 150px;
}

.dropdown:hover .dropdown-menu,
.dropdown-menu.show {
    display: block;
}

.dropdown-menu li {
    margin-bottom: 5px;
}

/* -------------------------------------------------- */
/* Project Sections                                   */
/* -------------------------------------------------- */

.tcse-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url(resources/tcse-background.png);
    background-size: contain;
    background-repeat: no-repeat;
    color: white;
    background-position: center;
}

.ra-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url(resources/ra-background.png);
    background-size: contain;
    background-repeat: no-repeat;
    color: white;
    background-position: center;
}

.krs-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url(resources/krs-background.png);
    background-size: contain;
    background-repeat: no-repeat;
    color: white;
    background-position: center;
}

.photography-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url(resources/photography-bkg.png);
    background-size: contain;
    background-repeat: no-repeat;
    color: white;
    background-position: center;
}

/* -------------------------------------------------- */
/* Footer                                             */
/* -------------------------------------------------- */

.main-footer {
    padding: 10px;
    text-align: center; /* Center footer links */
}

.page-footer {
    margin: 0;
}

.page-footer a {
    color: #fff;
}

/* -------------------------------------------------- */
/* Timeline                                           */
/* -------------------------------------------------- */

.timeline {
    display: grid;
    grid-template-columns: 1fr; /* Single column for mobile */
}

.timeline .timeline-event {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
}

.timeline .timeline-event .timeline-content {
    width: calc(100% - 50px); /* Adjust content width for mobile */
    margin-left: 50px; /* Adjust margin to align content for mobile */
}

.timeline .timeline-event::before,
.timeline .timeline-event::after {
    content: "";
    position: absolute;
    left: 14px; /* Adjust line position for mobile */
    background: #d2d2d2;
}

.timeline .timeline-event::before {
    top: 0;
    height: calc(50% - 20px);
    width: 2px;
}

.timeline .timeline-event::after {
    top: calc(50% + 20px);
    height: calc(50% - 20px);
    width: 2px;
}

.timeline .timeline-event:first-child::before,
.timeline .timeline-event:last-child::after {
    display: none;
}

.timeline .timeline-badge {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #d2d2d2;
    top: calc(50% - 8px);
    left: 7px; /* Adjust badge position for mobile */
    border-radius: 50%;
    text-align: center;
    cursor: default;
}

.timeline .timeline-badge i {
    font-size: 25px;
    line-height: 40px;
}

@media (min-width: 601px) {
    .timeline {
        grid-template-columns: 1fr;
    }

    .timeline .timeline-event .timeline-content {
        width: calc(50% - 50px);
    }

    .timeline .timeline-event::before,
    .timeline .timeline-event::after {
        left: calc(50% - 1px);
    }

    .timeline .timeline-event:nth-child(even) .timeline-content {
        margin-left: calc(50% + 50px);
    }

    .timeline .timeline-event:nth-child(odd) .timeline-content {
        margin-left: 0;
    }

    .timeline .timeline-badge {
        right: calc(50% - 8px);
    }
}

/* -------------------------------------------------- */
/* Cards                                              */
/* -------------------------------------------------- */

.card-title {
    line-height: 1em;
}

.card-title.gradient {
    display: block;
    position: absolute;
    bottom: 0px;
    padding-bottom: 64px;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(125, 185, 232, 0) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.8) 100%
    );
}

/* -------------------------------------------------- */
/* Responsive                                         */
/* -------------------------------------------------- */

@media (max-width: 768px) {
    .navbar {
        grid-template-columns: auto 1fr;
    }

    .navbar-toggler {
        display: block; /* Show on smaller screens */
    }

    .navbar-menu {
        display: none;
        grid-column: 1 / 3;
        width: 100%;
        margin-top: 10px;
    }

    .navbar-menu.show {
        display: block;
    }

    .navbar-nav {
        grid-auto-flow: row;
        align-items: flex-start;
    }

    .nav-item {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .nav-link {
        padding: 10px 15px; /* Increase padding for touch */
    }

    .dropdown-menu {
        position: static;
        display: none;
        width: 100%;
        padding-left: 20px;
    }

    .dropdown:hover .dropdown-menu,
    .dropdown-menu.show {
        display: none;
    }

    .dropdown.show .dropdown-menu {
        display: block;
    }

    .responsive-cat {
        max-width: 75%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media (prefers-color-scheme: dark) {
    html {
        background: #1c1c1c;
    }

    body {
        color: #fff;
    }

    .light {
        color: #fff;
    }

    .header {
        color: #fff;
    }

    .collection .collection-item {
        background-color: #222;
        border-bottom: 1px solid #e0e0e0;
    }

    .collection.with-header .collection-header {
        background-color: #222;
        border-bottom: 1px solid #e0e0e0;
    }

    .card {
        background-color: #222;
    }
}

@media only screen and (max-width: 992px) {
    .parallax-container .section {
        top: 40%;
    }

    #index-banner .section {
        top: 10%;
    }
}

@media only screen and (max-width: 600px) {
    #index-banner .section {
        top: 0;
    }
}

/* -------------------------------------------------- */
/* Unused / Materialize Leftovers */
/* -------------------------------------------------- */

.collection {
    background: #222; /* Potentially unused */
}

.button-collapse {
    color: #26a69a; /* Potentially unused */
}

.parallax-container {
    min-height: 900px !important; /* Potentially unused */
    color: rgba(0, 0, 0, 0.9); /* Potentially unused */
}

.parallax-container.small-parallax-container {
    min-height: 0; /* Potentially unused */
}

.parallax-container .section {
    width: 100%; /* Potentially unused */
}

.icon-block {
    padding: 0 15px; /* Potentially unused */
}

.icon-block .material-icons {
    font-size: inherit; /* Potentially unused */
}

.full-height {
    min-height: 100%; /* Potentially unused */
    min-height: 100vh; /* Potentially unused */
}

.herohead {
    display: none; /* Potentially unused */
}

/* RiiConnect24 */
.dropdown-content {
    z-index: 1000; /* Potentially specific to another part of the site */
}

.spin {
    -webkit-animation: spin 1s linear infinite; /* Potentially unused */
    -moz-animation: spin 1s linear infinite; /* Potentially unused */
    animation: spin 1s linear infinite; /* Potentially unused */
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg); /* Potentially unused */
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg); /* Potentially unused */
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg); /* Potentially unused */
        transform: rotate(360deg); /* Potentially unused */
    }
}

/* Default styles for the cat image */
.responsive-cat {
    max-width: 100%;
    height: auto;
}