@font-face 
  {
  font-family: HeaderFont;
  src: url(fonts/PatrickHand-Regular.ttf);
  }

* {box-sizing: border-box; margin: 0; padding: 0; font: 14px Arial, sans-serif;} 

body
  {
  background-color: #494;
  background-color: #373;
  background-size: cover;
  background-attachment: fixed;
  padding: 1vh;
  }

.headerBar h1 
  {
  font-family: HeaderFont;
  font-size: clamp(3em, 7vw, 6em);
  letter-spacing: 4px;
  -webkit-text-stroke: 1px #fefede;
  color: red;
  margin: 1vh 0;
  text-align: center;
  }

h2 
  {
  font-family: HeaderFont;
  letter-spacing: 2px;
  font-size: 2.2em; 
  color: #6da;
  margin: 1vh 0;
  text-align: center;
  }

h3
  {
  font-size: 1.0em;
  color: #ccc;
  }

.newObs
	{
	margin: auto;
	padding: 10px;
	}

.newObs *
	{
	margin: 10px;
	padding: 5px;
	}

.newObs h1
	{
	font-size: 20px;
	margin-bottom: 10px;
	}

.headerBar
  {
  display: grid;
  grid-template-columns: 70px auto 70px;
  }

.headerIcon
  {
  width: clamp(40px, 16vw, 100px);
  }

.menuIcon
  {
  margin: 3vh 0 0 0;
  width: clamp(30px, 5vw, 40px);
  justify-self: end;
  }
 
.homeIcon
  {
	object-fit: contain;
	width: clamp(40px, 16vw, 100px);
  }

.page
  {
  max-width: 1000px;
  border-radius: 4px;
  min-height: 98vh;
  margin: 0 auto;
  padding: 1vh 2vw;
  background-color: #0b8;
  hyphens: auto;
  }

.group
  {
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.1);
  border-radius: 4px;
  background-color: #555;
  padding: 1vw 2vw;
  margin: 2vh 0;
  }

.group h1 {font-size: 1.4em; margin: 1vh 0;}

.box
  {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 15px;
  }

.theme
  {
  border: solid 1px #777;
  border-radius: 4px;
  width: 220px;
  height: 180px;
  padding: 5px;
  background-color: #444;
  cursor: pointer;
  }
 
.img1 
  {
  width: 100%;
  height: 150px;
  border-radius: 2px;
  object-fit: cover;

  }

#obs
  {
  display: none;
  flex-direction: column;
  }

#obs h2
  {
  font-size: 2.8em;
  color: #fefeee;
  }

#obs .menubox
  {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 3px 15px;

  width: 100%;
  min-height: 40px;
  background-color: #555;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 10px;
  }

#obs .submenubox
  {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 15px;

  flex-grow: 1;

  max-width: 400px;
  background-color: #444;
  border-radius: 4px;
  padding: 5px;
  }

#obs button
  {
  flex-grow: 1;

  width: 80px;
  height: 40px;
  background-color: #555;
  border: solid 1px #777;
  border-radius: 4px;
  color: #fefefe;
  }

#obs button:hover
  {
  background-color: #666;
  cursor: pointer;
  }

#obs .selected
  {
  color: #ff8;
  border: solid 2px #999;
  }

#obs .list
  {
  flex-grow: 10;
  background-color: #555;
  border-radius: 4px;
  padding: 5px;
  }

#obs .list_item
  {
  display: grid;
  grid-template-columns: 100%;
  gap: 3px;
  background-color: #444;
  border-radius: 4px;
  margin-bottom: 4px;
  padding: 0px;
  color: #fefefe;

  width: 100%;
  overflow: hidden;
  }

#obs .list_elem, #obs .location, #obs .date, #obs .user
  {
  background-color: #0b8;
  border-radius: 4px;
  padding: 12px 8px;
  color: #fefefe;
  word-wrap: break-word;
  }

#obs .location, #obs .date, #obs .user
  {
  display: none;
  }


@media only screen and (min-width: 360px) 
  {
	.headerBar h1  {-webkit-text-stroke: 2px #fefede;}
  #obs .date {display: block;}
  #obs .list_item {grid-template-columns: auto 88px; padding: 3px;}
  }

@media only screen and (min-width: 600px) 
  {
  #obs .location {display: block;}
  #obs .list_item {grid-template-columns: auto 88px 150px;}
  }

@media only screen and (min-width: 600px) 
  {
  #obs .user {display: block;}
  #obs .list_item {grid-template-columns: auto 88px 150px 150px;}
  }
 
@media only screen and (min-width: 1000px) 
  {
  body
    {
    background-image: url("img/bg.jpg");
    }
  }