/*container for the main body of the site */
.content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 1420px;
    /* Width of the content container */
    height: 650px;
    /* Height of the content container */
    padding: 10px;
    /* Padding around the content */
}

/**/
button {
    color: rgba(255, 255, 255, 0.662);
    /* Text color of the button */
    font-weight: bold;
    /* Font weight of the button */
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    /* Background color of the profile container with transparency */
    backdrop-filter: blur(10px);
    /* Blurring effect on the background */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    /* Shadow effect */
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* Border style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    /* Top border style */
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    /* Left border style */
    border-radius: 20px;
    /* Border radius */
    -webkit-backdrop-filter: blur(10px);
    /* Backdrop filter for Safari */
    width: 600px;
    /* Width of the profile container */
    padding-bottom: 20px;
    /* Padding at the bottom of the profile container */
    margin-top: 20px;
    /* Margin at the top of the profile container */
}

.slideshow_conteiner {
    max-width: 250px;
    /* Maximum width of the slideshow container */
    position: relative;
    /* Relative positioning */
}

.img {
    width: 256px;
    /* Width of the image */
    height: 256px;
    /* Height of the image */
}

.container {
    max-width: 1200px;
    /* Maximum width of the container */
    padding: 30px;
    /* Padding around the container */
}

h1 {
    text-align: center;
    /* Center align the heading */
    margin-bottom: 40px;
    /* Margin at the bottom of the heading */
}

.slider-button {
    display: flex;
}

button:active {
    background: #000;
    /* Background color of the button when active */
    color: #fff;
    /* Text color of the button when active */
}

.courses {
    margin-top: 40px;
    /* Margin at the top of the courses */
}

.courses li {
    margin-bottom: 20px;
    /* Margin at the bottom of each course */
}

.courses a {
    color: #222;
    /* Link color of the courses */
}

.slider {
    border-radius: 20px;
    /* Border radius of the slider container */
    width: 256px;
    /* Width of the slider container */
    height: 256px;
    /* Height of the slider container */
    margin: 20px auto;
    /* Margin around the slider container */
    overflow: hidden;
    /* Hide overflow content */
}

.slider-line {
    width: 1024px;
    /* Width of the slider line */
    height: 256px;
    /* Height of the slider line */
    display: flex;
    /* Display the slider line as a flex container */
    position: relative;
    /* Relative positioning */
    left: 0;
    /* Initial position of the slider line */
    transition: all ease 0.5s;
    /* Transition effect for smooth sliding */
}

.control {
    font-size: 30px;
    /* Font size of the control buttons */
    margin: 10px;
    /* Margin around the control buttons */
    width: 100px;
    /* Width of the control buttons */
    height: 35px;
    /* Height of the control buttons */
    display: flex;
    /* Display the control buttons as a flex container */
    justify-content: center;
    /* Center align the content horizontally */
    align-items: center;
    /* Center align the content vertically */
    border-radius: 5px;
    /* Border radius of the control buttons */
    cursor: pointer;
    /* Show cursor pointer on hover */
    transition: all 0.3s ease;
    /* Transition effect for smooth interaction */
    position: relative;
    /* Relative positioning */
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    /* Box shadow effect */
}

.forms {
    display: flex;
    /* Display the forms container as a flex container */
}

form {
    padding: 10px;
    /* Padding around the form */
    display: flex;
    /* Display the form as a flex container */
    flex-direction: column;
    /* Arrange form elements in a column */
    align-items: left;
    /* Align form elements to the left */
}

.form_element_input {
    padding-top: 10px;
    /* Padding at the top of the input element */
    width: 190px;
    /* Width of the input element */
    height: 80px;
    /* Height of the input element */
    border-radius: 10px;
    /* Border radius of the input element */
}

.input {
    padding: 10px 10px 0 0;
    /* Padding around the input field */
}

.input_nickname {
    border-radius: 10px;
    /* Border radius of the nickname input field */
    width: 190px;
    /* Width of the nickname input field */
    height: 25px;
    /* Height of the nickname input field */
}


.game {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 625px;
    background: rgba(255, 255, 255, 0.2);
    /* Set a semi-transparent background color for the header */
    backdrop-filter: blur(10px);
    /* Apply a blur effect to the background */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    /* Add a box shadow to the header */
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* Add a border to the header */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    /* Add a top border to the header */
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    /* Add a left border to the header */
    border-radius: 20px;
    /* Add border radius to the header */
    -webkit-backdrop-filter: blur(10px);
    /* Add a blur effect to the background for WebKit browsers */
}

.form_element_button {
    padding-top: 50px;
    /* Padding at the top of the button element */
    width: 200px;
    /* Width of the button element */
    height: 40px;
    /* Height of the button element */
}

.save {
    height: 100%;
    /* Height of the save button */
    width: 100%;
    /* Width of the save button */
}

.modes {
    display: flex;
    /* Display the modes container as a flex container */
    height: 300px;
    /* Height of the modes container */
    width: 400px;
    /* Width of the modes container */
}

.save {
    display: flex;
    /* Display the save button as a flex container */
    justify-content: center;
    /* Center align the content horizontally */
    align-items: center;
    /* Center align the content vertically */
    border-radius: 5px;
    /* Border radius of the save button */
    cursor: pointer;
    /* Show cursor pointer on hover */
    transition: all 0.3s ease;
    /* Transition effect for smooth interaction */
    position: relative;
    /* Relative positioning */
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    /* Box shadow effect */
}

.game_mode {
    display: flex;
    /* Display the game mode as a flex container */
    justify-content: center;
    /* Center align the content horizontally */
    align-items: center;
    /* Center align the content vertically */
    height: 100%;
    /* Height of the game mode */
    width: 100%;
    /* Width of the game mode */
    margin-left: 10px;
    /* Left margin of the game mode */
    border-radius: 5px;
    /* Border radius of the game mode */
    cursor: pointer;
    /* Show cursor pointer on hover */
    transition: all 0.3s ease;
    /* Transition effect for smooth interaction */
    position: relative;
    /* Relative positioning */
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    /* Box shadow effect */
}

.submit {
    padding-top: 15px;
    /* Padding at the top of the submit button */
    height: 70px;
    /* Height of the submit button */
    width: 390px;
    /* Width of the submit button */
    margin-left: 10px;
    /* Left margin of the submit button */
}

.start {
    display: flex;
    /* Display the start button as a flex container */
    justify-content: center;
    /* Center align the content horizontally */
    align-items: center;
    /* Center align the content vertically */
    height: 100%;
    /* Height of the start button */
    width: 100%;
    /* Width of the start button */
    border-radius: 5px;
    /* Border radius of the start button */
    cursor: pointer;
    /* Show cursor pointer on hover */
    transition: all 0.3s ease;
    /* Transition effect for smooth interaction */
    position: relative;
    /* Relative positioning */
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    /* Box shadow effect */
}