@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.full {
	width: 100%;
	height: 100%;
	background-size: cover;
}	
body {
	   background-size: 100% 100%;
	  background-image: url(https://www.okrepcevalnica-raj.net/assets/images/mbr-1920x1280.jpg);
	  background-color: #030303;
	  margin: 0;
	    height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: #FFF;
	}
td {
	  padding: 0.3em;
	  border-bottom: 1px solid white;
	}
table {
	  width: 99%;
	}
.dan{
	  text-align: center;
	 
	}
	
a {
		text-decoration: none;
		color: white;
	}
nav {
	background-color:rgba(0, 0, 0, 0.99);
	color: white;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;

}
.topnav {
  overflow: hidden;
  background-color: #000;
  border-bottom-style: solid;
  border-width: 2px;
 border-bottom-color:#4CAF50;
 
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}
.danes {
		
	
	border-style: inset;
	border-width: 2px;
	border-color:#4CAF50;
	
       
}
	
@media screen and (max-width: 604px) {
	
	  .grid-container {
		 -webkit-backdrop-filter: blur(6px);  backdrop-filter: blur(6px);
		display: grid;
		grid-template-areas: 
		"f"
		"a"
		"b"
		"c"
		"d"
		"h"
		"e";
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		
	  }
	  .a { grid-area: a; background-color:rgba(0, 0, 0, 0.5);padding: 2px; border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px; border-radius: 10px; ;margin-bottom:10px;margin-top:10px;}
	.b { grid-area: b; background-color:rgba(0, 0, 0, 0.5);padding: 2px; border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px; border-radius: 10px; ;margin-bottom:10px;}
	.c { grid-area: c; background-color:rgba(0, 0, 0, 0.5);padding: 2px; border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px; border-radius: 10px;margin-bottom:10px;}
	.d { grid-area: d;  background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		margin-bottom:5px;
	}
	.e { grid-area: e; background-color:rgba(0, 0, 0, 0.5);padding: 2px; border-top-style: solid;
		border-width: 2px;
	   border-top-color:#4CAF50;}
	.f { grid-area: f; background-color:rgba(0, 0, 0, 0.5);padding: 2px; border: 1px solid #000; border-radius: 10px; color: white;}
	.g { display: block; position: absolute; top: 0.5rem; right: 0.5rem;}
	.h { grid-area: h; background-color:rgba(0, 0, 0, 0.5);padding: 2px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;border-radius: 10px; color: white;margin-bottom:10px;}

	  .topnav a:not(:first-child) {display: none;}
	  .topnav a.icon {
		float: right;
		display: block;
	  }
		.topnav.responsive {position: relative;}
	  .topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	  }
	  .topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	  }
	  #logo {
		width: 40px;
		display: none;
	  }
	  h3 {
		font-size: 1.2em;
	}
}

@media all and (min-width: 604px) and (max-width: 1024px) {
	
	.grid-container {
	  display: grid; 
	  color:white;
	  	 -webkit-backdrop-filter: blur(6px);  backdrop-filter: blur(6px);
	  grid-template-columns: repeat( 2, minmax(250px, 1fr) );
	  grid-template-rows: auto 1fr auto;
	  gap: 0.5em 0.5em;
	  object-fit: cover;
	  column-count: 2;
	  grid-template-areas:
		"f f"
		"a b"
		"c d"
		"h ."
		"e e"
		;
	}
	.a { grid-area: a; background-color:rgba(0, 0, 0, 0.5);padding: 20px; border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px; border-radius: 10px;margin-bottom:5px;}
	.b { grid-area: b; background-color:rgba(0, 0, 0, 0.5);padding: 20px; border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px; border-radius: 10px;margin-bottom:5px;}
	.c { grid-area: c; background-color:rgba(0, 0, 0, 0.5);padding: 20px; border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px; border-radius: 10px;margin-bottom:5px;}
	.d { grid-area: d;  background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		border-radius: 10px;
	}
	.e { grid-area: e; background-color:rgba(0, 0, 0, 0.5);padding: 20px; border-top-style: solid;
		border-width: 2px;
	   border-top-color:#4CAF50;}
	.f { grid-area: f; background-color:rgba(0, 0, 0, 0.5);padding: 20px; border: 1px solid #000; border-radius: 10px; color: white;}
	.g { display: block; position: absolute; top: 0.5rem; right: 0.5rem;margin-bottom:5px;}
	.h { grid-area: h; background-color:rgba(0, 0, 0, 0.5);padding: 20px; border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px; border-radius: 10px; color: white;margin-bottom:5px;}

	h3 {
		font-size: 1.2em;
	}
}
@media all and (min-width: 1024px) and (max-width: 1624px) {
	
	.grid-container {
	 
	  display: grid; 
	  color:white;
	 -webkit-backdrop-filter: blur(6px);  backdrop-filter: blur(6px);
	  grid-template-columns: repeat( 3, minmax(250px, 1fr) );
	  grid-template-rows: auto 1fr auto;
	  gap: 0.5em 0.5em;
	  object-fit: cover;
	  column-count: 3;
	  grid-template-areas:
		"f f f"
		"a b c"
		"d h ."
		"e e e"
		;
	}
	.a { grid-area: a; background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		margin-bottom:5px;
		border-radius: 10px;}
	.b { grid-area: b; background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		margin-bottom:5px;
		border-radius: 10px;}
	.c { grid-area: c; background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		margin-bottom:5px;
		border-radius: 10px;
	}
	.d { grid-area: d;  background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		border-radius: 10px;
	}
	.e { grid-area: e; background-color:rgba(0, 0, 0, 0.5);padding: 20px; border-top-style: solid;
		border-width: 2px;
	   border-top-color:#4CAF50;}
	.f { grid-area: f; background-color:rgba(0, 0, 0, 0.5);padding: 20px; border: 1px solid #000; border-radius: 10px; color: white;}
	.g { display: block; position: absolute; top: 0.5rem; right: 0.5rem;margin-bottom:5px;}
	.h { grid-area: h; background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		 color: white;margin-bottom:5px;border-radius: 10px;}

	h3 {
		font-size: 1.2em;
	}
}
@media all and (min-width: 1624px) {
	
	.grid-container {
		
	  display: grid; 
	  color:white;
	 -webkit-backdrop-filter: blur(6px);  backdrop-filter: blur(6px);
	  grid-template-columns: repeat( 5, minmax(250px, 1fr) );
	  grid-template-rows: auto 1fr auto;
	  gap: 0.5em 0.5em;
	  object-fit: cover;
	  column-count: 5;
	  grid-template-areas:
		"f f f f f"
		"a b c d h"
		"e e e e e"
		;
	}
	.a { grid-area: a;  background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		margin-bottom:5px;
		border-radius: 10px;
	}
	.b { grid-area: b;  background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		margin-bottom:5px;
		border-radius: 10px;
	}
	.c { grid-area: c;  background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		margin-bottom:5px;
		border-radius: 10px;
	}
	.d { grid-area: d;  background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		margin-bottom:5px;
		border-radius: 10px;
	}
	.e { grid-area: e; background-color:rgba(0, 0, 0, 0.5);padding: 20px;   border-top-style: solid;
		border-width: 2px;
	   border-top-color:#4CAF50;
	}
	.f { grid-area: f; background-color:rgba(0, 0, 0, 0.5);padding: 20px; border: 1px solid #000; border-radius: 10px; color: white;}
	.g { display: block; position: absolute; top: 0.5rem; right: 0.5rem;margin-bottom:5px;}
	.h { grid-area: h;  background-color:rgba(0, 0, 0, 0.5);padding: 20px; 
		border-image: url('rob.png') 45% 45% round;
		border-style: inset;
		border-width: 1px;
		border-color: #FFF;
		color: white;
		margin-bottom:5px;
		border-radius: 10px;
	}

	h3 {
		font-size: 1.2em;
	}
}
.welcome {

	font-family: 'Pacifico', cursive;
}