:root {
    --main-radius: 5px;
    --padding-top: 5px;
}

.container {
    
		display: grid;
		grid-template-columns: repeat(6, 1fr);
    padding: 20px;
    grid-template-areas: "nav nav nav nav nav nav" 
		"main main	main	main	main	main"
		"main main	main	main	main	main"
		"main main	main	main	main	main"
		"main main	main	main	main	main"
		"main main	main	main	main	main"
		"main main	main	main	main	main"
		"main main	main	main	main	main"
		"main main	main	main	main	main"
		"sidebar sidebar sidebar sidebar sidebar sidebar"
		"sidebar sidebar sidebar sidebar sidebar sidebar"
		"sidebar sidebar sidebar sidebar sidebar sidebar"
		"sidebar sidebar sidebar sidebar sidebar sidebar"
		"sidebar sidebar sidebar sidebar sidebar sidebar"
		"footer	footer	footer	footer	footer	footer"
		"footer	footer	footer	footer	footer	footer";
		grid-gap: 1.5em;
		grid-template-rows: auto auto auto auto;
}

nav {
    background: rgb(2, 2, 48);
    grid-area: nav;
    border-radius: var(--main-radius);
    padding-top: var(--padding-top);
    font-size: 2.5em;
    color: #dddd;
    font-weight: 700;
    justify-content: center;
    justify-items: center;
    text-justify: middle;
    text-align: center;
		padding: 20px;
		grid-template-columns: 1/6;
}
.logo {
	grid-template-rows: 1fr;
}

.menu {
	grid-template-columns: 2fr;
}
main {
	grid-template-rows: minmax(200,max-content);
	grid-template-columns: 1 / 6;
    background: #dddd;
    grid-area: main;
    border-radius: var(--main-radius);
    padding-top: var(--padding-top);
    padding: 20px;
    text-align: justify;
    text-justify: inter-word;
}
.sidebar {
	background: rgba(182, 185, 189, 0.712);
	grid-area: sidebar;
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);
	padding: 20px;
	text-align: justify;
	text-justify: inter-word;
	justify-items: last baseline;
}
		
.sidebar>img{
	height:400px;
	width: 400px;
	margin:auto;

}

.footer {
    display: grid;
    background: rgb(60, 60, 75);
    grid-area: footer;
    border-radius: var(--main-radius);
    padding-top: var(--padding-top);
    grid-gap: 1em;
    padding-top: 25px;
    padding-bottom: 25px;
    grid-template-columns: 1/6;
}

.footer>div {
    background: rgba(36, 37, 49, 1);
    border-radius: var(--main-radius);
    padding-top: var(--padding-top);
    color: rgba(236, 231, 231, 0.867);
		padding-left: 1.5em;
		grid-template-columns: 1/6;
		padding-left: 15%;
}

@media only screen and (min-width: 80em) {
    .container {
			grid-template-columns: repeat(12,1fr);
        /*grid-template-areas: "nav" "main" "sidebar" "footer";*/
        grid-template-rows: 1fr 200px 100px;
        grid-gap: 20px;
        grid-template-areas: "nav	nav	nav	nav	nav	nav	nav	nav	nav	nav	nav	nav " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "footer	footer	footer	footer	footer	footer	footer	footer	footer	footer	footer	footer";
    }
    nav {
        display: grid;
        background: rgb(2, 2, 48);
        grid-area: nav;
        border-radius: var(--main-radius);
        padding-top: var(--padding-top);
        font-size:5em;
        color: #dddd;
        font-weight: 700;
				padding: 20px;
				grid-template-rows:1fr;
				grid-template-columns: 2fr 8fr 2fr;
				justify-content: center;
				align-items: center;
    }
    .logo {
        grid-template-columns:1/ 2;
        grid-template-rows: 1fr;
    }
    .head {
        grid-template-columns: 8fr;
				grid-template-rows: 1fr;
			
				text-justify: center;
				align-items: center;
				justify-items: center;
				justify-self: stretch;
				text-align: center;
				justify-content: end;
   }

.audios{
	display:grid;
	background: red;
/*	grid-template-areas: main;*/
	grid-template-columns: 1/12;
}
		
		
		.head h1{
		font-size:20vh;
	}
    .menu {
        grid-template-columns: 2fr;
        grid-template-rows: 1fr;
		}
		#hap-wrapper{
			display: grid;
			background: #ddd;
			grid-area:  main;
			border-radius: var(--main-radius);
			padding-top: var(--padding-top);
			font-size:5em;
			color: #dddd;
			font-weight: 700;
			padding: 20px;
			grid-template-rows:1fr;
			grid-template-columns: 2fr 8fr 2fr;
			justify-content: center;
			align-items: center;

		}
  .sidebar {
			display:grid;
        background:  rgba(182, 185, 189, 0.712);
        border-radius: var(--main-radius);
        padding-top: var(--padding-top);
  			grid-area:  sidebar;
				padding: 20px;
		}
		

    main {
         background: red;
       background: #dddd;
        padding: 20px;
        text-align: justify;
        text-justify: inter-word;
				grid-area: main;
				grid-template-columns: 9fr;
				padding-left:5%;
				padding-right:5%;
    }
    .footer {
        display: grid;
        background: rgb(60, 60, 75);
        grid-area: footer;
        border-radius: var(--main-radius);
        padding-top: var(--padding-top);
        grid-template-columns: repeat(3,4fr);
        grid-template-rows: auto;
        grid-gap: 1em;
        padding: 25px;
     
    }
    .footer>div {
        background: rgba(36, 37, 49, 1);
        border-radius: var(--main-radius);
        padding-top: var(--padding-top);
        color: rgba(242, 255, 254, 0.9);
        padding-left: 1.5em;
				grid-template-columns: 4fr 4fr 4fr;
				padding-left:20%;
      
    }
}