* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial , sans-serif;
  line-height: 1.6;
  padding:12px;
}

h1 {
	text-align: center;
}

h2 {
	padding: 30px 0;
}

:root {
  font-size: 18px;
}


.inner-border {
  width: 100%;
  border: 1px solid grey;
}

#main p:first-of-type {
	padding: 30px 0;
}

#mobile-navbar, #list-content {
  display: none;
}

a {
  text-decoration: underline;
}


#masthead p {
  text-align: center;
}

#masthead * {
  margin: 10px 0;
}

#masthead a {
  text-decoration: none;
}

#masthead p a:hover {
  text-decoration: underline;
  color: #f00;
}
#home {
  width: 70%;
  max-width: 1000px;
  margin: 20px auto;
}

figure {
  text-align: center;
  margin-top: 40px;
    margin-bottom: 60px;
}

figure img {
  width: 100%;
  max-width: 800px;
}


@media only screen and (max-width:720px) {
  #home{
    width: 90%;
    margin: 20px auto;
  }

  #desktop-navbar {
    display: none;
  }

  #mobile-navbar {
    display: block;
  }

  #navbar-switch {
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
  }

  #list-content {
    display: none;
  }

}

/*  Dark theme */
:root{
  color-scheme: light dark;
  accent-color: magenta;
}

label{
  display: block;
  margin-top: 10px;
}

.full{
  height: 120vh;
}
/*  Dark theme ends */