/* styles.css */

/* Font Import */
@font-face {
  font-family: 'League Spartan';
  src: url('LeagueSpartan-Regular.ttf') format('truetype');
}

body {
  font-family: 'League Spartan', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
}

header {
  background-color: #2b7c4e;
  padding: 10px 0;
  text-align: center;
}

form {
  display: grid;
  gap: 10px;
}

.btn {
  background-color: #2b7c4e;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.portfolio-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.portfolio-item img {
    width: 120px; /* Set a fixed width for square photos */
    height: 120px; /* Set a fixed height for square photos */
    object-fit: cover;
    border-radius: 5px; /* Remove border-radius for square photos */
    margin-right: 20px; /* Increased spacing between image and name */
}


h1, h2 {
  font-size: 24px;
  color: #2b7c4e;
}

/* ... Existing CSS ... */

header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

form input, form button {
    width: 100%; /* Full width for input fields and button */
    padding: 10px; /* Increased padding for a better look */
    margin: 5px 0; /* Spacing between form elements */
    border: 1px solid #ccc; /* Border for input fields */
    border-radius: 5px; /* Rounded corners */
}

.portfolio-item {
    margin: 30px 0; /* Increased spacing between player items */
}

.portfolio-item img {
    margin-right: 20px; /* Increased spacing between image and name */
}

.portfolio-item span {
    vertical-align: middle; /* Center align with the image */
}
/* ... Existing CSS ... */

header {
    display: flex;
    justify-content: space-between;  /* adjust the logo to the left and the text to the right */
}

.container {
    display: flex; /* Use flex for side-by-side layout */
    justify-content: space-between; /* Space out the registration form and portfolio */
}

.form-section, .portfolio-section {
    width: 45%; /* Give both sections almost equal width, accounting for spacing */
}

/* ... Existing CSS ... */

.form-section, .portfolio-section {
    width: 45%; 
    margin-bottom: 30px; /* Increase the bottom margin to space out the sections */
}

.label {
    display: block;
    margin-bottom: 5px;
}

/* ... Existing CSS ... */

.logo-img {
    width: 80px;  /* Adjust width as required */
    height: auto;  /* Maintains aspect ratio */
}

/* ... Existing CSS ... */

nav {
    display: flex;
    justify-content: flex-end;
    gap: 20px; /* Space between links */
}

nav a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
}

nav a:hover {
    text-decoration: underline;
}

/* Adjust dropdown and input dimensions */
input[type="text"], input[type="email"], select {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;  /* ensures padding doesn't affect total width */
}

.btn {
    display: block;
    margin-top: 20px;
    /* ... Other btn styles ... */
}

.section-box {
    width: 50%; /* Take up full width of container */
    max-width: 1000px; /* Optional: Limit the maximum width of the section box */
    background-color: #f9f9f9;
    padding: 20px;
    margin: 20px 0; /* Adjust top and bottom margin for spacing */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

.container {
  background-color: #f9f9f9;
  padding: 20px;
  max-width: 10000px;
  margin: 20px auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.section-box {
    flex: 1;
    max-width: 50%; /* Each section takes up 50% of the container's width */
    background-color: #f9f9f9;
    padding: 20px;
    margin: 0 10px; /* Adjust horizontal margin for spacing between section boxes */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ... Existing CSS ... */

.portfolio-item img {
    width: 120px; /* Increase image size */
    height: 120px; /* Increase image size */
    object-fit: cover;
    border-radius: 50%;
    margin-right: 20px; /* Increased spacing between image and name */
}

.portfolio-item span {
    vertical-align: middle; /* Center align with the image */
    font-size: 18px; /* Increase text size for portfolio items */
}

/* ... Existing CSS ... */

/* ... Existing CSS ... */

/* Increase text size in both boxes */
.section-box h1, .section-box h2 {
    font-size: 30px; /* Increase text size */
}

/* Center player names underneath player photos in my portfolio */
.portfolio-item span {
    vertical-align: middle;
    font-size: 20px; /* Increase text size */
    text-align: center; /* Center text */
}

/* Increase size of the % numbers next to player photos */
.portfolio-item span[style="color:green"], .portfolio-item span[style="color:red"] {
    font-size: 24px; /* Increase text size */
}

/* ... Existing CSS ... */

/* Increase the size of player names */
.portfolio-item span {
    font-size: 20px; /* Increase text size */
    text-align: center; /* Center text horizontally */
}

/* Center player names horizontally with player photos and percentages */
.portfolio-item {
    display: flex;
    flex-direction: row;
    align-items: center; /* Center content horizontally */
    margin: 20px 0; /* Adjust spacing between portfolio items */
}

/* Increase the size of the percentages */
.portfolio-item span[style="color:green"], .portfolio-item span[style="color:red"] {
    font-size: 24px; /* Increase text size */
}