/* STYLESHEET FOR chaselotito.com */

@font-face {
    font-family: 'ibm-plex'; /* A name you choose for your font */
    src: url('assets/fonts/IBMPLEXMONO-REGULAR.TTF');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ibm-plex-bold'; /* A name you choose for your font */
    src: url('assets/fonts/IBMPLEXMONO-BOLD.TTF');
    font-weight: normal;
    font-style: normal;
}


body {
  background-color: #001427; /* Change this to the desired background color */
  color: #eef4ed; /* Change this to the desired text color */
  font-family: 'ibm-plex', sans-serif; /* Optional: Specify the font family */
}

.contact-info a {
    color: #eb3645;
}

/* CLASSES */

.main{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10vh; /* 100% of the viewport height */
}

/* For any div that I give this class will center text! */
.center-horizontal {
    text-align: center;
}

.center-horizontal a {
    color: #eef4ed;
}

hr {
    border: none;
    height: 2px;
    background-color: #CDD6F4;
    width: 98%;
}

/* Contact Info Style */
.contact-info {
    text-align: center;
    padding: 20px 0;
    bottom: 0;
    width: 100%;
}

/* Profile Image Container Style */
.about-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
    gap: 20px;
}

/* Profile Image Style */
.about-section img {
    max-width: 10%;
    max-height: 10%;
    width: auto;
    height: auto;
    border: 5px solid #CDD6F4;
    box-shadow: 2px 2px #778da9;
}

.about-text {
    max-width: 30%;
}

.about-text h2 {
    padding-left: 1%;
}

.about-text p {
    padding-left: 1%;
    word-wrap: overflow-wrap;
}

/* Media Query for Mobile Devices */
@media only screen and (max-width: 768px) {
    .about-section {
        flex-direction: column; /* Stacks image and text vertically on smaller screens */
        align-items: center; /* Center the content */
    }

    .about-section img {
        max-width: 120px; /* Slightly reduce the image size on mobile */
        height: auto;
    }

    .about-text {
        max-width: 100%; /* Allow the text to take up full width on smaller screens */
        text-align: center; /* Center the text on mobile */
    }
}

.navigation {
    display: flex;
    justify-content: center;
}

.nav-button {
    padding: 10px 20px;
    margin: 5px;
    margin-right: 40px;
    margin-left: 40px;
    font-size: 16px;
    border-radius: 8px;
    border: none;
    background-color: #1b3b6f;
    color: #eef4e0;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
    text-decoration: none;
  }

.nav-button:hover {
    background-color: #598392;
}

.story-links {
padding-top: 50px;
padding-bottom: 50px;
display: flex;
justify-content: center;
}

.story-links a {
color: #CDD6F4;
display: flex;
justify-content: center;
max-width: 30%;
}

.story-section {
padding: 1em;
word-wrap: overflow-wrap;
display: flex;
justify-content: center;
}

.story-text {
    max-width: 40%;
    color: #CDD6F4;
}

.story-text h2 {
    padding-left: 1%;
}

.story-text p {
    padding-left: 1%;
    word-wrap: overflow-wrap;
}

/* Media Query for Mobile Devices */
@media only screen and (max-width: 768px) {
    .story-links a {
        max-width: 100%;
    }

        .story-text {
        max-width: 100%;
    }
}