style.css

/* Homepage Style */

/* Body */
body {
    background: #e3e5e8;
    color: #ffffff;
    font-family: "Optima";
    font-weight: 300;
    font-size: 14pt;
}

body h1 {
    text-align: center;
    font-weight: bold;
    font-size: 50pt;
    color: #1772d0;
}

body h2{
    color: brown;
    font-weight: bold;
   
}

body h3{
    font-weight: bold;
}

body h4{
    font-weight: bold;
}

body table .gridtable{
    table-layout: fixed;
    width: 100%;
}

@media screen and (max-width: 1200px){
body .grid {
    font-weight: 100;
    font-size: 10pt;
    margin: 18pt;
    padding: 20pt;
    border: 1pt hidden #000;
    text-align: center;
    color: #000000;
    background: #ffffff;
    box-shadow: 0px 0px 10px #999;
    border-radius: 15px;
    width: 28vw;
    height: 30vw;
}

body .grid-latest {
    font-weight: 100;
    font-size: 10pt;
    margin: 18pt;
    padding: 10pt;
    border: 1pt hidden #000;
    text-align: center;
    color: #000000;
    background: #ffffff;
    box-shadow: 0px 0px 30px green;
    border-radius: 15px;
    width: 28vw;
    height: 30vw;
}}

@media screen and (min-width: 1200px){
    body .grid {
        font-weight: 100;
        font-size: 10pt;
        margin: 18pt;
        padding: 20pt;
        border: 1pt hidden #000;
        text-align: center;
        color: #000000;
        background: #ffffff;
        box-shadow: 0px 0px 10px #999;
        border-radius: 15px;
        width: 28vw;
        height: 25vw;
    }
    
    body .grid-latest {
        font-weight: 100;
        font-size: 10pt;
        margin: 18pt;
        padding: 10pt;
        border: 1pt hidden #000;
        text-align: center;
        color: #000000;
        background: #ffffff;
        box-shadow: 0px 0px 30px green;
        border-radius: 15px;
        width: 28vw;
        height: 25vw;
    }}

body .grid:hover{
    box-shadow: 0px 0px 30px #1772d0;
}

body .grid-latest:hover{
    box-shadow: 0px 0px 30px #1772d0;
}

body #cover {
    width: 100%;
    /* height: 100%; */
    object-fit: contain;
}

body video {
    width: 100%;
    /* height: 100%; */
    object-fit: contain;
   
}

body #news_pic {
    position: relative;
    margin: 2px;
    height: 60px;
    top: 10px;
    bottom: 10px;
    border-radius: 20px;
  }

.instructorphoto img {
    width: 120px;
    border-radius: 120px;
    margin-bottom: 10px;
  }
.instructor {
    display: inline-block;
    width: 130px;
    text-align: center;
    margin-right: 28px;
  }


/* Headings */
h1 {
    font-size: 30pt;
}

h2 {
    font-size: 22pt;
}

h3 {
    font-size: 14pt;
}

h4 {
    font-size: 13pt;
}

/* Hyperlinks */
a {
    text-decoration: none;
}

a:link {
    color: #1772d0;
}

a:visited {
    color: #1772d0;
}

a:active {
    color: red;
    
}

a:hover {
    color: #f09228;
}

pre {
    background: #fcfcfc;
    border: 0;
    font-size: 12pt;
    margin: 5pt auto;
}

.xyz
        {
        cursor: not-allowed;
        pointer-events: none;
        color: #c0c0c0;
        background-color: #ffffff;
        }

/* Container */
.container {
    width: 768pt;
    min-height: 100pt;
    margin: 15pt auto;
    padding: 20pt;
    border: 1pt hidden #000;
    text-align: justify;
    color: #000000;
    background: #ffffff;
    box-shadow: 0px 0px 10px #999;
    border-radius: 15px;
}

.container .title {
    text-align: center;
    font-size: 22pt;
    margin: 5pt auto;
}

.container .author {
    text-align: center;
    font-size: 16pt;
    margin: 20pt auto;
}

.container .institution {
    text-align: center;
    font-size: 16pt;
    margin: 20pt auto;
}

#demo {
    text-align: center;
    font-size: 36pt;
    color: green;
    font-weight: 900;
    margin: 5pt auto;
    border-radius: 10px;
    border-color: #999;
    border-style: dashed;
    width: 50%;

}

.container .link {
    text-align: center;
    font-size: 16pt;
    margin: 20pt auto;
}

.container .teaser {
    text-align: center;
}

.container .teaser img {
    text-align: center;
    margin: 20pt auto;
    width: 95%;
}

.container .body {
    text-align: justify;
    font-size: 14pt;
    margin: 20pt auto;
    margin-left: 30px;
}

.container .bibtex {
    text-align: left;
    font-size: 22pt;
    margin: 5pt auto;
}

.container .ref {
    text-align: left;
    font-size: 18pt;
    font-weight: bold;
    margin: 15pt auto;
}

.container .citation {
    margin: 8pt auto;
    font-size: 14pt;
    clear: both;
}

.container .citation img {
    float: left;
    margin: 0 8pt 8pt 0; /*top right bottom left*/
    width: 120pt;
}

/* Homepage */
/* Followings can be removed for single project page. */
.homepage {
    width: 768pt;
    min-height: 100pt;
    margin: 15pt auto;
    padding: 20pt;
    border: 1pt hidden #000;
    text-align: justify;
    color: #000000;
    background: #ffffff;
}

.homepage .header {
    margin-top: 30pt;
    margin-bottom: 60pt;
    margin-right: 70pt;
    font-size: 28pt;
    text-align: center;
}

.homepage .header img {
    height: 80pt;
    float: left;
    object-fit: cover;
    margin-left: 20pt;
}

.homepage .section {
    text-align: left;
    font-size: 25pt;
    font-weight: bolder;
    margin: 50pt 20pt 20pt 20pt; /*top right bottom left*/
}

.homepage .project {
    height: 130pt;
    outline: thin dotted #666666;
    margin: 10pt 20pt 10pt 20pt; /*top right bottom left*/
}

.homepage .project .image {
    height: 120pt;
    width: 160pt;
    float: left;
    text-align: center;
    vertical-align: top;
}

.homepage .project .image img {
    height: 120pt;
    width: 160pt;
    object-fit: cover;
    border-radius: 6pt;
    box-shadow: 1pt 1pt 2pt #888888;
    -moz-box-shadow: 1pt 1pt 2pt #888888;
    -webkit-box-shadow: 1pt 1pt 2pt #888888;
    margin: 5pt;
}

.homepage .project .info {
    font-size: 16pt;
    text-align: left;
    margin: 10pt 20pt 0 180pt; /*top right bottom left*/
}

.homepage .avatar {
    margin: -10pt 20pt 320pt 0pt; /*top right bottom left*/
}

.homepage .avatar table {
    float: left;
    width: auto;
    height: auto;
    margin: 10pt auto;
    text-align: center;
    font-size: 16pt;
    border-collapse: separate;
    border-spacing: 20pt 10pt;
}

.homepage .avatar img {
    height: 100pt;
    width: 100pt;
    object-fit: cover;
}

.book-container {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
  }
  
  @keyframes initAnimation {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-30deg);
    }
  }
  
  .book {
    width: 200px;
    height: 300px;
    position: relative;
    margin-left: 50px;
    margin-right: 50px;
    transform-style: preserve-3d;
    transform: rotateY(-30deg);
    transition: 1s ease;
    animation: 1s ease 0s 1 initAnimation;
  }
  
  .book:hover {
    transform: rotateY(0deg);
  }
  
  .book > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
    width: 200px;
    height: 300px;
    transform: translateZ(25px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: 5px 5px 20px #666;
  }
  
  .book::before {
    position: absolute;
    content: ' ';
    background-color: blue;
    left: 0;
    top: 3px;
    width: 48px;
    height: 294px;
    transform: translateX(172px) rotateY(90deg);
    background: linear-gradient(90deg, 
      #fff 0%,
      #f9f9f9 5%,
      #fff 10%,
      #f9f9f9 15%,
      #fff 20%,
      #f9f9f9 25%,
      #fff 30%,
      #f9f9f9 35%,
      #fff 40%,
      #f9f9f9 45%,
      #fff 50%,
      #f9f9f9 55%,
      #fff 60%,
      #f9f9f9 65%,
      #fff 70%,
      #f9f9f9 75%,
      #fff 80%,
      #f9f9f9 85%,
      #fff 90%,
      #f9f9f9 95%,
      #fff 100%
      );
  }
  
  .book::after {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 200px;
    height: 300px;
    transform: translateZ(-25px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: -10px 0 50px 10px #666;
  }