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

/* Import for Open Sans font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

/* Variables used in the project */
:root {
    --color-accent: rgb(252, 227, 159);
    --color-neutral-mid: rgb(219, 219, 219);
    --color-neutral-light: white;
    --color-neutral-dark: rgb(70, 70, 70);
    --color-bg: black;
    --num-button-width: 15em;
    --num-button-margin: 0.2em;
}

/* Tells the browser to account for any border and padding in 
 * the values specified for an element's width and height
 */
* {
    box-sizing: border-box;
}

/* Hides whitespace around the header and sets default fonts */
body {
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    background-image: url('../assets/bg.png');
}

/* Header (overflow controls scrollbars) */
header {
    overflow: hidden;
    font-family: 'Poppins', 'Open Sans', Arial, Helvetica, sans-serif;
    background-color: var(--color-bg);
    padding: 0.5em;
}

/* Links in the header */
.header-link {
    float: left;
    text-align: center;
    color: var(--color-neutral-light);
    text-decoration: none;
    padding: 1em 3em;
}

/* When the list item is hovered over */
.header-link:hover {
    background-color: var(--color-accent);
    color: black;
}

/* When the screen is smaller, these properties take place */
@media (max-width: 40em) {
    .header-link {
        float: none;
        display: block;
    }
}

/* Sections */
section {
    background-color: var(--color-bg);
    color: var(--color-neutral-light);
    padding: 2em 2em;
    margin: 3em 0em;
}

/* Properties for all H1-H6 tags on the website */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Open Sans', Arial, Helvetica, sans-serif;
}

/* Paragraphs */
p {
    color: var(--color-neutral-mid);
}

/* All text that is needed to be centered is centered */
.text-center {
    text-align: center;
}

/* Text that is not exactly needed to be super-centered is left-aligned but in the center. */
.text-center-left-align {
    margin: 0 auto;
    text-align: left;
}

/* Adds a border to the table on the design page */
.design-table, .design {
    border: 2em solid var(--color-bg);
}

/* Properties for the table of designs */
.design-table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

/* Properties for each image in the table on the design page */
.design-table-img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* When the design table image is hovered over */
.design-table-img:hover {
    opacity: 0.7;
}

/* Style for the full resolution images on each of their pages */
.full-res-img {
    display: block;
    max-width: 100%;
    max-height: 40em;
    margin-left: auto;
    margin-right: auto;
}

/* Style for GIFS on the GitHub page */
.software-gif {
    margin-bottom: 2em;
}

/* Style for the back button */
.back-button {
    background-color: var(--color-accent);
    border: none;
    padding: 1em 2em;
    text-decoration: none;
    color: black;
    font-size: 1.2em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

/* When the back button is hovered over */
.back-button:hover {
    opacity: 0.7;
    cursor: pointer;
}

/* Custom color for the Arduino button */
.arduino-button {
    background-color: #4fccf3;
    width: var(--num-button-width);
    margin: var(--num-button-margin);
}

/* Custom color for the Raspberry Pi button */
.raspberrypi-button {
    background-color: #c7053d;
    width: var(--num-button-width);
    margin: var(--num-button-margin);
}

/* Custom color for the GitHub button */
.github-button {
    background-color: #FFFFFF;
    width: var(--num-button-width);
    margin: var(--num-button-margin);
}

/* Custom color for menu and selection buttons */
.selection-button {
    background-color: #b5b5b5;
    width: var(--num-button-width);
    margin: var(--num-button-margin);
}

/* Center a button by adding this class to the div */
.center-button {
    text-align: center;
}

/* Style for hyperlinks in the design pages */
.design-hyperlink {
    text-decoration: none;
    color: var(--color-accent);
}

/* When one of those design hyperlinks is hovered over */
.design-hyperlink:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* After visiting the link */
.design-hyperlink:visited {
    text-decoration: none;
    color: var(--color-accent);
}

/* Style for all videos */
video {
    width: 100%;
    max-width: 1000px;
    height: auto;
}

/* Style for Arduino diagrams */
.arduino-diagram {
    margin-top: 2em;
    margin-bottom: 2em;
}

/* Style for the code snippets  */
.code-snippet {
    margin-top: 3em;
    margin-bottom: 3em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    background: #2d2d2d; /* matches PrismJS theme */
    border-radius: 0.7em;
    padding: 1.2em 1.5em;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

/* For smooth scrolling throughout the website when buttons are clicked */
html {
    scroll-behavior: smooth;
}

/* Style for the "Back to Top" button */
#top-button {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 1em; /* Place the button at the bottom of the page */
    right: 2em; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--color-neutral-dark); /* Set a background color */
    color: var(--color-neutral-light); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 0.7em 1.5em; /* Some padding */
    font-size: 1em; /* Increase font size */
}

/* Spacing for SVGs */
svg {
    margin-top: 1em;
    padding-left: 2vw;
    padding-right: 2vw;
}

/* Style for hovering over SVGs */
svg:hover {
    opacity: 70%;
}

/* Hides text decoration for hyperlinks */
a {
    text-decoration: none;
}

/* Makes it so that the description is not very wide and hard to read */
.center-description {
    max-width: 50em;
    margin: 0 auto;
}

/* Adds margin below text */
.margin-below {
    margin-bottom: 1.5em;
}

/* Adds margin above text */
.margin-above {
    margin-top: 1.5em;
}

/* Style for the overall grid */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2em;
    background-color: var(--color-bg);
    padding: 10px;
}

/* Style for each grid item */
.grid-item {
    background-color: var(--color-bg);
    border: 1px solid var(--color-neutral-light);
    border-radius: 0.2em;
    margin: 1em;
    padding: 20px;
    font-size: 1em;
    text-align: center;
    transition: transform 0.3s, background-color 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-item img.full-res-img {
    max-width: 100%;
    width: 100%;
    max-height: 220px;
    height: 220px;
    object-fit: cover;
    margin-top: 1.5em;
}

/* Change each grid item when hovered over */
.grid-item:hover {
    border-color: var(--color-accent);
    transform: translate(0, -5px);
}

/* Change aspects of each project box when it is hovered over */
.grid-item:hover .center-description {
    /* color: black; */
}
.grid-item:hover .project-date {
    /* color: black; */
}
.grid-item:hover .design-hyperlink {
    /* color: var(--color-neutral-dark); */
}

/* Use one column based on a certain screen size */
@media screen and (max-width: 700px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

/* Style for the project dates */
.project-date {
    color: var(--color-neutral-mid);
    margin-top: -1em;
}

.centered-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2em;
}

.grid-item-content {
    flex-grow: 1;
    width: 100%;
}