html {
	scroll-behavior: smooth;
	}

.container {
	display: grid;
	height: 120vh;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: .3fr .15fr 2fr 2fr 3fr;
	grid-template-areas:
		"header header header header header header"
		"nav nav nav nav nav nav"
		"Kiosk Kiosk Kiosk Kiosk Kiosk Kiosk"
		"Data Data Data Data Data Data"
		"DataImage DataImage DataImage DataImage2 DataImage2 DataImage2"
		"DataImage3 DataImage3 DataImage3 DataImage4 DataImage4 DataImage4"
		"DataImage5 DataImage5 DataImage5 DataImage6 DataImage6 DataImage6";
	grid-gap: 0.2rem;
  	font-family: Arial, Helvetica, sans-serif;
	}

#mybtn {

	display: none;
  	position: fixed;
  	bottom: 20px;
  	right: 30px;
  	z-index: 99;
  	font-size: 18px;
  	border: none;
  	outline: none;
  	background-color: #0080ff;
  	color: white;
  	cursor: pointer;
  	padding: 15px;
  	border-radius: 10px;
	}

#mybtn:hover {
  background-color: #0047ab;
}

header {
	background: #fd7e14;
	grid-area: header;
	text-align: center;
	border-radius: 20px;
	}

nav {
	background: #fd7e14;
	grid-area: nav;
	border-radius: 20px;
	}

.nav{
    	list-style:none;
    	margin:0;
    	padding:0;
    	text-align:center;
    	text-decoration: none;

	}

.nav li{
    	display:inline;
	}

.nav a{

    	display:inline-block;
    	padding: 13px;
    	font-size: 17px;
    	color: black;
	}

.nav a:hover{
    	background-color: #0047ab;
    	color: white;
	}

#Kiosk {
	background: #343a40;
	grid-area: Kiosk;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 33%;
	padding-right: 33%;
	}
#DataImage {
	background: #343a40;
	grid-area: DataImage;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15%;
	padding-right: 15%;
	}
#DataImage2 {
	background: #343a40;
	grid-area: DataImage2;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15%;
	padding-right: 15%;
	}
#DataImage3 {
		background: #343a40;
		grid-area: DataImage3;
		text-align: center;
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: 15%;
		padding-right: 15%;
		}
#DataImage4 {
			background: #343a40;
			grid-area: DataImage4;
			text-align: center;
			padding-top: 15px;
			padding-bottom: 15px;
			padding-left: 15%;
			padding-right: 15%;
			}
#DataImage5 {
				background: #343a40;
				grid-area: DataImage5;
				text-align: center;
				padding-top: 15px;
				padding-bottom: 15px;
				padding-left: 15%;
				padding-right: 15%;
				}
#DataImage6 {
					background: #343a40;
					grid-area: DataImage6;
					text-align: center;
					padding-top: 15px;
					padding-bottom: 15px;
					padding-left: 15%;
					padding-right: 15%;
					}
.kioskb {
	background-color: #ffc107;
	border-radius: 50%;
	padding-top: 15%;
	padding-bottom: 15%;
	padding-left: 25%;
	padding-right: 25%;
	text-align: center;
	}

.db {
	background-color: rgb(68,85,90);
	border-radius: 10%;
	padding-top: 10%;
	padding-bottom: 10%;
	padding-left: 10%;
	padding-right: 10%;
	text-align: center;
	}

.Renderone img {
	max-height: 300px;
	max-width: 100%;
	}

.Rendertwo img {
	max-height: 4000px;
	max-width: 100%;
	}
.Renderthree img {
	max-height: 4000px;
	max-width: 100%;
	}

#Data {
	background: #343a40;
	grid-area: Data;
	text-align: center;
	font-size: 20px;
	color: white;
	}