body {
  /* background-size: cover; */
  background-color: white;
   /* height: 100vh;
   background:linear-gradient(to bottom, white , rgb(136, 152, 255)); */
  /*-webkit-animation: AnimationName 25s ease infinite;*/
}
body {
  /* background-size: cover; */
  background-color: white;
   /* height: 100vh;
   background:linear-gradient(to bottom, white , rgb(136, 152, 255)); */
  /*-webkit-animation: AnimationName 25s ease infinite;*/
}
@font-face{
    font-family: 'Cochin';
        src: url(font/'Cochin.ttf)
        format('truetype');
}
@font-face{
    font-family: 'Cochin LT';
        src: url(font/'Cochin_LT_Italic.ttf)
        format('truetype');
}
@font-face{
    font-family: 'Cochin';
        src: url(font/'Cochin_LT_Bold.ttf)
        format('truetype');
}
@font-face{
    font-family: 'LibreBaskerville';
        src: url(font/'LibreBarskerville-Bold.ttf)
        format('truetype');
}
@font-face{
    font-family: 'LibreBaskerville';
        src: url(font/'LibreBarskerville-Italic.ttf)
        format('truetype');
}
@font-face{
    font-family: 'LibreBaskerville';
        src: url(font/'LibreBarskerville-Regular.ttf)
        format('truetype');
}

.abstract h1 {
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-size: 50pt;
    line-height: 56pt;
    text-align: center;
}

.abstract h3 {
    font-family: 'Cochin';
    font-size: 22pt;
    line-height: 25pt;
    text-align: center;
    font-weight: normal;
}

.abstract h2 {
    font-family: 'Cochin';
    font-style: Bold;
    font-size: 45pt;
    line-height: 52pt;
    text-align: center;
}

.abstract h4 {
    font-family: 'Cochin';
    font-style: Bold;
    font-size: 30pt;
    line-height: 52pt;
    text-align: center;
}

.abstract h5 {
    font-family: 'Cochin LT';
    font-style: Italic;
    font-size: 20pt;
    line-height: 52pt;
    text-align: center;
}




@media only screen 
  and (min-device-width: 5px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {





.abstract h1 {
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-size: 30pt;
    line-height: 36pt;
    text-align: center;
    width: 100%;
}

.abstract h3 {
    font-family: 'Cochin';
    font-size: 22pt;
    line-height: 25pt;
    text-align: center;
    font-weight: normal;
    width: 100%;
}

.abstract h2 {
    font-family: 'Cochin';
    font-style: Bold;
    font-size: 45pt;
    line-height: 52pt;
    text-align: center;
        width: 100%;

}

.abstract h4 {
    font-family: 'Cochin';
    font-style: Bold;
    font-size: 30pt;
    line-height: 52pt;
    text-align: center;
        width: 100%;

}

.abstract h5 {
    font-family: 'Cochin LT';
    font-style: Italic;
    font-size: 20pt;
    line-height: 52pt;
    text-align: center;
            width: 100%;

}
}

@media screen and (min-width: 800px)
.frame.frame-t {
    height: 2vw;
}
.frame.frame-t {
    top: 0;
    width: 100%;
    height: 4vw;
    background-image: linear-gradient(green, #B5E268, white);
}
.frame {
    position: fixed;
    z-index: 10000;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
}
.abstract p {
    font-family: 'Cochin';
    font-size: 20pt;
    line-height: 23pt;
    text-align: left;
    width: 66%;
    margin-left: 16.5%;
}









@media screen and (min-width: 800px)
.frame.frame-r {
    width: 2vw;
}
.frame.frame-r {
    top: 0;
    right: 0;
    width: 4vw;
    height: 100vh;
    background-image: linear-gradient(-90deg, green, #B5E268, white);
}

.frame {
    position: fixed;
    z-index: 10000;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
}

@media screen and (min-width: 800px)
.frame.frame-b {
    height: 2vw;
}
.frame.frame-b {
    bottom: 0;
    width: 100%;
    height: 4vw;
    background-image: linear-gradient(180deg, white, #B5E268, green);
}
.frame {
    position: fixed;
    z-index: 10000;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
}
@media screen and (min-width: 800px)
.frame.frame-l {
    width: 2vw;
}
.frame.frame-l {
    top: 0;
    left: 0;
    width: 4vw;
    height: 100vh;
    background-image: linear-gradient(-90deg, white, #B5E268, green);
}
.frame {
    position: fixed;
    z-index: 10000;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
}


@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {
      
.frame.frame-t {
    height: 3%;
}
.frame.frame-t {
    top: 0;
    width: 100%;
    height: 3%;
    background-image: linear-gradient(green, #B5E268, white);
}
.frame {
    position: fixed;
    z-index: 10000;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
}
.frame.frame-r {
    width: 5%;
}
.frame.frame-r {
    top: 0;
    right: 0;
    width: 5%;
    height: 100%;
    background-image: linear-gradient(-90deg, green, #B5E268, white);
}

.frame {
    position: fixed;
    z-index: 10000;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
}

.frame.frame-b {
    height: 3%;
}
.frame.frame-b {
    bottom: 0;
    width: 100%;
    height: 3%;
    background-image: linear-gradient(180deg, white, #B5E268, green);
}
.frame {
    position: fixed;
    z-index: 10000;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
}
.frame.frame-l {
    width: 5%;
}
.frame.frame-l {
    top: 0;
    left: 0;
    width: 5%;
    height: 100%;
    background-image: linear-gradient(-90deg, white, #B5E268, green);
}
.frame {
    position: fixed;
    z-index: 10000;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
}
}
















#circle{
mix-blend-mode: exclusion;
filter: blur(20px);
     height:150px;
     width:150px;
     border-radius: 200px;
     background:white;
     position: absolute;
     top: 81%;
     left: 33%;
     z-index: 30;
     transform: translate(-50%,-50%);
}
        
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  .abstract p {
    text-align: left;
    width: 90%;
    margin-left: 2.5%;  
      }
      .rounded-corners-gradient-borders {
  width: 300px;
  height: 80px;
  border: double 4px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
}