resume.css

:root {
  --bg: #ffffff;
  --panel-bg: rgb(238, 238, 238);
  --panel-fg: black;
  --contact-bg: rgb(43, 56, 99);
  --contact-fg: white;
  --panel-side-margin: 10px;
  --right-panel-width: 150px;
}

html {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-size: 10.5pt;
  line-height: 1.4;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  height: 100%;
}

.content {
  max-width: 750px;
  padding: 15px 15px 0px 15px;
  height: 100%;
}

header {
  display: flex;
  gap: 10px;
}

#main {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

#name {
  align-self: center;
  background-color: var(--panel-bg);
  color: var(--panel-fg);
  padding: 0px var(--panel-side-margin) 0px var(--panel-side-margin);
  border-radius: 8px 0px 0px 0px;
  flex: 1;
}

#contact {
  align-self: stretch;
  justify-self: stretch;
  background-color: var(--contact-bg);
  color: var(--contact-fg);
  padding: 24px var(--panel-side-margin) 24px var(--panel-side-margin);
  border-radius: 0px 8px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: start;
  width: var(--right-panel-width);
}

#contact a,
#contact a:visited,
#contact a:link {
  display: block;
  text-decoration: none;
  color: white;
}

/* #skills {
  background-color: var(--panel-bg);
  color: var(--panel-fg);
  padding: var(--panel-side-margin) var(--panel-side-margin) 24px
    var(--panel-side-margin);
  border-radius: 0px 0px 8px 0px;
  width: var(--right-panel-width);
} */

h2 {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.2em;
}

h3 {
  font-size: 1.1em;
}

/* Style for sub h3 headings (e.g. company names) */
h3 div {
  font-weight: 300;
}

/* Style for sub h1 headings (e.g. current title) */
h1 div {
  font-weight: 300;
  font-size: smaller;
}

.Dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: small;
  font-style: italic;
  margin-top: 5px;
}

.Dates span:last-child {
  justify-self: end;
}

#experience {
  flex: 1;
}

.pageBreak {
  page-break-before: always;
}

li:not(:last-child) {
  margin-bottom: 3px;
}

@media print {
  @page {
    size: letter;
    margin: 0.5in;
  }
}

h1 {
  margin-top: 12px;
}

h4 {
  margin-top: 5px;
  margin-bottom: 5px;
}

#skills li {
  background-color: var(--panel-bg);
  color: var(--panel-fg);
  padding: 8px;
  border-radius: 7px;
  margin-right: 5px;
  display: inline;
  list-style-type: none;
  white-space: nowrap;
  font-size: small;
}

#skills ul {
  padding-inline-start: 0px;
  line-height: 3;
}