@font-face
{
  font-family: "letteringlight";
  src: url("fonts/LetteringLight/LeroyLetteringLightBeta01.ttf");
}

@font-face
{
  font-family: "tuffybolditalic";
  src: url("fonts/Tuffy/Tuffy_Bold_Italic.ttf");
}

* { margin: 0; padding: 0; }
html { width: 100vw; height: 100vh; }

body
{
  width: 100vw; height: 100vh;
  background-color: #ede8d7;
  display: flex; flex-direction: row; justify-content: safe center; align-items: safe center;
  font-family: "letteringlight";
  font-size: large;
}

.fullcontent
{
  min-width: 200px; min-height: 100px; max-width: max(62%, 130vh); padding: max(calc(50px - 1%), 20px) 20px 20px 20px; gap: 10px;
  flex: 0.5 1 auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}

.section { width: 100%; }

.section.top
{
  flex: 0.2;
  position: relative;
  background-color: #f3f4f8; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  font-size: x-large;
  box-sizing: border-box; padding: 10px;
  background-image: url('graphics/marble.jpg');
  background-size: cover;
}

.section.middle
{
  flex: 0.6; display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px;
}

.section.bottom
{
  flex: 0.2;
  position: relative;
  background-color: #f3f4f8; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  font-size: large;
  box-sizing: border-box; padding: 10px;
  background-image: url('graphics/marble.jpg');
  background-size: cover;
}

.subsection.about
{
  min-width: 150px; flex: 1 1 auto;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  display: flex; flex-direction: column;
}

.subsection.topics
{
  min-width: 300px; flex: 5 1 10px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  display: flex; flex-direction: column;
}

.subsection.singletopic
{
  min-width: 150px; flex: 1 1 auto;
  background-color: #ffe7cb; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  background-image: url('graphics/parch_plain.jpg');
  background-size: cover;
  display: flex; flex-direction: column;
}

.subsection > .header
{
  flex: 0;
  font-family: "tuffybolditalic"; font-size: x-large;
  color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  box-sizing: border-box; padding: 10px;
}

.subsection > .content { flex: 1; padding: 20px; }

.subsection.singletopic > .header { padding: 20px; }
.subsection.singletopic > .content { padding: 0px 20px 20px 20px; }

.singletopic > .content > p { padding: 10px; }
.singletopic > .content > ul { padding: 5px 40px; }
.singletopic > .content > ul > li { padding: 3px; }

.about
{
  background-color: #ffecd1;
  background-image: url('graphics/parch_yellow.jpg');
  background-size: cover;
}

.about > .header
{
  background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.about > .content
{
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
}

.selfie { opacity: 60%; }

table.data > tbody > tr > td { padding: 5px; }

.topics
{
  background-color: #d4e7d3;
  background-image: url('graphics/parch_green.jpg');
  background-size: cover;
}

.topics > .header
{
  background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.topics > .content
{
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px;
}

.pic
{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background-repeat: no-repeat; background-position: center; aspect-ratio: 1/1;
}

.pic.professional { background-image: url('graphics/professional.svg'); min-width: 200px; }

.pic.projects { background-image: url('graphics/projects.svg'); min-width: 200px; }

.pic.music { background-image: url('graphics/music.svg'); min-width: 200px; }

.pic.random { background-image: url('graphics/random.svg'); min-width: 150px; }

a.topic
{
  position: relative;
  min-width: 250px; aspect-ratio: 1.3/1;
  flex: 0.25 1 0px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  transition: all 0.3s ease;
}

a.topic:hover { background-color: white; box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.7) }

.topicname
{
  position: absolute; top: 55%; left: 0%; width: 60%; height: 15%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.0));
  transition: all 0.3s ease;
}

.topicname > p
{
  position: absolute; top: 50%; left: 10%; color: white;
  transform: translate(0%, -50%);
  text-shadow: -1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.1), 1px 0 rgba(0, 0, 0, 0.1), 0 -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

a.topic:hover .topicname { top: 45%; background-color: rgba(0, 0, 0, 0.8); }
a.topic:hover .topicname > p { opacity: 100%; }

.topicdesc
{
  opacity: 0%; position: absolute; top: 65%; left: 0%; width: 70%; height: 20%;
  background-color: rgba(0, 0, 0, 0.8); transition: all 0.3s ease;
}

.topicdesc > p
{
  opacity: 0%; position: absolute; top: 50%; left: 15%; color: white;
  transform: translate(0%, -50%);
  transition: all 1.0s ease;
  font-size: small;
}

a.topic:hover .topicdesc { opacity: 100%; }
a.topic:hover .topicdesc > p { opacity: 100%; }

.fluff.top
{
  min-width: 80px;
  width: min(15%, 8em);
  height: auto;
  aspect-ratio: 1.2/1;
  position: absolute;
  right: 0%;
  background-image: url('graphics/houseplant.svg');
  background-size: cover;
  transform: translate(0%, -83%);
  opacity: 70%;
}

.fluff.topmid
{
  min-width: 150px;
  width: min(26%, 15em);
  height: auto;
  aspect-ratio: 4/1;
  position: absolute;
  right: 20%;
  background-image: url('graphics/books.svg');
  background-size: cover;
  transform: translate(0, -105%);
  opacity: 90%;
}

.fluff.bottom
{
  min-width: 150px;
  min-height: 30px;
  position: absolute;
  top: 50%;
  right: 1.7%;
  background-image: url('graphics/polygons.svg');
  background-size: cover;
  transform: translate(0, -60%);
  opacity: 40%;
}

p.credits { font-size: small; padding-bottom: 5px; }

p.centered { text-align: center; }

video { width: max(50%, 300px); height: auto; }

img.fit { width: max(80%, 300px); height: auto; }