:root
{
  --vaniaWidth: 720px;
  --fontSize: 22px;
  --fontSizeSmall: 86%;
  --vaniaLight: #666666;
  --vaniaLink: #2a86d1;

  --vaniaTextLight: #85858b;

  /* Light */
  --vaniaBg: #ededed;
  --vaniaText: #474c6e;

  /* Dark */
  /* --vaniaBg: #1e1f28;
  --vaniaText: #e9e9e4; */
}

@media only screen and (min-width: 641px)
{
  .topSpacer
  {
    padding-top: 20px;
  }
}

@media only screen and (max-width: 640px)
{
  .topSpacer
  {
     padding-top: 0px;
  }
}

.main
{
  max-width: var(--vaniaWidth);
  margin: auto;
  padding: 16px;
  margin: left;
  padding-top: 0px;
  line-height: 1.4;
  font-size: var(--fontSize);
  font-family: mainFont;
}

.topPadding
{
  padding-top: 10px;
}

light
{
  color: var(--vaniaTextLight);
}

@font-face
{
   font-family: mainFont;
   src: url(font/roboto.ttf);
}

body
{
  background: var(--vaniaBg);
  color: var(--vaniaText);
}

h1
{
  font-size: 200%;
  margin-bottom: 0px;
}

h2
{
  font-size: 160%;
  margin-bottom: 0px;
}

h3
{
  font-size: 120%;
  margin-bottom: 0px;
}

smallFont
{
  font-size: var(--fontSizeSmall);
}

p
{
  margin-top: 0px;
}

img
{
  width: 100%;
}

a:link
{
  color: var(--vaniaLink);
  text-decoration: none;
}

a:visited
{
  color: var(--vaniaLink);
  text-decoration: none;
}

a:hover
{
  color: var(--vaniaLink);
  text-decoration: underline;
}

a.head:link
{
  color: var(--vaniaText);
  text-decoration: none;
}

a.head:visited
{
  color: var(--vaniaText);
  text-decoration: none;
}

a.head:hover
{
  color: var(--vaniaLink);
  text-decoration: underline;
}

.ytvideo
{
  aspect-ratio: 16/9;
  width: 100%;
  border: none;
}