@font-face {
    font-family: 'Jai';
    src: url('font/jai.ttf') format('truetype');
}

html {
    background-color: #1e0a33;
    color: white;

    /* Font stuff */

    font-family: 'Jai', 'JackInput', Courier, monospace;
    font-weight: bold;
    text-shadow: #ffffff0c 8px 8px;
    font-stretch: semi-condensed;

    /* DO NOT USE FLEX FOR MAIN HTML! THIS ALLOWS THE WHOLE PAGE TO GET FUCKY
       JUST FROM DUMB STUFF ALLLLL THE WAY DOWN INSIDE */
    width: 1000px; /* Set your desired width */
    margin: 0 auto;     /* Remove any default margin */
    padding: 0;    /* Remove any default padding */
    justify-content: center;

    
    /* Prevent text size from changing on phones */
    -webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

* {
	margin: 0;
}

/* This has to be essentially per-font-size */
h1 { letter-spacing: -2px; }
label { letter-spacing: 0px; }
p { letter-spacing: 0px; }



a { 
	color: inherit; /* Inherits text color from parent */
	text-decoration: none; /* Removes underline */
}



/* FORMATTING BLOCKS FOR MAIN PAGE ORDER */



.container {
    display: flex;
    flex-direction: column;
    
    gap: 160px; /* Space between blocks */
}
.horizontal {
    flex-direction: row;
}



.bigBlock {
    display: flex;

    justify-content: center;
    align-items: center;
    
    height: 400px;
    width: 100%;
}
.bg {
    background-color: #160726; /* Background color */
}
.nobg {
    background-color: transparent; /* Invisible (no background) */
    border: 1px solid transparent; /* Optional: Border for spacing */
}
.left {
    justify-content: center; /* Justify children to the left side */
}



.insideDiv {
    display: flex;
    
    justify-content: center;
    align-items: center;
}
.horizontal {
    flex-direction: row;
}
.vertical {
    flex-direction: column;
}



.rakeSawButton {
    font-size: 48px;
    letter-spacing: -1px;
    color: #DFDFDF;

    margin: 15px;
}
label:hover {
    color: white;
}



/* 
 * IS THIS WHY YOU'RE HERE SECTION
 * Styles for the projects/games grid display section
 */
.links-heading {
    font-size: 64px;
    text-wrap-mode: auto;
    text-align: center;
    
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-item-title {
    font-size: 32px;
    margin-bottom: 16px;
}

.grid-item-description {
    font-size: 16px;
    margin-bottom: 16px;
}

.grid-image-container {
    width: 492px;
    height: 492px;
    overflow: hidden;
}

.grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Thoughts */
#thoughts-container {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: start;
    flex-shrink: 1;
}

.single-thought {
	padding-top: 16px;
	padding-bottom: 16px;
    flex-shrink: 1;
}

.timestamp {
    font-size: 20px;
    font-weight: normal;
    color: #808080;
}

.message {
    font-size: 24px;
    font-weight: normal;

    margin-left: 40px;

    
}