/* Grid Areas */
ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "-";
  padding-right: 5px;
}


#sona{
	grid-area:sona;
	background: pink;
	padding:10px;
	margin: 10px 0;
	
}

#about{
	grid-area:about;
	background: none;
	padding:10px;
	margin: 10px 0 10px 0;
	
}

#likes{
	grid-area:likes;
	background: none;
	padding:10px;
	margin: 10px 0 10px 0;
	
}

#dislikes{
	grid-area:dislikes;
	background: none;
	padding:10px;
	margin: 10px 0 10px 0;
	
	
}

#current{
	grid-area:current;
	max-height:300px;
	overflow:auto;
	background: none;
	padding:10px;
	margin: 10px 0 10px 0;
	
}

.int{
	background: #e1e1e1;
	box-sizing: border-box;
	padding: 10px;
	margin: 5px;
	height:200px;
	overflow: none;
}

.fill{
	height:140px;
	overflow:auto;"
}

/* Screen Size Responsiveness */

@media (min-width:400px) {
	
	
	.aboutgrid{
                display: grid;
                width:100%;
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                "sona"
                "about"
                "likes"
				"dislikes"
                "current"
            }
			
	#dislikes{
		border: none;
	}
	
		.interestgrid{
                display: grid;
                width:100%;
                grid-template-columns: 1fr
                grid-template-rows: auto;
                grid-template-areas:
                "movies"
				"music"
				"games"
                "shows"
				"books"
				"other"
            }
}

@media (min-width:700px) {
	
	
	.aboutgrid{
                display: grid;
                width:100%;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                "sona sona  about  about"
                "likes dislikes current current"
            }
	
	#dislikes{
		border-left:1px solid #e1e1e1;
		border-right:1px solid #e1e1e1;
	}
	
	.interestgrid{
                display: grid;
                width:100%;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                "movies music games"
                "shows books other"
            }
	
	
}




 /* Style the tab */
.tab {
 background: none;
padding: 0px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background:inherit;
  font-family: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px 0 10px;

}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #e1e1e1;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: none;
  border-bottom: 2px solid #EE0000;
}

/* Style the tab content */
.tabcontent {
  display: none;
margin:0px;
background: none;
}