/*<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');



/* Body styles */
body {
    background-color: #f0f5ff;
    font-family: 'Lexend', 'Open Sans', 'Google Sans', 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 350;
    font-style: normal;
}

/* Header styles */
header {
    background-color: #007dd1;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-family: 'Google Sans', sans-serif;
    font-size: 24px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 500; 
    line-height: 26.4px;
}

@media (max-width: 600px) {
  h1 {
    line-height: 1.2;
    text-align: center;
  }
}

/* Navigation styles */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #007dd1;
  /*border: 1px solid #ccc;
  border-width: 1px 0;-->*/
  text-align: center;
}

nav li {
  display: inline-block;
}

nav li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px 13px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
nav li a:hover, .dropdown:hover .dropbtn {
  background-color: #005fa0;
}

/* Style The Dropdown Button */
/*.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}*/

/* The container <div> - needed to position the dropdown content */
li .dropdown {
  display: inline-block;
  position: absolute;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
/*.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}*/


/* Main content styles */
main {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #3498db;
    /*border-radius: 5px; curva il bordo agli angoli*/
}

/* Section styles */
section {
    margin-bottom: 30px;
}

h2 {
    color: #3498db;
}

h3 {
    color: #3498db;
}

/* List styles */
ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 25px;
}

/* Footer styles */
footer {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 10px;
}

.container {
  text-align: left;
  width: 100%;
  /*padding: 0rem;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
  display: flex;
  flex-direction: row;
}

/*.container2 {
  text-align: center;
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: row;
}*/
button {
  background-color: #007dd1;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Lexend', 'Open Sans', 'Google Sans', 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 350;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}
#prompt {
  font-size: 24px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Stack elements vertically on mobile */
  }

  .image, .text {
    flex: none;
    width: 100%;  /* Make both sections full width */
}

  /*.container2 {
    flex-direction: column; /* Stack elements vertically on mobile 
  }*/
}

select {
  background-color: #3fa0e0;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}