/* From Uiverse.io by Praashoo7 */ 
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .main, nav {
    background-color: white;
    padding: 1em;
    padding-bottom: 1.1em;
    border-radius: 15px;
    margin: 1em;
        padding: 20px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        display: block;
         border-radius: 15px;
  }
  
  nav{
    z-index: 8;
  }
  
  .menu{
    position: absolute;
    right: 0px;
    padding: 10px;
  }
  
  .center{
    padding: auto;
    position: absolute;
    top: 30%;
    left: 15%;
    margin: auto;
    width: 70%;
    background-color: white;
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 15px;
    border: 2px solid black;
  }
  
  header, footer{
    display: grid;
    gap: 1px;
    padding: 1px;
    background-color: #031546;
    color: #dde64c;
  }
  
  footer{
    clear: both;
    position: relative;
    height: 160px;
    margin-top: -160px;
  }
  
  button{
    cursor:pointer;
  }
  nav>button>a{
    text-decoration: none;
    color: #031546;
  }
  a{
    text-decoration: none;
    color: #dde64c;
  }
  .heading {
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    align-self: center;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    align-items:flex-start;
  }
  
  .logo{
    width: 70px;
    height: 45px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
  }
  
  .artist {
    font-size: 0.6em;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
  }
  
  .menu{
    width: 70px;
    height: 45px;
    float: right; 
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
  }
  nav{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 50%;
    display: flex;
    flex-direction: column;
  }
  
  button{
    background-color: yellow;
    color: 031546;
    border: 0px;
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    padding-left: 2px;
    margin: 5px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 0.2em;
    display: block;
    width: 170px;
    margin-top: auto;
  }
  
  footer{
    margin-top: auto;
  }
  .list1{
    grid-column-start: 1;
    
  }
  .list2{
    grid-column-start: 2;
  }
  @keyframes move6 {
    0% {
      height: 0.2em;
    }
  
    25% {
      height: 0.7em;
    }
  
    50% {
      height: 1.5em;
    }
  
    100% {
      height: 0.2em;
    }
  }
  
  div>ul>li::marker{
    content: '📍';
  }
  footer>ul>li::marker{
    content: ' ';
  }
  
  u{
    font-weight: lighter;
    font-size: 18px;
  }
  td, tr  th{
  border: 1.3px solid black;
  
  }
  
  td{
  padding: 20px;
  }
  
  #result{
  width: 19cm;
  height: 27.7cm;
  border: 2px solid black;
  }
  
  th{
  transform: rotate(-90deg);
  }
  
  #result {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  page-break-inside: avoid;
  }
  
  table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8em;
  }
  
  th, td {
  padding: 5px;
  }
  th{
  height: 7em;
  }
  
  table {
  table-layout: fixed;
  padding: 5px;
  height: auto;
  }
  
  th, td {
  width: auto;
  }
  
  .grade{
  word-wrap: break-word;
  }
  
  #identity{
  display: flex;
  align-items: center;
  }
  .logo{
  height: 50px;
  width:90px;
  padding: 5px;
  }
  
  #border{
  border: 6px solid black;
  margin: 5px;
  padding: 4px;
  height: 27.7cm;
  width: 19cm;
  }
  #identity>h1{
  padding: 0px;
  margin: 0px;
  }
  #tagline{
  display: flex;
  padding: 0px;
  margin: 0px;
  align-items: center;
  }
  
  #remarks{
    display: grid;
    gap: 1px;
    height: 6cm;
  }
  
  #ptag{
    grid-column: 1/2;
    grid-row: 1/2;
  }
  
  #rating{
    grid-column: 2/3;
    grid-row: 1/ span 2;
    max-height: 18px;
  }
  #rating>td, #rating>th{
  margin: 0px;
  float: right;
  white-space:nowrap
  }
  
  #head-teacher {
    grid-column: 1/2;
    grid-row: 2/3;
    position: absolute;
    top: 25cm;
  }
  
  #head-teacher > b {
  font-size: 18px;
  font-weight: bold;
  
  }
  
  #img {
  height: 220px;
  position: absolute;
  top: 23.5cm;
  }
  
  #domain, #marks{
  font-size: 20px;
  }
  
  /*Input CSS*/
  
  /* From Uiverse.io by Allyhere */ 
  .input-container {
    --c-text: rgb(50, 50, 80);
    --c-bg: rgb(252, 252, 252);
    --c-outline: rgb(55, 45 , 190);
    display: grid;
    gap: 1ch;
    position: relative;
    max-width: 190px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    z-index: 1;
  }
  
  .input-field {
    padding: 0.5em 0.75em;
    border-radius: 0.2em;
    border: 1px solid var(--c-border, currentColor);
    color: black;
    font-size: 1rem;
    letter-spacing: 0.1ch;
    width: 100%;
  }
  
  .input-field:not(:placeholder-shown) + .input-label {
    transform: translateY(-220%);
    opacity: 1;
  }
  
  .input-field:invalid {
    --c-border: rgb(230, 85, 60);
    --c-text: rgb(230, 85, 60);
    --c-outline: rgb(230, 85, 60);
  }
  
  .input-field:is(:disabled, :read-only) {
    --c-border: rgb(150, 150, 150);
    --c-text: rgb(170, 170, 170);
  }
  
  .input-field:is(:focus, :focus-visible) {
    outline: 2px solid var(--c-outline);
    outline-offset: 2px;
  }
  
  .input-label {
    --timing: 200ms ease-in;
    position: absolute;
    left: 0;
    top: 50%;
    transition: transform var(--timing),
      opacity var(--timing);
    transform: translateY(-50%);
    opacity: 0;
    color: var(--c-text);
    font-weight: 500;
  }
  /*Input CSS*/
  
  /*Loaders*/
  /* From Uiverse.io by Shoh2008 */ 
  .loader {
    position: relative;
    height: 200px;
    width: 200px;
    margin-top: 0px;
    border-bottom: 3px solid #031546;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-animation: drawLine 4s linear infinite;
            animation: drawLine 4s linear infinite;
  }
  
  .loader:before {
    content: "";
    position: absolute;
    left: calc(100% + 14px);
    bottom: -6px;
    width: 16px;
    height: 100px;
    border-radius: 20px 20px 50px 50px;
    background-repeat: no-repeat;
    background-image: linear-gradient(#031546 6px, transparent 0),
      linear-gradient(45deg, rgba(0, 0, 0, 0.02) 49%, white 51%),
      linear-gradient(315deg, rgba(0, 0, 0, 0.02) 49%, white 51%),
      linear-gradient( to bottom, #ffffff 10%, #ff3d00 10%, #ff3d00 90%, #ffffff 90% );
    background-size: 3px 3px, 8px 8px, 8px 8px, 16px 88px;
    background-position: center bottom, left 88px, right 88px, left top;
    -webkit-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
            transform: rotate(25deg);
    -webkit-animation: pencilRot 4s linear infinite;
            animation: pencilRot 4s linear infinite;
  }
  
  @-webkit-keyframes drawLine {
    0%, 100% {
      width: 0px
    }
  
    45%, 55% {
      width: 200px
    }
  }
  
  @keyframes drawLine {
    0%, 100% {
      width: 0px
    }
  
    45%, 55% {
      width: 200px
    }
  }
  
  @-webkit-keyframes pencilRot {
    0%, 45% {
      bottom: -6px;
      left: calc(100% + 14px);
      -webkit-transform: rotate(25deg);
              transform: rotate(25deg);
    }
  
    55%,
    100% {
      bottom: -12px;
      left: calc(100% + 16px);
      -webkit-transform: rotate(220deg);
              transform: rotate(220deg);
    }
  }
  
  @keyframes pencilRot {
    0%, 45% {
      bottom: -6px;
      left: calc(100% + 14px);
      -webkit-transform: rotate(25deg);
              transform: rotate(25deg);
    }
  
    55%,
    100% {
      bottom: -12px;
      left: calc(100% + 16px);
      -webkit-transform: rotate(220deg);
              transform: rotate(220deg);
    }
  }
  /*Loaders End*/
  
  #dis{
    position: absolute;
    top: 10%;
    right: 25%;
    z-index: 5;
    width: 50%;
  }
  
  .marquee {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: #fefefe;
    color: #333;
  }
  
  /*.marquee*/ p {
    /*position: fixed;
    top: 25%;
    left: 35%;*/
    width: 300px;
    height: 100px;
    margin: 0;
    line-height: 50px;
    text-align: center;
    word-wrap: break-word;
    margin: auto;
   /* -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 20s linear infinite;*/
  }
  
  @-moz-keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%);
    }
  }
  
  @-webkit-keyframes scroll-left {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
  }
  
  @keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
  }