@import url('activities.css');
@import url('birthday.css');
@import url('footer.css');
@import url('header.css');
@import url('logo.css');
@import url('main.css');
@import url('menu.css');
@import url('nav.css');
@import url('privacy.css');
@import url('sidebar.css');
@import url('tabs.css');
@import url('tabspage.css');
@import url('taskbar.css');
@import url('../shared/user.css');
@import url('../shared/toggle.css');
@import url('visitor.css');

#container {
width: auto;
max-width: 1200px;
margin: 20px auto 0 auto;
display: grid;
gap: 20px;
grid-template-areas:
"taskbar header header"
"taskbar main sidebar"
"taskbar footer footer";
grid-template-columns: 220px 1fr 350px;
grid-template-rows: auto 1fr auto;
}

#container.fullscreen {
  gap: 20px;
  grid-template-areas:
    "taskbar header"
    "taskbar main"
    "taskbar footer";

  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr 50px;
}

.fullscreen .profiles {
--numcolumns: 6;
}

#container.wrapper-messages {
max-width: auto;
}

/* Mobile */
@media (max-width: 768px) {
	
body { padding: 80px 20px 0 20px; }
	
#container {
width: 100%;
margin: 0 auto;
grid-template-areas:
"header"
"taskbar"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 0; 
}

#container.fullscreen {
grid-template-areas:
"header"
"taskbar"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
}

#container.fullscreen .profiles {
--numcolumns: 2;
}	

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

body { padding: 80px 20px 0 20px; }
	
#container {
width: 100%;
margin: 0 auto;
grid-template-areas:
"header"
"taskbar"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 0; 
}

}