body {
    font-size: 16px;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
	
}

.container {
  display: grid;
  width: 100vw; /* Ensures full viewport width */
  min-width: 100%; /* Ensures it doesn't shrink unexpectedly */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); /* 5 columns in total,with the last column being twice (2fr) the space of the first (1fr) */
  grid-template-rows: auto; /*The height of rows is determined by the content within the grid areas.*/
  grid-template-areas: 
    "header header  header header header header header header header header"
    "leftSidebar  leftSidebar main main main main main main main rightSidebar"
    "footer  footer footer footer footer footer footer footer footer footer";
  gap: 5px; /* Adds 20px space between grid items */
  
}

	
.item-a {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 1000; /* ensure it stays above other content */
  background-color: white; /* ensure background doesn't turn transparent */
  text-align: center;
  padding: 20px;
  border: 4px solid #000;
}
	
.item-b {
  grid-area: leftSidebar;
	  position: sticky;
	  background-color:  #eee;
	  top: 0;
	  align-self: start;
	  height: 100vh;       /* full height of the viewport */
	  overflow-y: auto;   /* allow vertical scroll within sidebar if needed */
	  z-index: 10;        /* make sure it stays above other layers */
	  padding: 12px;
	  
}


.vertical-menu { /*ogólna budowa menu in the left sidebar */
            /*position: absolute; /*czyli wzgl. parent div, czyli col-1*/
			/*width: 90%; /*300px;*/
			/*height: 77%; /*80%*/
			overflow-y: scroll;
        }
  
.vertical-menu a { /*Apply the following styles to every <a> tag (anchor/link) that is inside the vertical-menu.*/
            background-color: #eee; /*kolor całego pola na którym jest menu: ciemny szary*/
			/*font-weight: bold;*/
            display: block;
            padding: 12px;
            text-decoration: none;
			
        }
		
  
.vertical-menu a:hover {
           background-color: #ccc; /*color of highligting w left sidebar:  szary*/
        }
  
:target {
    /*To zostaje przejęte przez js file. Earlier: border: 2px solid #007BFF;*/
}


.item-c { /* the main area */
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 100px; /* gaps between sense-blocks */
}

.sense-block { /* sense in the main area */
  padding: 10px;
  border: 1px solid #ccc;/*szara ramka wokół całego znaczenia sense*/
  border-radius: 4px;
}

/* Highlighting of a selected sense in the main area*/
.sense-block.selected {
  background-color: #f0f8ff; /*ładny jasno-niebieski kolor wypełnienia sensu*/
  border-left: 4px solid #66afe9;
}

/* Highlighting of a selected anchor element i.e. <a ...> in the menu*/
.vertical-menu a.selected {
  background-color: #d0ebff;
  font-weight: bold;
}

.item-d { 
  grid-area: rightSidebar;
  
}


.item-e {
  grid-area: footer;
}




.cue {			/* cue sentence */
	font-style: italic;
	color: darkcyan;
}
		
.cueword {			/* target word in the cue sentence */
		font-style: italic;
		font-weight: bold;
		text-decoration: underline; /* Adds an underline */
		text-decoration-thickness: 2px; /* Adjusts the thickness of the underline */
        text-decoration-color: red; /* Sets the color of the underline */
 		
}
		
	.nr {
		font-family: "Arial";
			font-weight: bold;
			color:#ff0000; /*czerwony*/
		}
	
	.headw {
		font-family: "Verdana";
		  font-weight: bold;
		  font-size: 20px; 
		}
	.subhead {
		font-family: "Verdana";
		  font-weight: bold;
		  font-size: 16px; 
		  text-indent: 10px;
		  
		}
	
	.pos {
		font-family: "Times New Roman";
		font-style: italic;
		}
	.guideword {
		/*color:#e67300; czerwonawy*/
		color:#0000ff; /*niebieski*/
		font-family: "Arial";
		font-weight: bold;
		font-style: italic;
		font-variant: small-caps;
		border-width: 1px; /*tu rameczki dajemy*/
		border-style: solid;
		border-color: #0000ff;
		}
	.guideword-left {
		color:#0000ff; /*niebieski*/
		font-family: "Arial";
		font-weight: lighter;
		font-style: italic;
		font-variant: small-caps;
		}
	.phrasal {
		color:#006400; /*green*/
		font-family: "Arial";
		font-weight: bold;
	}
	.DEF {
		font-family: "Verdana";
		
		}
	.example {
		font-family: "Courier New";
		font-style: italic;
		font-weight: light;
		}
	
	.submit {
		margin-left: 320px; /* Adjust the value as needed */
		background-color: gray; /* background color np. zielonkawy #4CAF50;*/
		color: white;              /* text color */
		border: none;              /* remove border */
		padding: 10px 20px;        /* optional: adjust size */
		font-size: 16px;           /* optional: adjust font */
		cursor: pointer;           /* makes it look clickable */
		border-radius: 4px;        /* optional: rounded corners */
	}