.gomb {
  font-size: large;
  border-radius: 4px;
  transition-duration: 0.4s;
  margin-bottom: 15px;
  cursor: pointer;
}
.zoldul:hover {
  background-color: green;
}
#utmut {
  margin-top: 25px;
  font-size: x-large;
  background-color:whitesmoke;
  border-radius: 16%;
  border: 1px solid black;
  cursor: pointer;
}
.tarea {
  background-color:black;
  color:LimeGreen;
  font-size:medium;
  width:400px;
}
html {scroll-behavior: smooth;}
body {
  font-family: arial;
  background: gray;
  color:whitesmoke;
  margin: 0;
  width: fit-content;
}
.active-footer {
  display: flex;
  flex-flow: row nowrap;
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: auto;
  align-items: center;
  justify-content: right;
  margin: 0 auto;
  z-index: 1;
}
.active-footer > .back-to-top > span {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 40px;
}
.active-footer > a, .active-footer > .back-to-top >span {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  font-size: 40px;
  text-align: center;
  color: black;
  background-color: white;
  margin: 5px 10px;
  transition: width 2s, height 2s;
}
.active-footer > a:hover, .active-footer > .back-to-top > span:hover {
  color: white;
  background-color: black;
}
.nav-wrapper {
  display: flex;
  flex-flow: row wrap;
  width: fit-content;
  height: auto;
  position: fixed;
  top: 20px;
  margin: 0;
  padding: 0;
  background-color: transparent;
  opacity: 80%;
  justify-content: space-between;
  z-index: 1;
  transition: all .6s
}
.center, .right-side {
  display: flex;
  margin: 0px 20px;
  align-items: center;
  justify-content: center;
}
.left-side {
  display: flex;
  margin: 0px 0px;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  left: 0px;
  transition: all .6s
}
.nav-wrapper > .left-side > div, .nav-wrapper > .right-side > div, .nav-wrapper > .center > div {
  margin: 0px;
  font-size: 0.9em;
  text-align: center;
}
.nav-wrapper > .right-side > .brand > p {
  color: white;
}
#hamburger {
  cursor: pointer;
  z-index: 1;
  color: white;
  font-size: 50px;
  top: -10;
  display: flex;
}
#bigyo {
  display: flex;
  margin: 0px auto;
  align-items: center;
  justify-content: center;  
  flex-flow: column wrap;
}
#balmenu {
  position: relative;
  top: 45px;
}
.left-side > select {
  margin-top: -5px;
}
.brand {
  display: flex;
  height: 22px;
  margin: 0px 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.5s;
}
.nav-link-wrapper {
  height: 22px;
  margin: 0px 10px;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.5s;
  display: flex;
  align-items: center;
}
.nav-link-wrapper a {
  color: white;
  text-decoration: none;
  transition: color 0.5s;
  display: flex;
  align-items: center;
}
.nav-link-wrapper a > span {
  font-size: 50px;
  display: flex;
  align-self: center;
}
.nav-link-wrapper:hover {
  border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
  color: rgb(235, 37, 103);
}
.active-nav-link {
  border-bottom: 1px solid white;
}
.active-nav-ink a {
  color: white !important;
}
#container {
  display: flex;
  flex-flow: column nowrap;
  width: inherit;
  height: auto;
  align-items: left;
  justify-content:center;
  margin: 0px auto;
  padding: 0;
  position: relative;
}
select {
	font-size:x-large;
	border-width: medium;
  width: fit-content;
  /* max-width: 90%; */
}
/* https://www.bennadel.com/blog/4338-rotating-table-headers-with-css-transform.htm */
.forg {
  height: 60px;
  position: relative;
}
.forg_ {
  bottom: 5px;
  /* left: 50%; */
  position: absolute;
  transform: rotate( -45deg );
  transform-origin: center left;
  white-space: nowrap;
}
@keyframes pulse {
  0% {box-shadow: 0 0 0 0 rgb(255, 252, 252);}
  50% {box-shadow: 0 0 0 3px rgb(253, 253, 253);}
}    
/* https://love2dev.com/blog/css-background-stripes/ */
.jelol_hk {
  background-image: repeating-linear-gradient(-30deg,#fff, #fff 10px, #BDC3C7 20px, #BDC3C7 40px);
  animation: pulse 2s infinite;
}
.jelol_hv {
  background-image: repeating-linear-gradient(-30deg,#fff, #fff 10px, MediumSeaGreen 20px, MediumSeaGreen 40px);
  animation: pulse 2s infinite;
}
.jelol_unn {
  background-image: repeating-linear-gradient(-30deg,#fff, #fff 10px, #E04343 20px, #E04343 40px);
  animation: pulse 2s infinite;
}
/* https://www.w3schools.com/howto/howto_css_modals.asp */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 460px;
  height:40%;
  overflow: scroll;
}
.close {
  color: #aaaaaa;
  float: left;
  font-size: xxx-large;
  line-height: 0.6em;
  margin-right: 15px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 2;
  cursor: pointer;
}
.loader {
  border: 16px solid #c3c3c3;
  border-radius: 10%;
  /*border-top: 16px solid #3498db;*/
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  left: 14px;
  position: absolute;
  top: 0px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}