/* styles.css */

body {
    margin:0;
    padding:0;
    box-sizing: border-box;
    background: linear-gradient(270deg, #ff0000, #ffffff, #0c005a);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    overflow-x:hidden;
    height:100%;
    width:100%;
}


.inside-Body{
    background: linear-gradient(270deg, aqua, #c4bbf0, #00bbf0 );
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    margin: 15px;
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    padding: 5px;
}/* This creates a box around the body of my website where all the information is given. so seperate colors and style from rest of the website */

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

main {
    text-align:center;
}

.legal-Documents{
    margin: 15px;
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    padding: 5px;
    background-color:white;
}

/*@keyframes colorChange{
    from {color:red;}
    to {color:black;}
}

h1{
    animation: colorChange 3s infinite alternate;
}


b{
    animation: colorChange 3s infinite alternate;
}This was going to be used to have H1 and B text color change on the web page*/



.form-container {
    column-count:1;
    background: linear-gradient(270deg, lightyellow, orange, white );
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    margin: 15px;
    padding: 8px;
}/* This section controls how the form section looks */

label{
    display: inline-block;
    padding: 5px;
    font-weight:bold;
}

input {
    width: 200px;
}

Footer {
    background: linear-gradient(270deg, #ecffa3, #f05d23, #1bf5af,#6af79a);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    text-align:center;
    padding: 5px;
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    margin: 15px;
}

#randomImage {
    max-width: 100%;
    height: auto;
    display: block; /* Ensures there's no inline space below the image*/
    margin: 0 auto; /* Centers the image if needed */
}



ul {
    list-style-type:circle;
    list-style-position:inside;
    text-align: center;
    padding: 10px;
}



.flex-container {
    display: flex;
    flex-direction: row; /* Default is row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    gap: 2px; /* Space between items */
    height: 100%; /* Full viewport height */
    padding: 5px; /* Add padding around the container */
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    margin: 15px;
}/*This is used to contain the Random People T-Shirt Photos*/


.responsive-image {
    max-width: 20%; /* Set the width to 50% of the parent container */
    height: auto; /* Maintain aspect ratio */
}/*This is used per Random People T-Shirt Image to control the size*/

.responsive-image2 {
display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    height: 20vh;
}/*This is used for the RPT Logo on the Success and Email Used notification pages*/

.logo {
  max-width: 80%; /* Responsive width */
  max-height: 100%; /* Keep within container height */
}/*This is also used for the RPT logo on the Success and Email Used notification pages*/


@media (max-width: 600px) {
    .container {
        padding: 5px; /* Reduce padding for smaller screens */
}/*This is used to control the image of the T-Shirts on smaller phone screens*/
}


.container {
    max-width: 100%; /* Set a maximum width for your text */
    padding:10px;
}/*Used for the body of the website to help with padding*/


@media (orientation: portrait) {
.submit-button {
    background: linear-gradient(270deg, maroon, hotpink, turquoise);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    padding: 12px 20px; /* Adjust padding for size */
    font-size: 18px;    /* Adjust font size */
    /*width: 20%;*/       /* Optional: make the button full width */
    display: inline-block;
    color: white;      /* Text color */
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;   /* Pointer cursor on hover */
}
}

@media (orientation: landscape) {
.submit-button {
    background: linear-gradient(270deg, maroon, hotpink, turquoise);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    padding: 12px 20px; /* Adjust padding for size */
    font-size: 18px;    /* Adjust font size */
    /*width: 20%;*/       /* Optional: make the button full width */
    display: inline-block;
    color: white;      /* Text color */
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;   /* Pointer cursor on hover */
}
}