@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

:root {


  --blue-main: #162447;
  --blue-secondary: #1F4068;
  --blue-dark: #1B1B2F;
  --red-high: #E43F5A;

}

/* Body Font*/

body{
  font-family: "Roboto", sans-serif;
}

/* Mono Font*/

h1, h2, h3, h4, h5, h6{
  font-family: 'Roboto Mono', monospace;
}
a{
  font-family: 'Roboto Mono', monospace;
}


/*Navigation*/
.menu{
  z-index: 5;
}
.navpos{position:fixed;}
.navfont{ font-size: 25px; }
.navcolor{
  background-color: transparent;
}
.backdrop {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  opacity: 1;
  
/*  where the real magic happens  */
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  
  background: rgba(225, 225, 225, 0.0);
  
  mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%);
  
  -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%);
  inset: 0rem 0;
}

/*Navigation Animation*/

/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: white;
  height: 2px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}


/* Shutter Out Horizontal */

.hvr-shutter-out-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background: #7F1224;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
  color: white;
}
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/* Page animation*/

/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/*Links*/

.link-o{ color:var(--red-high); }
.link-o:hover{color: var(--red-high);}


/*Text color*/

.t-white{ color: white; }
.t-red{ color:var(--red-high); }
.t-main{ color: var(--blue-main) }

/*Text */

h1.name{ font-size:75px }
.t-font{  font-family: 'Roboto Mono', monospace; }
.t-font-normal{ font-family: "Roboto", sans-serif;}

.t-size-50{ font-size: 50px;}
.t-size-15{ font-size: 15px;}
.t-size-17{ font-size: 17px;}


/*Width*/


/*Centering*/

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

.h-center{justify-content: center;
          display: flex;}

.t-center{ text-align:center }

.v-center{display: flex;
  align-items: center;
  }

.boxcenter{  display: flex;
  align-items: center;
  justify-content: center;
  }

/* Margin */

.mt-25{margin-top: 25px;}
.mt-50{margin-top: 50px;}
.mt-75{margin-top: 75px;}

.ml-25{ margin-left: 25px; }
.ml-50{ margin-left: 50px; }

.mb-25{margin-bottom: 25px;}
.mb-50{margin-bottom: 50px;}
.mb-75{margin-bottom: 75px;}

.mr-25{margin-right: 25px;}
.mr-50{margin-right: 50px;}
.mr-75{margin-right: 75px;}

/* Padding*/

.pr-25{padding-right: 25px;}

/* Page Height*/

.page-s{ min-height: 93vh; }
.page{ min-height: 100vh; }

/*Buttons */

.btn-red-sharp{border-radius: 0;
                background-color: var(--red-high); }
.btn-red-sharp:hover{color: var(--blue-secondary);}
.btn-height{ height: 46.8px;}


/*Arrows*/

.arrow {
  border: solid var(--blue-secondary);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/*Size querry */

@media (max-width: 768px) {
      .hide {
         display:none;
      }
}

/*Backgrounds*/

.bg-1{ background-color: var(--blue-main); }
.bg-2{background-color: var(--blue-dark);}

/*Borders*/

.p-border{border-top: 1px solid var(--red-high);}
.e-border-l{ border-left: 1px solid var(--red-high); border-top: 1px solid var(--red-high); border-bottom: 1px solid var(--red-high); border-radius: 5px 0px 0px 5px;}
.e-border-r{ border-right: 1px solid var(--red-high); border-top: 1px solid var(--red-high); border-bottom: 1px solid var(--red-high); border-radius: 0px 5px 5px 0px;}
.e-border-f{ border: 1px solid var(--red-high); border-radius: 5px 5px 5px 5px;}

/*Images*/

.g-size{ max-height:550px; width: auto;}

.e-size{ height:350px; width:350px; aspect-ratio:1/1; }
z`
@media (max-width:1559px) {
  .e-size{ height:175px; width:175px; aspect-ratio:1/1;}
  /* .g-size{ height:250px; width: auto;} */
}

@media (max-width:868px) {
  /* .g-size{ height:200px; width: auto;} */
  .e-size{  display: none; } 
}




/* Hover Projects*/

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.6);
  -webkit-filter: brightness(0.6);
}

.hovereffect h2 {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 17px;
  background-color: transparent;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.hovereffect a, .hovereffect p {
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/* Glass tile*/

.glass-tile {
font-family: "Roboto", sans-serif;
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 9.5px );
-webkit-backdrop-filter: blur( 9.5px );
border-radius: 10px;

}
.glass-red{ background: rgba( 228, 63, 90, 0.9 );}

.glass-blue{ background: rgba( 31, 64, 104, 0.9 );}

/* Gradient Text */
.gradient-blue{
  background: #74ebd5; /* fallback for old browsers */
  background: linear-gradient(180deg, rgba(0,255,254,1) 0%, rgba(0,122,253,1) 85%, rgba(31,64,104,1) 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}

.gradient-red{
  background: rgb(228,63,90);
  background: linear-gradient(180deg, rgba(228,63,90,1) 0%, rgba(164,0,36,1) 60%, rgba(97,0,0,1) 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}
/* Hr */
hr.hr-red {
  background-color: var(--red-high);
}

.changelog-height{
  height: 950px;
}