@font-face {
  font-family: 'G7 Segment';
  src: url('digital-7 (mono).ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


:root {
  --primary-color-light: #ffffff00; /* Light mode primary color */
  --primary-color-dark: #ffffff00; /* Dark mode primary color */
  --background-color-light: #f5f5f500; /* Light mode background color */
  --background-color-dark: #f5f5f500; /* Dark mode background color */
  --text-color-light: #333333; /* Light mode text color */
  --text-color-dark: #333333; /* Dark mode text color */
  --hyperlink-color-light: #1772d0; /* Light mode hyperlink color */
  --hyperlink-color-dark: #1772d0; /* Dark mode hyperlink color */
  --hyperlink-focus-color-light: #f09228; /* Hyperlink focus color */
  --hyperlink-focus-color-dark: #f09228; /* Hyperlink focus color */
  /* Add more color variables as needed */
  --var-sidebar-width: 0px; /* 130px; */
	--timer-color-light: #1877F2;
	--timer-color-dark: #1877F2;
	/* --timer-color-dark: orange; */
}

/* For devices with light mode enabled */
@media (prefers-color-scheme: light) {
  body {
    --background-color: var(--background-color-light);
    --text-color: var(--text-color-light);
    --color: var(--primary-color-light);
    --hyperlink-color: var(--hyperlink-color-light);
    --hyperlink-focus-color: var(--hyperlink-focus-color-light);
	  --timer-color: var(--timer-color-light);
  }
}

/* For devices with dark mode enabled */
@media (prefers-color-scheme: dark) {
  body {
    --background-color: var(--background-color-dark);
    --text-color: var(--text-color-dark);
    --color: var(--primary-color-dark);
    --hyperlink-color: var(--hyperlink-color-dark);
    --hyperlink-focus-color: var(--hyperlink-focus-color-dark);
	  --timer-color: var(--timer-color-dark);
  }
}


/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



body,
td,
th,
tr,
p,
a {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px
}

.spaced {
  line-height: 1;
}

body,
.container,
.sidebar,
.sidebar ul,
.content {
  color: var(--text-color);
  background-color: var(--background-color);
}

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

a:focus,
a:hover {
  color: #f09228;
  text-decoration: none;
}

strong {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
}

heading {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 22px;
}

papertitle {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700
}

authors {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400
}

avenue {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
}

name {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 32px;
}

.one {
  width: 160px;
  height: 160px;
  position: relative;
}

.two {
  width: 160px;
  height: 160px;
  position: absolute;
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
}

.fade {
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
}

span.highlight {
  background-color: #ffffd000;
}

/* Style for the sidebar */
.sidebar {
  width: var(--var-sidebar-width);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  /* background-color: #f4f4f4; */
  /* padding-top: 7.5%; */
  /* padding-right: 10px; */
}
.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: right;
}
.sidebar li {
  padding: 4px;
}
.sidebar li a {
  display: block;
  /* padding: 10px; */
  text-decoration: none;
  /* color: #333; */
  /* transition: background-color 0.3s ease;  */
  background-image: linear-gradient(to left, transparent 50%, #1f1d1d 50%);
  background-size: 200% 100%; /* Twice the width to cover the entire area */
  background-position: 90%; /* Initially positioned to the right */
  transition: background-position 0.2s ease; /* Add transition effect */
}

.sidebar li a:focus,
.sidebar li a:hover {
  color: var(--hyperlink-focus-color);
  background-color: rgb(72, 70, 70);
  text-decoration: none;
  background-position: 0px;
}

/* Style for the main content */
.content {
  margin-left: var(--var-sidebar-width); /* Adjust this value to match the width of the sidebar */
  padding: 0px;
	padding: 0px;
}

.container {
  display: flex; /* Use flexbox for layout */
}

.timer {
	font-family: 'Segment7Standard', sans-serif;
	color: var(--timer-color);
	font-weight: normal;
	display: inline-block;
}

.timer-row {
	display: flex;
	align-items: center;
	gap: 0;
	line-height: 1;
}

.timer-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* .timer-value {
	font-family: 'Segment7Standard', monospace;
	font-size: 72px;
	line-height: 1;
	margin: 0;
	padding: 0;
} */
 
.timer-value {
  font-family: 'G7 Segment', monospace;
  font-size: 72px;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.timer-colon {
	font-family: 'G7 Segment', sans-serif;
	font-size: 72px;
	line-height: 1;
  margin: 0 4px;
  padding: 0;
  padding-bottom: 24px;
  display: inline-block;
  opacity: 1;
  transition: opacity 0.08s linear;
}

/* Blink utility used by the countdown script */
.blink {
  /* legacy; not used for synchronized blink */
  animation: blink 1s steps(1,end) infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Synchronized visibility utility: hide the colon when present */
.timer-colon.hidden {
  opacity: 0 !important;
}

.timer-label {
	font-family: 'Lato', Verdana, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1;
	margin-top: 8px;
	font-weight: bold;
}

/* #sidebar {
  width: 250px; /* Set a fixed width for the sidebar * /
  background-color: #f4f4f4; /* Optional: background color for visibility * /
  padding: 15px; /* Optional: padding for aesthetics * /
}

.content {
  flex: 1; /* Allow the content to take the remaining space * /
  padding: 15px; /* Optional: padding for the content area * /
} */