@font-face {
    font-family: Philly;
    src: url('element/PhillySans.otf');
}

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

:root {
  --black: #070721;
  --gray: #9F99BB;
  --beigeish: #DA9EA3;
  --pink: #F947BB;
  --orange: #F06720;
  --yellow: #F8BF3A;
  --green: #C1DE89;
  --blue: #52B7E5;
  --navy: #171847;
}



body {
    font-family: Verdana, Geneva, sans-serif;
    margin: 0;
    color: var(--black);
    background-image: url('img/bg.jpg');
}

#flex {
    display: flex;
    width: 1000px;
}

#container {
    margin-left: 70px;
}

#container a {
    color: var(--navy);
    font-weight: bold;
}

#container a:hover {
  color: var(--orange);
}

#container ul {
  margin-top:8px;
}

#container li {
  padding-left: 8px;
  margin-left:24px;
  list-style-position: outside;
  margin-bottom: 4px;
}

#container li::marker{
  padding-left:24px;
}

#header {
    /* width: 100%;
    background-color: #5e4e8c;
    height: 200px;
    background-image: var(--header-image);
    background-size: 100%; */

    /* font-family: Philly;
    font-size: 8em;
    -webkit-text-stroke: 4px #171847; */
    position: relative;
    top: 52px;
    left: -24px;
    user-select: none;
}

#nav {
    /* font-family: Philly;
    font-size: 32px; */
    background-color: var(--navy);
    width: 100%;
}

#nav ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-between;
    overflow: hidden;
}

#nav li {
    padding: 40px 16px 16px 16px;
    margin: 0;
    float: left;
}

#nav li a, .dropbtn {
    color: var(--blue);
    font-weight: 800;
    text-decoration: none;
    padding: 8px;
}

#nav li a:hover, .dropdown:hover .dropbtn {
    color: white;
    text-decoration: white wavy underline 2px;
}

#subnav ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-between;
  overflow: hidden;
}

#subnav li {
  padding: 0px;
  margin: 0;
  float: left;
  text-decoration: none;
  list-style-position: outside;
}

li.dropdown {
  display: inline-block;
  justify-content: center;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 250px;
  background-color: var(--navy);
  padding-bottom: 4px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: inherit;
  text-align: left;
}

/* .dropdown-content a:hover {
  background-color: #f1f1f1;
} */

.dropdown:hover .dropdown-content {
  display: block;
}

main {
  width: 1000px;
  background-color: var(--gray);
  background-image: url('img/watercolor-texture.jpg');
  background-blend-mode: soft-light;
  border-bottom: solid 16px var(--navy);
  border-right: solid 16px var(--navy);
  border-left: solid 16px var(--navy);
}

.content {
  padding: 0px 16px 16px 24px;
  height: 550px;
  overflow: auto;
  border-left: 16px solid white;
}

h1,
h2,
h3 {
    color: var(--navy);
}

h1 {
  font-family: Philly, sans-serif;
  margin-top: 16px;
  font-size: 40px;
  margin-bottom: 16px;
}

h2 {
  font-size: 18px;
  margin-top: 24px;
  margin-bottom: 8px;
}

h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

strong {
    color: var(--navy);
}

/* #sidebar {
  background-color: var(--navy);
  color: white;
  min-width: 200px;
  max-width: 200px;
  padding: 40px 16px 16px 16px;
  font-size: 11px;
} 

#sidebar a{
  color: var(--blue);
}

#sidebar h2 {
  color: white;
  margin-top: auto;
}

#sidebar em {
  background: none;
  color: var(--pink);
}
*/

#winamp-container {
  position: absolute;
  padding: 24px;
  bottom: 5px;
  right: 5px;
}

.inline-img-left {
  float: left;
  max-width: 250px;
  max-height: 250px;
  margin-right: 16px;
  margin-bottom: 16px;
}

.inline-img-right {
  float: right;
  max-width: 250px;
  max-height: 250px;
  margin-left: 16px;
  margin-bottom: 16px;
}

#blog {
  width:450px;
  height:550px;
  overflow: auto;
  background: white;
  -webkit-box-shadow: 2px 2px 6px 2px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 6px 2px rgba(0,0,0,0.25);
  position:absolute;
  top:320px;
  left:570px;
  padding: 16px;
}

#about {
  width:100%;
  height:400px;
  overflow: visible;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  background: var(--gray);
}
::-webkit-scrollbar-thumb {
  background: var(--beigeish);
  width: 12px;
  /* border-right: 2px solid var(--blue); */
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pink);
}

figcaption {
  font-style: italic;
  padding-top: 8px;
  padding-bottom: 16px;
}

/* contact buttons */
.btnTwitter {
    background-image: url("img/about/twitter1.png");
    width: 185px;
    height: 146px;
}
.btnTwitter:hover {
  background-image: url("img/about/twitter2.png");
}

.btnNeocities {
  background-image: url("img/about/neocities1.png");
  width: 206px;
  height: 172px;
}
.btnNeocities:hover {
  background-image: url("img/about/neocities2.png");
}

.btnEmail {
  background-image: url("img/about/email1.png");
  width: 138px;
  height: 208px;
}
.btnEmail:hover {
  background-image: url("img/about/email2.png");
}

.artbox {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  /* overflow: visible; */
}
.col {
  flex: 50%;
  flex-direction: column;
  margin: 4px 4px 4px 0px;
}
.col > img {
  width: 100%;
  /* object-fit: contain; */
  /* overflow: visible; */
}

/* .col > img:hover {
  transform: scale(1.1);
  z-index: 99999;
  overflow: visible;
} */

video:-webkit-full-page-media {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  max-height: 100%;
  max-width: 100%;
  margin: 0px;
}
video {
  object-fit: contain;
  overflow-clip-margin: content-box;
  overflow: clip;
}