@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Figtree:ital,wght@0,300..900;1,300..900&family=Golos+Text:wght@400..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

.noto-sans-display-450 {
  font-family: "Noto Sans Display", serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.noto-sans-display-200 {
  font-family: "Noto Sans Display", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.noto-sans-jp-450 {
  font-family: "Noto Sans JP";
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
}

.noto-sans-jp-550 {
  font-family: "Noto Sans JP";
  font-optical-sizing: auto;
  font-weight: 550;
  font-style: normal;
}

.archivo-narrow-500 {
  font-family: "Archivo Narrow", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 115;
}

html {
  overflow-x: hidden !important;
  width:100vw;
  -webkit-cursor-visibility: hidden !important;
}

body{
  overflow-x: hidden !important;
}

a {
  text-decoration: none;
}

*:hover{
  cursor:none !important;
}

*:focus{
  cursor:none !important;
}

a:focus{
  outline:none;
  border:none;
}

@media only screen and (min-width : 768px) {
  html{
    cursor:none !important;
  }

  *{
    cursor: none !important;
  }
}

.big{
  width: 25px;
  height: 25px;
  background-color: #41465071;
  border-color: #000;
  border-radius: 50%;
  margin-bottom: 20rem;
  /* animation-name: stretch;
            animation-duration: 2.0s;
            animation-timing-function: ease-out;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-play-state: running;
            */
  z-index: 5000;
  position: fixed;
  pointer-events:none;
}

/*   
@keyframes stretch {
            0% {
               
                opacity: 0.2;
                background-color: green;
                border-radius: 100%;
            }
  
            50% {
                background-color: orange;
            }
  
            100% {
                //transform: scale(2.0);
                background-color: red;
            }
        } */

:root {
  --navbar-bg-color: hsl(0, 0%, 100%);
  /*
  --navbar-text-color: hsl(0, 0%, 85%);
  --navbar-text-color-focus: white;
  --navbar-bg-contrast: hsl(204, 58%, 33%);
  */
  --navbar-height: 64px;
  --navbar-text-color: #000000;
  --navbar-text-color-focus: rgb(0, 0, 0);
  /* --navbar-bg-contrast: hsl(0, 0%, 15%); */
}

header{
  width:100vw;
}

body {
  width:100vw !important;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgb(0, 0, 0);
  text-align: left;
  background-color: #ffffff;
  overflow-x: hidden;
  /*display: grid;*/
  grid-gap: 10px;
}

.inline-link{
  color: #d0d0d0;
  text-decoration: none;
  transition: 0.2s;
}

.navbar-container{
  display: flex;
  justify-content: space-between;
  height: 100%;
  width:99.9vw !important;
  align-items: center;
}

nav a:hover{
  text-decoration: none !important;
}

nav a{
  font-family: 'Kanit-elight';
}

#navbar {
  /* --navbar-height: 64px; */
  position: fixed;
  height: var(--navbar-height);
  background-color: var(--navbar-bg-color);
  left: 0;
  right: 0;
  z-index:20;
}

.splash-div-compressed{
  margin-top:0px;
  padding-top:0x;
  width:100vw;
  height: calc(100vh - 100px);
  /* position: relative; */
  /* top:0px; */
  background-attachment: fixed;
  background-size: contain;
  background:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('/static/img/hypr_temp_file_compressed.jpg') no-repeat top center fixed;
}

.splash-div{
  margin-top:0px;
  padding-top:0px;
  width:100vw;
  height: calc(100vh - 100px);
  /* position: relative; */
  /* top:0px; */
  background-attachment: fixed;
  background-size: contain;
  background:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('/static/img/hypr_temp_file.jpg') no-repeat top center fixed;
}

.err-div > .splash-div-compressed{
  /* margin-top:-64px;
  padding-top:64px; */
  width:100vw;
  height:100vh;
  position: relative;
  top:0px;
  background-attachment: fixed;
  background-size: contain;
  background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/static/img/hypr_temp_file_compressed.jpg') no-repeat top center fixed;
}

.err-div .splash-div{
  /* margin-top:-64px;
  padding-top:64px; */
  width:100vw;
  height:100vh;
  position: relative;
  top:0px;
  background-attachment: fixed;
  background-size: contain;
  background:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/static/img/hypr_temp_file.jpg') no-repeat top center fixed;
}

.splash-pad{
  padding:5%;
}

.text-left{
  text-align:left !important;
}

@media only screen and (max-width : 767px) {
  .footer{
    margin-top:4%;
  }

  .indx-about-me .btn1{
    margin-bottom:10px;
  }

  .cursor{
    display:none !important;
    visibility:hidden !important;
    transition: 0.2s;
    cursor:none !important;
  }

  .social-links a{
    font-size:20px !important;
  }
}

.row{
  margin-left:0px;
  margin-right:0px;
}

.splash-presence:hover{
  color: #d0d0d0;
  text-decoration: none;
}

.splash-presence{
  color: #fff;
  transition: 0.2s;
  border:1px solid #d0d0d0;
  padding-top:20px;
  padding-bottom:15px;
  padding-right:3%;
  padding-left:3%;
  vertical-align:middle !important;
  white-space:nowrap;
  display: inline-block;
}

.splash-presence text {
  white-space:nowrap;
  vertical-align:middle !important;
}

.presence-indicator{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: green;
  display: inline-block;
  white-space:nowrap !important;
}

.splash-head h1{
  font-size: 400%;
}

.splash-head p{
  font-weight: 400;
  color: white;
}

.social-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  -webkit-transform: translate(-50%, -50%);
  min-width: 100vw;
}

.social-links span{
  text-align: center;
}

.social-links{
  position: absolute;
  width:100vw;
  bottom: 10%;
  width: 100%;
}

.social-links a{
  color: #FFF;
  text-decoration: none;
  transition: 0.2s;
  font-size:1.5em;
  padding-left:1%;
  padding-right:1%;
}

.social-links a:hover{
  color: #FFF;
  background-color:#F00;
  text-decoration: none;
  transition: 0.2s;
}

.zain-img{
  background-image: url('/static/img/IMG_20220502_152349.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.zain-new-img{
  background-image: url('/static/img/20250118_202245.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.navbar-item {
  margin: 0.4em;
  width: 100%;
  height: 64px;
  align-content: center;
}

.indx-about-me{
  padding:2%;
  font-family:'Kanit-regular';
  font-weight: 400;
}

@media screen and (min-width:1400px){
  .about-text{
    font-size: 1.4rem;
  }

  .indx-about-me {
    font-size: 3rem !important;
  }
}

.over-zimg{
  background-color: rgba(0,0,0,0.4) !important;
  transition: 0.2s;
}

.bold-about-me{
  font-family: 'Kanit-medium';
  font-weight: 500;
}

@font-face {
  font-family: 'Kanit-regular';

  src: url('/static/fonts/Kanit-Regular.ttf');
}

@font-face {
  font-family: 'Kanit-medium';

  src: url('/static/fonts/Kanit-Medium.ttf');
}

@font-face {
  font-family: 'Kanit-elight';

  src: url('/static/fonts/Kanit-ExtraLight.ttf');
}

.style-1{
  font-weight: 400;
  font-family: 'Kanit-regular';
}

.err-1{
  font-weight: 400;
  font-size: 600%;
  font-family: 'Kanit-regular';
}

.style-2{
  font-weight: 200;
  font-family: 'Kanit-elight';
}

.splash-2{
  font-size: 150%;
  font-weight: 400;
  color: rgb(0, 0, 0);
  font-family: 'Kanit-elight';
}

.style-3{
  font-weight: 100;
  font-size: 120% !important;
  font-family: 'Kanit-elight';
}

.err-4{
  font-weight: 200;
  font-size:200%;
  font-family: 'Kanit-elight';
}

#content{
  width: 100vw !important;
  background-color: #ffffff;
  overflow-x: hidden !important;
  padding-top: 64px;
}

@media screen and (max-width : 1000px){
  #content{
    margin-top:-24px;
  }

  .navbar-links{
    top: 5%;
    height: -moz-min-content;
    height: min-content;
    background-color: rgb(240, 244, 252) !important;
  }
}

@media screen and (min-width: 1000px) {
  .navbar-link{
    position: relative;
  }

  .navbar-link:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: rgb(0, 0, 0);
    height: 1px;
    transition: 0.5s;
  }

  .navbar-link:hover:after {
    width: 100%;
  }

  .navbar-link {
    transition: 2s;
  }

  .navbar-link:after {
    text-align: left;
    content: '.';
    margin: 0;
    opacity: 0;
  }

  .navbar-link:hover {
    color: #000000;
    z-index: 100;
  }

  .navbar-link:hover:after {
    z-index: 2;
    animation: fill 1s forwards;
    -webkit-animation: fill 1s forwards;
    -moz-animation: fill 1s forwards;
    opacity: 1;
  }

  .navbar-toggle {
    display: none !important;
  }

  #navbar .navbar-menu,
  #navbar.opened .navbar-menu {
    visibility: visible;
    opacity: 1;
    position: static;
    display: block;
    height: 100%;
    width: 55%;
    /*top: 10%;*/
  }

  #navbar .navbar-links,
  #navbar.opened .navbar-links {
    margin: 0;
    padding: 0;
    box-shadow: none;
    position: static;
    flex-direction: row;
    list-style-type: none;
    max-height: -moz-max-content;
    max-height: max-content;
    width: 100%;
    height: 100%;
    top: 10%;
  }

  #navbar .navbar-link:last-child {
    margin-right: 0;
  }
}

.home-link{
  color: #000000 !important;
  text-decoration: none;
  transition: 0.2s;
}

.navbar-link:hover{
  color: #000000 !important;
}

.home-link:hover{
  color: #505050 !important;
  text-decoration: none;
  transition: 0.2s;
}

.navbar-menu{
  background-color: transparent;
}

.before10 {
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  color:#000000;
  transition: 0.1s;
  box-shadow: none !important;
  /* height:64px; */
}

.after10 {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color:#000000;
  transition: 0.1s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.151);
  /* height:64px !; */
}

#navbar a {
  text-decoration: none;
  color:#000000;
}

.after10 a {
  text-decoration: none;
  color:#000000;
}

.after10 a:hover {
  text-decoration: none;
  color:#000000 !important;
}

.before10 a:hover {
  text-decoration: none;
  color:#000000 !important;
}

.home-link,
.navbar-link {
  color: var(--navbar-text-color);
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  display: flex;
  font-weight: 400;
  transition: background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

.navbar-logo {
  background-color: var(--navbar-text-color-focus);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-right: 0.5em;
}

.navbar-toggle {
  border: none;
  background-color: transparent;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.icon-bar {
  display: block;
  width: 25px;
  height: 4px;
  margin: 2px;
  transition: background-color 0.2s ease-in-out,
    transform 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
  background-color: var(--navbar-text-color);
}

.navbar-links {
  list-style-type: none;
  max-height: 0;
  overflow: hidden;
  position: absolute;
  background-color: var(--navbar-bg-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0;
  right: 0;
  bottom:0;
  margin: 1.4rem;
  border-radius: 5px;
  max-width:100vw;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

#navbar.opened .navbar-links {
  padding: 1em;
  max-height: none;
}

.navbar-toggle:focus .icon-bar,
.navbar-toggle:hover .icon-bar {
  background-color: var(--navbar-text-color-focus);
}

#navbar.opened .navbar-toggle .icon-bar:first-child,
#navbar.opened .navbar-toggle .icon-bar:last-child {
  position: absolute;
  margin: 0;
  width: 30px;
}

#navbar.opened .navbar-toggle .icon-bar:first-child {
  transform: rotate(45deg);
}

#navbar.opened .navbar-toggle .icon-bar:nth-child(2) {
  opacity: 0;
}

#navbar.opened .navbar-toggle .icon-bar:last-child {
  transform: rotate(-45deg);
}

.navbar-menu {
  width:100vw;
  position: fixed;
  top: var(--navbar-height);
  bottom: 0;
  transition: opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out;
  opacity: 0;
  visibility: hidden;
  left: 0;
  right: 0;
}

.navcont{
  max-width: 100%;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
  margin-left: auto;
  margin-right: auto;
}

#navbar.opened .navbar-menu {
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
  visibility: visible;
}

.home-link:focus,
.home-link:hover {
  color: var(--navbar-text-color-focus);
}

.navbar-link {
  justify-content: center;
  width: 100%;
  padding: 0.4em 0.8em;
  border-radius: 5px;
}

/*
.navbar-link:focus,
.navbar-link:hover {
  /*
  color: var(--navbar-text-color-focus);
  background-color: var(--navbar-bg-contrast);
  color: #FFF;
  
}
*/

.inline-link:hover{
  color: #b0b0b0;
  text-decoration: none;
}

.sklImg {
  margin-bottom: 20px
}

.siteName {
  color: white;
  font-family: "Helvetica Neue";
}

.title {
  color: white;
  text-align: center;
  font-family: "Helvetica Neue";
}

.navbar-item{
  text-align: center !important;
}

.center {
  color: white;
  text-align: center;
}

.sect1 {
  background-color: rgb(0, 0, 0);
}

.sect3 {
  background-color: rgb(255, 255, 255);
}

.sect2 {
  background-color: rgb(0, 0, 0);
  /*background-color: #183a50;*/
  padding-top: 1% !important;
  padding-bottom: 1% !important;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav li {
  display: inline;
}

nav li a {
  color: white;
}

/* Change the link zcolor on hover */

nav li a:hover {
  color: grey;
}

.card {
  display: inline-block;
  background-color: #4e535c;
  box-shadow: 0.4px 8px 0  rgba(0, 0, 0, .1);
  transition: 0.3s;
  padding: 20px;
  margin-top: 10px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}

.hideme {
  opacity: 0;
}

/*Responsive iFrame ends*/

::-moz-selection {
  background: rgba(197, 197, 197, 0.507);
  font-style: italic;
  cursor: none;
}

::selection {
  background: rgba(197, 197, 197, 0.507);
  cursor: none;
}

.box-left {
  overflow: hidden;
  display: inline-block !important;
  position: relative !important;
  width: 100%;
  min-height: 490px;
  background-color: rgb(12, 13, 19);
  padding:15px;
  z-index: 1;
}

.box-left2 {
  overflow: hidden;
  display: inline-block !important;
  position: relative !important;
  width: 100%;
  min-height: 40px;
  margin-top: -20px;
  background-color: rgb(52, 55, 73);
  padding:15px;
  z-index: 0;
}

/*
.box-left::after{
  content: "";
  position: absolute;
  top: calc(var(--y, 0) * 1px - 50px);
  left: calc(var(--x, 0) * 1px - 50px);
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, white, #3984ff00 50%);
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s;
}
.box-left:hover::after {
  opacity: 0.4;
  
}
  */

.box-right{
  overflow: hidden;
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 470px;
  background-color: rgb(50, 55, 56);
  padding:15px;
  z-index: 2;
}

.box-right2{
  overflow: hidden;
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 470px;
  margin-top: -25px;
  background-color: rgb(36, 39, 41);
}

@media (min-width: 768px) {
  .box-left {
    float: left !important;
    /*position: fixed;*/
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    transition: 0.2s;
  }

  .box-left:hover{
    background-color: rgb(15, 16, 24);
    /*box-shadow: 0px 10px 0px 0px rgb(240, 253, 255);*/
    margin-top: 5px;
    margin-bottom: -5px;
  }

  .box-left2 {
    float: left !important;
    /*position: fixed !important;*/
    position: relative !important;
    left: 0 !important;
    top: 0;
    height: 100%;
    width: 50.001%;
    transition: 0.2s;
  }

  .box-left2:hover{
    background-color: rgb(72, 76, 100);
    /*box-shadow: 0px 10px 0px 0px rgb(240, 253, 255);*/
    margin-top: -10px;
    margin-bottom: -10px;
  }

  .box-right {
    float: right !important;
    /*position: fixed;*/
    right: 0;
    top: 0;
    height: 100% !important;
    width: 50%;
    transition: 0.2s;
  }

  .box-right:hover{
    background-color: rgb(43, 47, 49);
    /*box-shadow: 0px 10px 0px 0px rgb(240, 253, 255);*/
    margin-top: 5px;
    margin-bottom: -5px;
  }

  .box-right2 {
    float: right !important;
    /*position: fixed;*/
    right: 0;
    top: 0;
    height: 102% !important;
    width: 49.999%;
    transition: 0.2s;
  }

  .box-right2:hover{
    background-color: rgb(66, 73, 77);
    /*box-shadow: 0px 10px 0px 0px rgb(240, 253, 255);*/
    margin-top: -20px;
    margin-bottom: -5px;
  }

  .split-cont{
    margin-top: -5px;
    /*padding-left:10px !important;
    padding-right:10px !important;
    */
  }

  .box{
    padding-top:20px;
  }
}

/*
  .box-right::after{
    content: "";
    position: absolute;
    top: calc(var(--y, 0) * 1px - 50px);
    left: calc(var(--x, 0) * 1px - 50px);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, white, #3984ff00 50%);
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s;
  
  }

  .box-right:hover::after {
    opacity: 0.4;
    
  }
  */

.typeText::after {
  content: "|";
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.footer{
  min-height: 3vh;
  overflow: hidden;
  background-color: #ffffff;
  width: 100%;
  padding:2%;
  vertical-align: middle;
  z-index:200;
}

.footer-link{
  color: #000000;
  text-decoration: underline;
  transition: 0.2s;
}

.footer-link:hover{
  color: #000000;
  text-decoration: none;
}

.ul-work-experience {
  align-self: center;
}

.ul-work-experience li {
  margin-top:0.6%;
}

.m-2{
  margin-top: 2%;
  margin-left:2%;
  margin-right:2%;
  margin-bottom: 2%;
}

.mx-2{
  margin-left:2%;
  margin-right:2%;
}

.my-2{
  margin-top:2%;
  margin-bottom:2%;
}

.btn1:hover{
  color: #3b3b3b;
  text-decoration: none;
}

@media (max-width:767px){
  .btn1{
    padding-top:12px;
    padding-bottom:5px;
  }
}

@media (min-width:768px){
  .btn1{
    padding-top:20px;
    padding-bottom:15px;
  }
}

.btn1{
  padding-right:3%;
  padding-left:3%;
  color: #000000;
  transition: 0.2s;
  border:1px solid #000000;
  vertical-align:middle !important;
  white-space:nowrap;
  display: inline-block;
}

.btn1:focus{
  padding-right:3%;
  padding-left:3%;
  color: #272727;
  transition: 0.2s;
  border:1px solid #d0d0d0;
  vertical-align:middle !important;
  white-space:nowrap;
  display: inline-block;
}

.preloader{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  width:100vw;
  height:100vh;
  background:#141414;
  visibility:hidden;
  opacity:0;
  transition:all 0.5s ease;
  z-index:4001 !important;
}

.preloader_inner {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 4em;
  height: 4em;
  line-height: 4em;
  text-align: center;
  font-size: 3em;
  font-family: monospace;
  visibility:hidden;
  font-weight: 300;
  color: #979797;
  z-index:4000 !important;
}

.show{
  visibility:visible !important;
  opacity:1 !important;
  transition:all 0.5s ease;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.img-projects {
  /* height: 100%;  */
  max-width:100%;
  display: inline-block;
}

.proj-cont{
  text-align: center;
  width:50vw;
}

.project{
  text-align: left;
  text-decoration: none;
  color: #fff;
  width: 10vw !important;
  transition: 0.2s;
  margin-top:10%;
}

.project h4{
  margin-top:1%;
}

.project:hover{
  text-decoration: none;
  color: #fff;
}

.project:hover > img{
  transform: scale(1.2);
  transition: 0.2s;
}

.project > img{
  transition: 0.2s;
}

.showpage-heading h1{
  font-size: 70px !important;
  padding-top: 20px;
}

.w-1{
  border-color: #000000;
}

.h-1{
  font-size: 2.5rem;
}

.p-7{
  padding-left:15% !important;
  padding-right:15% !important;
}

@media screen and (min-width: 768px) {
  .p-6{
    padding-left:20% !important;
    padding-right:20% !important;
  }

  .p-8{
    padding-left:10% !important;
    padding-right:10% !important;
  }

  .p-82a{
    padding-left:10% !important;
    padding-right:10% !important;
    padding-top:2% !important;
    padding-bottom:2% !important;
  }
}

@media screen and (max-width: 767px) {
  .p-82a{
    padding-left:5% !important;
    padding-right:5% !important;
    padding-top:2% !important;
    padding-bottom:2% !important;
  }

  .p-6{
    padding-left:6% !important;
    padding-right:6% !important;
  }

  .p-8{
    padding-left:5% !important;
    padding-right:5% !important;
  }
}

.card-proj {
  display: inline-block;
  background-color: #ffffff;
  padding: 20px;
  margin-top: 10px;
  width: 100%;
  border: 1px solid #c9c9c9;
  transition: 0.2s;
}

.card-proj:hover{
  text-decoration: none !important;
  background-color: #f2f3f3;
  border: 1px solid #c9c9c9;
}

.card-proj:focus{
  text-decoration: none !important;
  background-color: #f2f3f3;
  border: 1px solid #c9c9c9;
}

.card-proj h4{
  color: #000000 !important;
}

.card-proj:hover h4{
  color: #181818 !important;
}

//Crop and Zoom Image Hover
.intrinsic, .summary-thumbnail-outer-container, .blog-item > div:first-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: all .3s ease;
  img {
    transform: scale(1);
    transition: all .3s ease!important;
  }
  &:hover {
    clip-path: polygon(3% 3%, 97% 3%, 97% 97%, 3% 97%);
    img {
      transform: scale(1.1);
    }
  }
}

.blog-back{
  color: rgb(40, 18, 236) !important;
  font-weight: bold;
}

.blog-back:hover{
  text-decoration: underline;
}

/* .masthead {
background-repeat:no-repeat;
background-position: top center;
background-size: 100% 100%;
margin: 0;
padding: 0;
} */

.blogpostcontent a{
  color: rgb(39, 86, 240) !important;
}

.blogpostcontent a:hover{
  color: rgb(39, 78, 206) !important;
  text-decoration: underline;
}

.post{
  justify-content: center;
  color: rgb(0, 0, 0) !important;
  background-color:#fafafa;
  border: 1px solid #c9c9c9;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 1%;
  transition: 0.2s;
  width:100%;
  display: block;
}

.post:hover{
  background-color: #eaecec;
  border: 1px solid #c9c9c9;
  text-decoration: none;
}

.post-inner{
  vertical-align: middle !important;
  display: inline-block;
  height: -moz-max-content;
  height: max-content;
}

.adder{
  margin:5%;
  margin-left:0px;
}

.rainbow_text_animated {
  background: linear-gradient(to right, #c542a4, #c542a4, #e4472b, #e99a40, #d6a446, #d6a446, #e99a40, #e4472b, #c542a4, #c542a4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 4s ease-in-out infinite;
  background-size: 800% 100%;
}

@keyframes rainbow_animation {
  0%, 100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}

::-webkit-scrollbar {
  width: 4px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

/* Track */

::-webkit-scrollbar-track {
  background: #ffffff;
  opacity: 0.5;
  border-radius: 1px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: #000000;
  opacity: 0.1;
  border-radius: 1px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #3d3d3d;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.bg-none{
  background: none;
}

.mvrplat{
  display: none;
}

pre code{
  color:#e83e8c !important
}

code{
  color: #e83e8c !important;
}

.bogpostcontnet pre{
  border: #2c3235 1px solid;
}

.text-center{
  text-align: center !important;
}

.text-left{
  text-align: left !important;
}

.text-right{
  text-align: right !important;
}

.locked-cursor{
  transition-property:width,height,left,top,border-radius
}

@media screen and (max-width: 767px) {
  .coverart-img{
    width: 80%;
    margin-top: 6% !important;
    margin-bottom: 6% !important;
  }
}

@media screen and (min-width: 768px) {
  .coverart-img{
    width: 55%;
  }
}

.gallery-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-gap: 5px;
  grid-auto-flow: dense;
}

.gallery-container img{
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  /* border-radius: 10px;
    transition: transform 0.3s ease; */
}

.horizontal{
  grid-column: span 2;
}

.vertical {
  grid-row: span 2;
}

.big{
  grid-column: span 2;
  grid-row: span 2;
}

.grid {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 99vw;
  box-sizing: border-box;
}

.grid-sizer,
.grid-item {
  width: calc(25% - 12px);
}

@media (max-width: 1200px) {
  .grid-sizer,
  .grid-item {
    width: calc(33.333% - 8px);
  }
}

@media (max-width: 900px) {
  .grid-sizer,
  .grid-item {
    width: calc(50% - 8px);
  }
}

@media (max-width: 600px) {
  .grid-sizer,
  .grid-item {
    width: calc(50% - 8px);
  }
}

@media (min-width: 1201px) {
  .grid-item:nth-child(4n) {
    margin-right: 0;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .grid-item:nth-child(3n) {
    margin-right: 0;
  }
}

@media (max-width: 900px) and (min-width: 601px) {
  .grid-item:nth-child(2n) {
    margin-right: 0;
  }
}

@media (max-width: 600px) {
  .grid-item:nth-child(2n) {
    margin-right: 0;
  }
}

.grid img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.tw-fixed{
  position: fixed;
}

.tw-absolute{
  position: absolute;
}

.tw-inset-0{
  inset: 0px;
}

.tw-bottom-0{
  bottom: 0px;
}

.tw-left-0{
  left: 0px;
}

.tw-left-1{
  left: 0.25rem;
}

.tw-left-1\/2{
  left: 50%;
}

.tw-right-0{
  right: 0px;
}

.tw-right-4{
  right: 1rem;
}

.tw-right-8{
  right: 2rem;
}

.tw-top-0{
  top: 0px;
}

.tw-top-1{
  top: 0.25rem;
}

.tw-top-2{
  top: 0.5rem;
}

.tw-top-4{
  top: 1rem;
}

.tw-top-\[calc\(50\%\+32px\)\]{
  top: calc(50% + 32px);
}

.tw-z-\[60\]{
  z-index: 60;
}

.tw-col-span-1{
  grid-column: span 1 / span 1;
}

.tw-col-span-2{
  grid-column: span 2 / span 2;
}

.tw-col-start-2{
  grid-column-start: 2;
}

.tw-col-start-3{
  grid-column-start: 3;
}

.tw-m-2{
  margin: 0.5rem;
}

.tw-m-4{
  margin: 1rem;
}

.tw-m-8{
  margin: 2rem;
}

.tw-m-auto{
  margin: auto;
}

.tw-mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.tw-my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}

.tw-mb-0{
  margin-bottom: 0px;
}

.tw-mb-1{
  margin-bottom: 0.25rem;
}

.tw-mb-2{
  margin-bottom: 0.5rem;
}

.tw-mb-5{
  margin-bottom: 1.25rem;
}

.tw-mb-\[30px\]{
  margin-bottom: 30px;
}

.tw-ml-2{
  margin-left: 0.5rem;
}

.tw-ml-\[-1px\]{
  margin-left: -1px;
}

.tw-mr-4{
  margin-right: 1rem;
}

.tw-mt-1{
  margin-top: 0.25rem;
}

.tw-mt-2{
  margin-top: 0.5rem;
}

.tw-mt-4{
  margin-top: 1rem;
}

.tw-mt-5{
  margin-top: 1.25rem;
}

.tw-mt-\[1\%\]{
  margin-top: 1%;
}

.tw-mt-\[2\%\]{
  margin-top: 2%;
}

.tw-mt-auto{
  margin-top: auto;
}

.tw-block{
  display: block;
}

.tw-inline-block{
  display: inline-block;
}

.tw-flex{
  display: flex;
}

.tw-grid{
  display: grid;
}

.tw-hidden{
  display: none;
}

.tw-h-\[86vh\]{
  height: 86vh;
}

.tw-h-auto{
  height: auto;
}

.tw-h-screen{
  height: 100vh;
}

.tw-max-h-\[calc\(100vh-160px\)\]{
  max-height: calc(100vh - 160px);
}

.tw-max-h-\[calc\(100vh-80px\)\]{
  max-height: calc(100vh - 80px);
}

.tw-max-h-full{
  max-height: 100%;
}

.\!tw-w-full{
  width: 100% !important;
}

.tw-w-\[100px\]{
  width: 100px;
}

.tw-w-\[50\%\]{
  width: 50%;
}

.tw-w-full{
  width: 100%;
}

.tw-w-screen{
  width: 100vw;
}

.tw-max-w-\[90vw\]{
  max-width: 90vw;
}

.tw-max-w-\[96vw\]{
  max-width: 96vw;
}

.tw-max-w-full{
  max-width: 100%;
}

.tw-max-w-max{
  max-width: -moz-max-content;
  max-width: max-content;
}

.tw--translate-x-1{
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw--translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw--translate-x-3{
  --tw-translate-x: -0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw--translate-y-1{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw--translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw-transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw-cursor-pointer{
  cursor: pointer;
}

.tw-grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.tw-grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tw-grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tw-grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tw-place-items-center{
  place-items: center;
}

.tw-content-center{
  align-content: center;
}

.tw-items-center{
  align-items: center;
}

.tw-justify-center{
  justify-content: center;
}

.tw-gap-4{
  gap: 1rem;
}

.tw-gap-3{
  gap: 0.75rem;
}

.tw-self-center{
  align-self: center;
}

.tw-overflow-auto{
  overflow: auto;
}

.tw-overflow-x-hidden{
  overflow-x: hidden;
}

.tw-overflow-y-visible{
  overflow-y: visible;
}

.tw-overflow-y-scroll{
  overflow-y: scroll;
}

.tw-rounded{
  border-radius: 0.25rem;
}

.tw-rounded-full{
  border-radius: 9999px;
}

.tw-rounded-lg{
  border-radius: 0.5rem;
}

.tw-rounded-md{
  border-radius: 0.375rem;
}

.tw-border-solid{
  border-style: solid;
}

.tw-border-dashed{
  border-style: dashed;
}

.tw-border-hidden{
  border-style: hidden;
}

.\!tw-border-white{
  --tw-border-opacity: 1 !important;
  border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
}

.tw-border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.tw-bg-\[\#000000AA\]{
  background-color: #000000AA;
}

.tw-bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.tw-p-4{
  padding: 1rem;
}

.tw-p-8{
  padding: 2rem;
}

.\!tw-px-\[14\%\]{
  padding-left: 14% !important;
  padding-right: 14% !important;
}

.tw-px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.tw-px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.tw-px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.tw-px-\[3\%\]{
  padding-left: 3%;
  padding-right: 3%;
}

.tw-px-\[5\%\]{
  padding-left: 5%;
  padding-right: 5%;
}

.\!tw-pb-\[2\%\]{
  padding-bottom: 2% !important;
}

.\!tw-pt-2{
  padding-top: 0.5rem !important;
}

.\!tw-pt-\[10px\]{
  padding-top: 10px !important;
}

.tw-pb-\[1\%\]{
  padding-bottom: 1%;
}

.tw-pb-\[15\%\]{
  padding-bottom: 15%;
}

.tw-pl-1{
  padding-left: 0.25rem;
}

.tw-pl-\[2\%\]{
  padding-left: 2%;
}

.tw-pr-10{
  padding-right: 2.5rem;
}

.tw-pr-12{
  padding-right: 3rem;
}

.tw-pr-20{
  padding-right: 5rem;
}

.tw-pr-6{
  padding-right: 1.5rem;
}

.tw-pr-8{
  padding-right: 2rem;
}

.tw-pt-2{
  padding-top: 0.5rem;
}

.tw-pt-5{
  padding-top: 1.25rem;
}

.tw-pt-\[1\%\]{
  padding-top: 1%;
}

.tw-pt-\[3\%\]{
  padding-top: 3%;
}

.tw-pt-\[34px\]{
  padding-top: 34px;
}

.tw-pt-\[40\%\]{
  padding-top: 40%;
}

.tw-text-left{
  text-align: left;
}

.tw-text-center{
  text-align: center;
}

.tw-align-middle{
  vertical-align: middle;
}

.\!tw-text-\[110\%\]{
  font-size: 110% !important;
}

.\!tw-text-\[400\%\]{
  font-size: 400% !important;
}

.tw-text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.tw-text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.tw-text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.tw-text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.tw-text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tw-text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.tw-font-bold{
  font-weight: 700;
}

.tw-ordinal{
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.tw-text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.tw-text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.tw-text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.tw-shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw-shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.\[-_\:\.a-zA-Z0-9\\u00c0-\\uffff\]{
  -_: .a-zA-Z0-9\u00c0-\uffff;
}

.\[-_a-zA-Z0-9\:\.\]{
  -_a-z-a--z0-9: .;
}

.\[_\:a-zA-Z\\u00c0-\\uffff\]{
  _: a-zA-Z\u00c0-\uffff;
}

.hover\:\!tw-border-none:hover{
  border-style: none !important;
}

.hover\:\!tw-text-\[\#CECECE\]:hover{
  --tw-text-opacity: 1 !important;
  color: rgb(206 206 206 / var(--tw-text-opacity)) !important;
}

@media (min-width: 640px){
  .sm\:tw-col-start-2{
    grid-column-start: 2;
  }

  .sm\:tw-col-start-3{
    grid-column-start: 3;
  }

  .sm\:tw-mt-auto{
    margin-top: auto;
  }

  .sm\:tw-flex{
    display: flex;
  }

  .sm\:tw-h-\[95vh\]{
    height: 95vh;
  }

  .sm\:tw-w-\[25\%\]{
    width: 25%;
  }

  .sm\:tw-w-\[250px\]{
    width: 250px;
  }

  .sm\:tw-w-\[45\%\]{
    width: 45%;
  }

  .sm\:tw-w-\[50\%\]{
    width: 50%;
  }

  .sm\:tw-grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:tw-grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:tw-grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:\!tw-px-\[20px\]{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .sm\:\!tw-py-\[10\%\]{
    padding-top: 10% !important;
    padding-bottom: 10% !important;
  }

  .sm\:\!tw-pt-\[1\%\]{
    padding-top: 1% !important;
  }

  .sm\:tw-pb-\[0\.5\%\]{
    padding-bottom: 0.5%;
  }

  .sm\:\!tw-text-\[270\%\]{
    font-size: 270% !important;
  }

  .sm\:\!tw-text-\[680\%\]{
    font-size: 680% !important;
  }

  .sm\:tw-text-\[300\%\]{
    font-size: 300%;
  }

  .sm\:tw-text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:tw-text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:tw-text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}