/* CSS Reset - Normalize browser defaults */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
  display:block
}
body{
  line-height:1
}
ol,ul{
  list-style:none
}
blockquote,q{
  quotes:none
}
blockquote:before,blockquote:after,q:before,q:after{
  content:'';
  content:none
}
table{
  border-collapse:collapse;
  border-spacing:0
}

:root {
  /* Light theme (default) */
  --text-color: #00000b;
  --nav-link-color: #222;
  --nav-link-hover-color: #000;
  --nav-link-underline: #222;
  --main-content-bg: rgba(255, 255, 255, 0.28);
  --fa-bg: #f0f0f0;
  --fa-color: #333;
  --fa-hover-bg: #333;
  --cv-color: #333;
  --cv-underline: #333;
  --link-color: #333;
  --link-hover-color: #0c173e;
  --h1-border: #00000b;
  --h2-border: lightgray;
  --more-info-border: lightgray;
  --background-bg: transparent;
}

.dark-theme {
  /* Dark theme */
  --text-color: #b2b2b2;
  --nav-link-color: #b2b2b2;
  --nav-link-hover-color: #e5e5e5;
  --nav-link-underline: #e5e5e5;
  --main-content-bg: rgba(25, 25, 25, 0.28);
  --fa-bg: #262626;
  --fa-color: #b2b2b2;
  --fa-hover-bg: #333;
  --cv-color: #b2b2b2;
  --cv-underline: #b2b2b2;
  --link-color: #b2b2b2;
  --link-hover-color: #b2b2b2;
  --h1-border: #b2b2b2;
  --h2-border: #808080;
  --more-info-border: #808080;
  --background-bg: rgb(15, 15, 15);
}

html {
  height: 100%;
  overflow: hidden;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

.background{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--background-bg);
}

body {
  height: 100%;
  width: 100vw;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


.col-2 {
  width: 20%;
  float: left;
}

.col-8 {
  width: 80%;
  float: left;
}

.col-10{
  width: 100%;
  float: left;
}

body {
  font-family: "quatro-slab", monospace;
  font-size: 14px;
  -webkit-font-smoothing: subpixel-antialised;
  line-height: 1.38;
}

nav {
  width: 1200px;
  margin: 0 1rem;
  padding: 2rem 100px 0 100px;
  position: relative;
  box-sizing: border-box;
}

div.all-wrap {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px 0 100px 0;
  white-space: nowrap;
  transition: opacity .2s ease-in;
  transition-delay: .2s;
}

main.wrapper {
  color: var(--text-color);
  width: 100%;
  margin-top: 15px;
  margin-left: 100px;
  position: relative;
  display: inline-block;
  z-index: 1;
  -webkit-transition: margin-left ease-in-out 0.15s;
  transition: margin-left ease-in-out 0.15s;
}

.main-content {
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  background: var(--main-content-bg);
  box-sizing: border-box;
  padding: 2rem;
  margin: 0 1rem;
  position: relative;
  width: calc(100% - 2rem);
  bottom: 0;
}

img {
  max-width: 100%;
}

.img-left{
  float:left;
}

.p-20 {
  display: inline-block;
  padding-top: 20px;
}

main p {
  font-weight: 400;
  vertical-align: text-top;
  white-space: initial;
}

b{
  font-weight: bold;
}

i{
  font-style: italic;
}

.info {
  padding-left: 1rem;
  box-sizing: border-box;
}

.more-info {
  border-top: 2px solid var(--more-info-border);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.wrapper li:before {
  content: "> ";
  font-family: "futura-pt", arial, sans-serif;
}

main h1 {
  font-family: "futura-pt", arial, sans-serif;
  font-size: 1.75em;
  font-weight: 800;
  text-transform: uppercase;
  border-bottom: 4px solid var(--h1-border);
  width: auto;
  margin-bottom: 1rem;
  margin-left: 0;
}

h2 {
  font-family: "futura-pt", arial, sans-serif;
  font-size: 1.4em;
  font-weight: 500;
  border-bottom: 2px solid var(--h2-border);
  width: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.object-shadow {
  width: 80%;
  height: 1rem;
  position: absolute;
  display: none;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0px;
  z-index: -1;
}

nav {
  margin-bottom: 1rem;
}

button{
  background: transparent;
  border: none;
  outline: none;
}

nav a.js-tablinks {
  display: inline-block;
  color: var(--nav-link-color);
  text-transform: uppercase;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  opacity: 0.8;
  -webkit-transition: opacity 0.1s ease-in;
  transition: opacity 0.1s ease-in;
  text-decoration: none;
  background: transparent;
  border: none;
  outline: none;
  margin-right: 0.8rem;
}

nav a.js-tablinks:hover {
  color: var(--nav-link-hover-color);
  opacity: 1;
}

nav a.js-tablinks.active::after,
nav a.js-tablinks::after,
nav a.js-tablinks::before {
  content: "";
  height: 1px;
  width: 0;
  display: block;
  position: absolute;
  background: var(--nav-link-underline);
  -webkit-transition: width 0.1s ease-in;
  transition: width 0.1s ease-in;
}

nav a.js-tablinks:hover::after,
nav a.js-tablinks:hover::before,
nav a.js-tablinks.active::after {
  width: 80%;
}

nav a.js-tablinks.active::after,
nav a.js-tablinks::after {
  bottom: -5px;
  left: 0;
}

nav a.js-tablinks::before {
  top: -5px;
  right: 0;
}

nav a.js-tablinks:first-of-type {
  margin-right: 0.8rem;
}

/* Theme toggle button */
.theme-toggle {
  display: inline-block;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5em;
  color: var(--nav-link-color);
  opacity: 0.8;
  transition: opacity 0.1s ease-in, transform 0.2s ease-in-out;
  padding: 0.2rem 0.5rem;
  vertical-align: middle;
  position: fixed;
  right: calc(1rem + 120px);
  top: 3rem;
  z-index: 100;
}

.theme-toggle:hover {
  opacity: 1;
  transform: rotate(15deg);
}

.theme-toggle:active {
  transform: rotate(30deg) scale(0.95);
}

.theme-toggle i {
  display: block;
}

a.fa {
  text-decoration: none;
  color: var(--fa-color);
  font-size: 1.7em;
  display: inline-block;
  background: var(--fa-bg);
  margin: 0.5rem 0.5rem 0;
  padding: 1.3rem;
  border-radius: 2px;
  width: auto;
  position: relative;
  overflow: hidden;
}

a.fa:first-of-type {
  margin-left: 0;
}

.contact .with-icon {
  display: none;
}

a.fa::after {
  content: "";
  width: 0;
  height: 100%;
  background: var(--fa-hover-bg);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

a.fa:hover::after {
  width: 100%;
}

a.fa:active::after {
  width: 4%;
  height: 4%;
  top: 48%;
}

a.fa:hover::before {
  color: white;
}

a.fa:active::before {
  color: var(--fa-color);
}

.fa:before {
  position: relative;
  z-index: 2;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}

a.fa::after{
  background: #00bdbf;
}

a.fa:active::before {
  color: #00bdbf;
}

a.cv {
  color: var(--cv-color);
  position: relative;
  text-decoration: none;
  font-weight: bold;
}

a.cv:after {
  content: "";
  width: 0%;
  display: block;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -3px;
  background-color: var(--cv-underline);
  -webkit-transition: width 0.1s ease-in-out;
  transition: width 0.1s ease-in-out;
}

a.cv:hover {
  color: #00bdbf;
  text-decoration: underline;
}

a.cv:hover::after {
  width: 0%;
}

.text-green{
  color: #00bdbf;
}

a,
a:visited{
  color: var(--link-color);
}

a.fa-key{
  color: var(--link-color);
}

a:hover{
  color: var(--link-hover-color);
}

/* Mobile styles */
@media screen and (max-width: 800px){
    /* Hide navigation */
    nav{
        display: none;
    }

    /* Layout adjustments */
    div.all-wrap{
        width: 100%;
        padding: 2rem 1rem;
        box-sizing: border-box;
        white-space: normal;
    }

    main.wrapper{
        margin-left: 0;
        width: 100%;
        display: block;
    }

    .main-content{
        margin: 0;
        width: 100%;
    }

    /* Make dark theme more transparent on mobile */
    .dark-theme .main-content {
        background: rgba(25, 25, 25, 0.15);
    }

    /* Mobile theme toggle - fixed top right */
    .theme-toggle {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 1000 !important;
        background: var(--main-content-bg) !important;
        padding: 0.5rem !important;
        border-radius: 50% !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
        margin: 0 !important;
    }

    /* Disable animations on mobile */
    .js-tabcontent {
        -webkit-animation: none;
        animation: none;
        opacity: 1;
    }

    /* Show mobile content */
    .show-mobile{
        display: block !important;
    }

    /* Image and info adjustments */
    .col-2 {
        width: 50%;
        max-width: 200px;
        margin: 0 auto;
        float: none;
    }

    .col-8 {
        width: 100%;
        float: none;
    }

    .info{
        padding-left: 0;
        margin-top: 1rem;
    }
}

p.more-info {
    width: 100%;
}

canvas{
  display: none;
}
.back_mob{
    display: none;
    position: fixed;
    background-image: url('./back.png');
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: -1;
    background-color: var(--background-bg);
    background-blend-mode: overlay;
}

/* CSS Fading effect */
.js-tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.main-content-text {
    padding: 0 15px 15px;
    text-align: left;
}

#copyright {
    position: fixed;
    bottom:0%;
    width:100%;
    opacity: 0.4;
}

ol.item-list {
  white-space: normal;
  list-style: none;
  counter-reset: list-counter 2;
}

.item-list li {
  counter-increment: list-counter -1;
  list-style-position: inside;
}

.item-list li:not(:last-child) {
  counter-increment: list-counter -1;
  margin-bottom: 1em;
}

.item-list.journals li:before {
  content: "J" counter(list-counter);
  font-family: inherit;
  font-weight: 600;
}

.item-list.conferences li:before {
  content: "C" counter(list-counter);
  font-family: inherit;
  font-weight: 600;
}

.item-list.archives li:before {
  content: "O" counter(list-counter);
  font-family: inherit;
  font-weight: 600;
}

.item-list.magazines li:before {
  content: "M" counter(list-counter);
  font-family: inherit;
  font-weight: 600;
}

.item-list.theses li:before {
  content: "T" counter(list-counter);
  font-family: inherit;
  font-weight: 600;
}

.item-list.drafts li:before {
  content: "D" counter(list-counter);
  font-family: inherit;
  font-weight: 600;
}

.item-list li span {
  vertical-align: left;
  display: inline-table;
  width: 92%;
  padding-left: 10px;
}

.note {
  font-size: 0.8em;
  /* margin-left: 1em; */
}