:root {
    /* Main color scheme */
    /* --background-color: #333; */
    --background-color: #000000;
    --nav-background-color: #4f4f4f;
    --nav-hover-color: #510b68;
    /* Text color scheme */
    --text-color: #000000;
    --link-color: #be00fd;
    --link-hover-color: #bf00ff;
    /* gradient color scheme */
    --grad-color-green: #cbffe3;
    --grad-color-purple: #fbd3ff;
    --grad-color-blue: #d4f8ff;
    --grad-color-yellow: #fffecf;
    --grad-color-red: #ffd5e5;
    /* Font sizes */
    --name-fs: 40px;
    --nav-fs: 35px;
    --xl-fs: 35px;
    --l-fs: 30px;
    --ml-fs: 25px;
    --m-fs: 20px;
    --sm-fs: 15px;
    --s-fs: 10px;
    --xs-fs: 5px;
    --author-font-size: 20px; 
    --sup-author-font-size: 15px; 
    /* Page width */
    --page-width: 1200px; 
    --min-page-width: 790px; 
  }

/*============ main font ============*/
* {
    font-size: 100%;
    font-family: Avenir;
  }

  tt {
    font-size: 85%;
    font-family: "Lucida Console", "Menlo", "Monaco", "Courier", monospace;
  }

/*============ hr ============*/
hr {
    height: 2px; 
    width: 100%; 
    border-width: 10px; 
    background-color: black; 
    border: none;
}

/*============ anchor ============*/
a {
    color: var(--link-color);
    padding: 0px;
    text-decoration: none; /* Remove underline */
}
a:hover {
    color: var(--link-hover-color);
    padding: 0px;
    text-decoration: underline; /* Add underline */
}

/*============ title, authors, affiliations ============*/
.title_text {
    color: var(--text-color);
    font-size: var(--xl-fs);
    font-weight: bold;
    text-align: center;
}

.authors {
    color: var(--text-color);
    font-size: var(--author-font-size);
    text-align: center;
    width: 80%;
    margin: 0% 10%;
}

.affils {
    color: var(--text-color);
    font-size: var(--ms-fs);
    text-align: center;
    width: 60%;
    margin: 0% 20%;
}

/*============ gradient background ============*/
.gradient-bg {
    border-radius: 15rem;
    background: linear-gradient(to Bottom, var(--grad-color-purple) 0%, var(--grad-color-red) 33%, var(--grad-color-blue) 66%, white 100%);
    background: linear-gradient(to Bottom, var(--grad-color-purple) 0%, var(--grad-color-purple) 66%, white 100%);
    background-blend-mode: normal, normal, normal, normal, normal, normal;
    filter: blur(75px);
    -webkit-filter: blur(75px);
    height: 80vh;
    width: 100%;
    position: absolute;
    top: -20vh;
    left: 0;
    z-index: -1;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

/*============ buttons ============*/
/* Style for the button container */
.button-container {
    padding: 10px;
    text-align: center; 
}
.button {
    /* Text */
    color: var(--text-color);
    font-size: var(--m-fs);
    text-decoration: none; 
    text-align: center;
    /* Size */
    width: 100px;
    margin: 10px;
    padding: 15px;
    /* Background */
    background-image: linear-gradient(to left, var(--grad-color-green) 0%, var(--grad-color-blue) 100%);
    /* Border */
    border-radius: 10px;
    border-width: 2px;
    border: solid;
    /* Box shadow */
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    /* Transformation */
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
    /* In line */
    display: inline-block;
  }
.button:hover{
    /* Text */
    color: var(--text-color);
    font-size: var(--m-fs);
    text-decoration: none; 
    text-align: center;
    /* Size */
    width: 100px;
    margin: 10px;
    padding: 15px;
    /* Background */
    background-image: linear-gradient(to left, var(--grad-color-green) 0%, var(--grad-color-blue) 100%);
    /* Border */
    border-radius: 10px;
    border-width: 2px;
    border: solid;
    /* Box shadow */
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    /* Transformation */
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
    /* In line */
    display: inline-block;
    /*==================*/
    /* Things to update */
    /*==================*/
    background-image: linear-gradient(to right, var(--grad-color-green) 0%, var(--grad-color-blue) 100%);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/*============ body ============*/
body {
    backdrop-filter: blur(3px);
    color: var(--text-color);
    margin: 0 auto;
    max-width: var(--page-width);
    padding: 1em 2em 10em; /* [TOP, L+R, Bottom] */
    /* border: solid;
    border-width: 10px;
    border-color: aliceblue; */
  }

/*============ headers ============*/
h1 {
    color: var(--text-color);
    text-align: left;
    font-size: var(--l-fs);
}
  
/*============ paragraph ============*/
p {
    color: var(--text-color);
    text-align: left;
    font-size: var(--m-fs);
}
  
/*============ figures ============*/
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%
}

figcaption {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 78%;
    padding: 5px;
}