body {
  color:#000; 
  font-size:120%; 
  line-height:1.6;
  /*padding:2em 2em 5em; */
  background:rgb(253, 253, 253);
  color:rgb(10, 10, 10);
  width:100%;
  /* display: flex;
    align-items: center;
    justify-content: center;*/
 } 
 
 .infobox {
    border: 1px solid #cccccc; /* Light gray border */
    background-color: #f9f9f9; /* Light background color */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px; /* Space inside the box */
    margin: 20px 0; /* Space around the box */
}


 
 .wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.wrapped-image {
    float: left; /* This will wrap the text around the image */
    margin-right: 15px; /* Adds space between the image and the text */
    width: 150px; /* Adjust the size of your image */
    height: auto; /* Keeps the image proportional */
}

.wrapped-image2 {
    float: left; /* This will wrap the text around the image */
    margin-right: 15px; /* Adds space between the image and the text */
    width: 250px; /* Adjust the size of your image */
    height: auto; /* Keeps the image proportional */
}


.text {
    text-align: justify; /* For a neat text layout */
    line-height: 1.6;
}

.chart{
	width:25vw;
	height:25vh;
}

.edge{
	width:90%;
	background-color: #fff;
	padding: 30px;
	border-radius: 8px;
	text-align: center;
	margin:auto;
}

.orangy{
	color: #1DA1F2;
}

.navbarfont {
	color: #fff;
	font-family: "Proxima Nova Bold",Arial,sans-serif;
	font-size: 17px;
	text-decoration: none;
	display: inline-block;
	padding: 22px 0;
	border-bottom: 4px solid transparent;
}

#cyholder {
  width: 75%; /* Set the width of the parent div */
  height: 400px; /* Set the desired height of the parent div */
  position: relative; /* Set the position to relative */
}

#cy {
  width: 100%; /* Set the width to 100% of the viewport width */
  height: 100%; /* Set the height to 100% of the viewport height */
        position: absolute;
        top: 0px;
        left: 0px;
      /*  pointer-events:none;*/
}

table{
	width:75%;
	margin-left: auto;
  	margin-right: auto;
}

/* Create a container for the grid */
.container {
    display: flex; /* Use flexbox */
    justify-content: space-between; /* Distribute items evenly along the main axis */
    align-items: flex-start; /* Align items to the start of the cross-axis */
    padding: 20px; /* Add some spacing around the grid */
}

 .row {
      display: flex;
            padding: 10px;

    }
.column {
      flex: 1;
      padding: 20px;

    } 
    
    
    .centertext{
    	  text-align:center;
    	  background-color:white;

    }
   
.hidden{
	display:none
}

.visible{
	display:block
}

.logo{
		font-size: 16px;
  color: black;
  font-family: "Old Western", serif;
  text-align: center;
  font-size: 16px;

}

.shrinkmembers{
	display:none;
}

.expandmembers {
  border: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  margin: auto;
  z-index:10;
  background-color: rgba(0, 0, 0, 0.4)
}

.membersbutton {
	font-size:100%;
	color: #ffffff;
	background-color: #1DA1F2;
	border-radius: 20px;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	
	/*position: absolute;
	float: right;
	top: 0px;
	right: 0px;*/
}

.groovybutton {
	font-size: 16px;
	color: #ffffff;
	background-color: #1d9bf0;
	border-radius: 5px;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	margin: 10;
	padding: 10;

}


 .membersiframe {
       display: grid;
      place-items: center;
      height: 50%;
      width:50%; /* Set the height of the container */
        background-color: transparent;

    }

table.paper {
	width:100%;
	background: url('paper.webp');
}

/*
a img {
  border: 2px solid #4ea8de ;
  padding: 10px;
  display:block;
  margin: 0 auto
}
*/

.center{
 display: inline-block;
  text-align: center;
}
a { 
font-weight:normal; 
text-decoration:none;
line-height:1.25;
font-size:18px;
}
a:link {color:rgb(0, 0, 0);}
a:visited {color:rgb(29, 155, 240);}
a:hover {color:rgb(29, 155, 240);  text-decoration: italic;}
a:active {color:rgb(29, 155, 240);   text-decoration: underline;}

h1 {
  font-size:320%;
  line-height:1.35;
  font-style:normal;
  margin:1.5em 0 0.8em;
}

h2 {
  font-weight:bold;
  font-size:200%;
  margin:auto;
}

h3 {
  font-weight:bold;
  /*text-transform:uppercase;*/
  font-size:150%;
  letter-spacing:0.15em;
  margin:1.75em 0 0.8em;
}

h4 {
  font-weight:normal;
  font-size:150%;
  letter-spacing:0.1em;
  margin:1.5em 0 0.8em;
}

h5 {
  font-weight:normal;
  font-style:italic;
  font-size:150%;
  margin:1.5em 0 0.8em;
}

h6 {
  font-weight:bold;
  font-size:100%;
  letter-spacing:0.1em;
  margin:1.5em 0 0.8em;
}

p {
  text-align:left;
  font-size:100%;
}

p.lead {
  font-size:150%;
  margin:1em 0;
}

/*p + p {
  margin:0;
  text-indent:1.5em;
}*/

/*p + ul, p + ol, p + dl {margin-bottom:1.5em;}*/
p.lead + p {
  text-indent:0;
}
p.small{
	font-size:75%;
}

/*img{
	max-width:250px;
	max-height:250px;
	display:block;
	margin: 0 auto;
	
}*/


blockquote { padding-left:1.5em; margin:1em 0;}
blockquote small {display:block; line-height:1.7em;}
ul, ol, dl {
  text-align:left;
  decoration:none;
}

dt {font-weight:bold;}
code {
background-color: #000000; /* Black background */
  display: block;
  padding: 10px;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  color: #ffffff; /* White text color */
  line-height: 1.4; /* Adjust line height as needed */
  overflow-x: auto; /* Add horizontal scrollbar if content overflows */
	}
p code {padding:0.25em; background:#eee;}
pre {text-align:left; font-size:100%;}
hr {height:0; color:#eee; border:1px solid #eee; margin:2em 0 1em;}

.normal {font-weight:normal;}
.quiet {color:#999;}
.pull-left {float:left; margin:0.5em 2em 1em 0;}
.pull-right {float:right; margin:0.5em 0 1em 2em;}

.booya{
	color:red;
}

@media (max-width:500px) {
  body {font-size:80%;}
  /*img {max-width:100% !important; height:auto !important; float:none !important;}*/
}

/*masonry*/
/*.grid-item { width: 295px;height:400px}
.grid-item--width2 { width: 400px; }*/

.grid-item { 
	width: 300px;
	height:325px;
	border: 2px solid #ddd;
  	border-radius: 4px;
  	padding:5px;
  	margin:5px;
  }
  
  

.grid-item--width2 { width: 600px; }

.grid {
  width: 100%;
  margin: 0 auto;
}

.bordertr {
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  margin: 10px 5px 5px;
}

#navbar {
  background-color: #1DA1F2; /* Twitter blue */

  display: flex;
  justify-content: center;
  /*width: 75%;
    height: 75px;
margin: 0 auto;*/
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
    flex-wrap: wrap;
  justify-content: center;
}

nav li {
  margin: 0 10px;
}

a.navlink {
  display: block;
  color: #fff;
  text-decoration: none; /* remove underline */
  padding: 15px 20px;
}

/*    #b7d7f5 lighter blue
    #c4e0f7
    #d1e8f9
    */
a.navlink:link {color:#fff;}
a.navlink:visited {color:#fff;}
a.navlink:hover {color: #b7d7f5;text-decoration: underline;}
a.navlink:active {color: #b7d7f5;  text-decoration: underline;}


nav a:hover {
	  color: rgba(29, 161, 242, 0.8);
  /*background-color: #fff;*/
    text-decoration: none; /* remove underline */

}

nav a:visited {
  color: #fff;
    text-decoration: none; /* remove underline */

}


#pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}

#prev-page,
#next-page {
  padding: 5px 5px;
  background-color: #1DA1F2; /* Twitter blue */
  color:white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

#prev-page:hover,
#next-page:hover {
  background-color: #e0e0e0;
}

#page-list {
	 color: #1DA1F2; /* Twitter blue */
border:2px #1DA1F2 solid;
  margin: 20 5px;
  padding:0 15px;
    font-size: 24px;
  font-weight: bold;
}

 .form-container {
            width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-title {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }
        .supplement-list {
            list-style-type: none;
            padding: 0;
        }
        .supplement-item {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .supplement-item:last-child {
            margin-bottom: 0;
        }
        .supplement-label {
            font-weight: bold;
        }
        .supplement-list li:nth-child(even) {
            background-color: #f2f2f2;
        }
        
    
/* Landing page specific styles */

.header {
  background-color: #1c1e22;
  color: #fff;
  padding: 20px;
}

.headline {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin: 80px 0 50px;
  color: #1DA1F2;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

.caption {
  font-size: 24px;
  text-align: center;
  margin: 30px 0;
  color: #1c1e22;
}

.csquote {
  font-size: 28px;
  font-style: italic;
  text-align: center;
  margin: 10px 0;
  /*color: #ffa200;*/
  color:#009688;
}



.author {
  font-size: 16px;
  font-style: italic;
  text-align: center;
  margin: 10px 0;
  /*color: #ffa200;*/
  color:black;
}

.featured-image {
  display: block;
  margin: 50px auto;
  border: 2px solid #ffa200;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  max-width:90%;
  max-height:90%;
}

.featured-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0;
}

.featured-content h2 {
  font-size: 36px;
  font-weight: 700;
  margin-right: 30px;
  color: #1c1e22;
}

.featured-content p {
  font-size: 20px;
  margin: 0;
  color: #5e5e5e;
}

.cta {
			display: block;
			text-align: center;
			font-size: 24px;
			font-weight: bold;
			margin-top: 30px;
			padding: 20px;
			background-color: #1DA1F2;
			color: #fff;
			border-radius: 5px;
			text-decoration: none;
			width: 200px;
			margin: 30px auto;
		}
		.cta:hover {
			background-color: #0D8AE6;
		}


/*.cta {
  background-color: #ffa200;
  color: #fff;
  display: block;
  text-align: center;
  padding: 20px;
  margin: 50px auto;
  max-width: 300px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.cta:hover {
  background-color: #ff8b00;
  cursor: pointer;
}
*/

#timer {
			font-size: 24px;
			font-weight: bold;
			color: #333;
		}
		
		.logocontainer {
  display: flex; /* Use flexbox to align items */
  align-items: center; /* Center vertically */
}

a.symptomlist{
	  font-size:120%; 
  color:#1DA1F2

}

a.symptoma{
	color:#1DA1F2
}

a.op{
	  font-size:75%; 
  color:grey;	
}

span.symptomjust{
	margin-right:10px;
		  font-size:100%; 
  color:black;	
}

span.symptomtype{
	margin-right:10px;
		  font-size:100%; 
  color:#1D1D1D;	
}

a.mi{
		  font-size:100%; 
  color:#1DA1F2;	
}

ul {
  /*list-style: none;*/
}

.prompt{
	width:100%;
	height:25%;
	display:none;
}
.response{
	width:100%;
	height:50%;
	display:none;
}



   
      
            #ideasdiv{
      	display:none;
      	background:white;
      	background-color: white;
    position: relative; /* Important for positioning the shadow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Adjust the values as needed */
    overflow:auto;
    z-index:101;
      }
      
      .draggable-div {
    width: 200px;
    height: 150px;
    background-color: lightblue;
    position: absolute;
    top: 50px;
    left: 50px;
    cursor: move; /* Change cursor to indicate draggable */
  }

  .drag-bar {
    width: 100%;
    height: 20px;
    background-color: lightgray;
    cursor: grab; /* Change cursor for the drag bar */
  }
  
   .footer {
  background-color: #1DA1F2;
  color: #fff;
  padding: 20px 0;
  font-size:75%;
}

.footer-container {
  margin: 0 auto;
  padding: 0 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer p {
  margin: 0;
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  display: inline;
  margin-right: 20px;
}

.footer-nav a {
  text-decoration: none;
  color: #fff;
}

.social-icons a {
  margin-right: 10px;
}

/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Create a flex container for the grid */
.flexgrid {
    display: flex;
    flex:1;
    flex-direction:row;
    flex-wrap: wrap; /* Allow items to wrap to the next row */
    gap: 16px; /* Adjust the gap between items as needed */
    overflow:auto;
      max-height: 100vh; /* Adjust the percentage as needed */
}

/* Style individual grid items */
.flexgrid-item {
    flex: 1; /* Allow items to grow and take up equal space */
    min-width: 300px; /* Adjust the width of items based on the number of columns you want */
    padding: 16px;
    text-align: center;
}

.resize-handle {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #3498db;
      bottom: 0;
      right: 0;
      cursor: se-resize;
            /* Add an arrow icon to indicate resizing */
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-diagonal-arrow-right-down" viewBox="0 0 16 16"><path d="M0 1.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H1.5V7a.5.5 0 0 1-1 0V1.5zm15 0V7a.5.5 0 0 1-.5.5H9a.5.5 0 0 1 0-1h5.5V1.5a.5.5 0 0 1 .5-.5z"/><path d="M14.854 3.854a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708 0l-8-8a.5.5 0 0 1 0-.708l8-8a.5.5 0 0 1 .708 0l8 8z"/></svg>');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 70%;
    }

/* Media query for responsive design
@media (max-width: 768px) {
    .flexgrid-item {
        min-width: calc(50% - 16px);
    }
}

Add more media queries as needed for different screen sizes */