/*
 This is the style.css file
 Theme Name:   samtheme1
 Description:  attempt at custom theme
 Author:       Sam Schimek
 Version:      1.0.0
*/

@font-face {
    font-family: 'Social';
    src: url('fonts/Social/SocialFontBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Connect';
    src: url('fonts/Connect/ABCConnect-Flat-Trial.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}


body, h1, h2, h3, p {
    font-family: 'Social', sans-serif;
    font-weight: 900;
    background-color: black;
    color: white;
}

h1, h2, h3 {
    font-size: 2.55rem;
    font-weight: 400;
} /* Adjust the values as needed */

p {
    font-size: 1.2rem;
} /* Adjust the value as needed */

h1, h2, h3, p {
    line-height: 1.6;
} /* Adjust the value as needed */

.site-main {
    width: 1100px;
    max-width: 100%; /* Ensure it doesn't exceed the viewport width */
    margin: 0 auto; /* Center the content horizontally */
    padding-top: 75px; /* Adjust the value as needed */
    text-align: left; /* Center text content within this container */
}

@media (max-width: 768px) {
    body, h1, h2, h3, p {
        font-family: 'Social', sans-serif; /* Ensure font consistency on smaller screens */
        font-weight: 900;
    }
    h1, h2, h3 {
        font-size: 1.8rem; /* Adjust font size for mobile */
    }
    p {
        font-size: 1rem; /* Adjust font size for mobile */
    }
    .text1, .text2, .text3, .text4, .text5 {
        margin-top: 10vh; /* Increase top margin for all text elements on mobile */
    }
    .text5 {
        margin-bottom: 5vh; /* Adjust bottom margin for mobile */
    }
    .text1, .text2, .text3, .text4 {
        margin-bottom: 15vh; /* Adjust bottom margin for mobile */
    }
}

/* This CSS code sets the initial opacity of the text to 0 
and defines a fadeIn animation that transitions the opacity 
from 0 to 1 over a duration of 1 second.*/

.fade-in-text {
    background: none; /* Ensure there is no background color, override if necessary */
    font-family: 'Social', sans-serif;
    font-weight: 900;
    opacity: 0;
    animation: fadeIn 2.5s ease-in-out forwards;
    transition: opacity 1s ease-in-out; /* Added transition for smooth opacity changes */
    transform: translateY(100px); /* Ensure a consistent starting point */
}

/* Sets a unique margin-top for text1, and then for text2 through 5 */
/* Sets a unique margin-bottom for text5, and then for text1 through 4 */
.text1 {
    margin-top: 300px; /* Specific top margin for text1 */
}
.text5 {
    margin-bottom: 0px; /* Reduced from 300px for less space */
}

.text2, .text3, .text4, .text5 {
    margin-top: 700px; /* Common top margin for text2 through text5 */
}
.text1, .text2, .text3, .text4 {
    margin-bottom: 700px; /* Common bottom margin for text1 through text4 */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* EMAIL STUFF HERE: 
This first code block from GPT4 modernized the email field and button */

.learn-more-form {
    max-width: 400px; /* Adjust the form width */
    margin: 20px auto; /* Center the form horizontally */
    text-align: center; /* Center the text */
    font-family: 'Social', sans-serif; /* Ensuring typography consistency */
}

.learn-more-form input[type="email"] {
    width: 60%; /* Make the email input field full width */
    padding: 15px; /* Add some padding inside the input field */
    margin-bottom: 15px; /* Add some space below the input field */
    border: 2px solid #0073aa; /* Add a border to the input field */
    border-radius: 25px; /* Round the corners of the input field */
    font-size: 16px; /* Adjust font size */
    font-family: 'Social', sans-serif; /* Ensuring typography consistency */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Add a subtle shadow */
    transition: border-color 0.3s, box-shadow 0.3s ease; /* Smooth transition for border color and focus changes */
    color: #000000; /* Black text color for input text */
}

.learn-more-form input[type="email"]:hover {
    border-color: #9DFF20; /* Sets a vibrant border color when hovered */
    /* box-shadow: 0 0 0 2px #d4c70c; Glowing shadow for hover state - This line is now commented out */
}

.learn-more-form button {
    font-family: 'Connect', sans-serif;
    padding: 10px 20px; /* Add some padding inside the button */
    background-color: white; /* Change the background color */
    color: black; /* White text color for the button */
    border: none; /* Remove the border */
    border-radius: 25px; /* Round the corners of the button */
    cursor: pointer; /* Change the cursor on hover */
    font-size: 18px; /* Increase the font size */
    font-weight: 400; /* Make the font bold or set weight, 400 is standard */
    letter-spacing: 0.05em; /* Increase letter spacing for better readability */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transitions for background and press effect */
}

.learn-more-form button:active {
    transform: scale(0.96); /* Slightly shrink the button when pressed */
}

/* This third block refines colors and borders */

.learn-more-form input[type="email"], .learn-more-form button {
    border-color: #000000; /* Unified border color */
}

.learn-more-form button {
    font-family: 'Connect', sans-serif;
    background-color: #000000; /* Button background color */
    color: #FFFFFF; /* Ensuring button text is white for visibility */
}

.learn-more-form button:hover {
    background-color: #777777a6; /* Adjusted button hover color for better interaction feedback */
}

/* This fourth block increases responsiveness */

@media (max-width: 768px) {
    .learn-more-form {
        max-width: 100%;
        padding: 0 20px; /* Adapt form padding on smaller screens */
    }
}

/* This fifth block adds subtle animations */

.learn-more-form input[type="email"]:focus {
    border-color: #9DFF20; /* Matching vibrant border color for focus */
    /* box-shadow: 0 0 0 2px #d4c70c; /* Matching glowing shadow for focus */
    outline: none; /* Removing default browser outline for cleaner focus indication */
}

.learn-more-form button {
    transition: all 0.3s ease; /* Smooth transition for all changes, enhancing user experience */
}

/* This block below modifies the placeholder text inside the email input box 
and ensures correct scaling on mobile. */

.learn-more-form input[type="email"]::placeholder {
    font-size: 16px; /* Adjust based on your design needs */
}

.learn-more-form {
    margin-top: 60px; /* Adjust the value as needed */
    margin-bottom: 150px; /* Adjust the value as needed */
}

@media (max-width: 768px) {
    .learn-more-form input[type="email"]::placeholder {
        font-size: 13px; /* Smaller font size for smaller screens */
    }
}

/* Footer styles */

footer {
    text-align: center;
    font-size: 12px; /* Adjust font size as needed */
    color: #666; /* Adjust color as needed */
    margin-top: 50px; /* Ensure it's at the bottom or adds space above the footer */
    padding: 20px 0; /* Padding for visual spacing */
    position: absolute;
    width: 100%;
    bottom: 0;
}

strong {
    display: block;
}

.fade-in-part {
    opacity: 0; /* Ensure it starts invisible */
    transform: translateY(100px); /* Ensure a consistent starting point */
    transition: opacity 2.5s ease-in-out, transform 2.5s ease-in-out; /* Match the easing and duration of text3 */
}

.fade-to-grey {
    color: white; /* Initial color */
    transition: color 2.5s ease-in-out; /* Match the time interval of the fade-in-part */
}


.text3.triggered .fade-in-part, .text4.triggered .fade-in-part, .text5.triggered .fade-in-part {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Move to original position */
}

/* Specific delay for text4's fade-in-part without affecting text3 */
.text4 .fade-in-part {
    transition-delay: .5s; /* Adding a short delay */
}

.text3.triggered .fade-to-grey, .text4.triggered .fade-to-grey, .text5.triggered .fade-to-grey {
    color: #1c1c1c;
}

.fade-in-late {
    opacity: 0; /* Start with opacity 0 */
    transform: translateY(20px); /* Optional: Add some translation for smoother appearance */
    transition: opacity 2s ease-in-out, transform 2s ease-in-out; /* Define the transition */
    transition-delay: 0.8s; /* Delay the fade-in effect by 2 seconds */
}

.text3.triggered .fade-in-late {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Move to original position */
}

.wiggle-word {
  display: inline-block;
}

.wiggle-word .char {
  display: inline-block; /* Each character as inline block for individual animation */
}