@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Source Code Pro", monospace; color: white; }
p { font-size: 1.1rem; }
ol { margin-left: 1rem; padding-inline-start: 2rem; }
code { background-color: #e8e8e8; border-radius: 8px; padding: 0rem 0.3rem; }

/* Body */
.body-wrapper { width: 1000px; max-width: 95%; }

/* Display */
.display-flex { display: flex;}
.display-grid { display: grid; }
.display-block { display: block; }
.display-inline-block { display: inline; }

/* Flexbox */
.flex-direction-column { flex-direction: column; }
.flex-direction-row { flex-direction: row; }
.flex-justify-content-start { justify-content: flex-start; } 
.flex-justify-content-center { justify-content: center;  }
.flex-justify-content-end { justify-content: flex-end; }
.flex-align-items-start { align-items: flex-start; }
.flex-align-items-center { align-items: center; }
.flex-align-items-end { align-items: flex-end; }

/* Grid */
.grid-template-cols-2 { grid-template-columns: calc(100%/2) calc(100%/2); }
.grid-template-cols-3 { grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3); }
.grid-template-cols-4 { grid-template-columns: calc(100%/4) calc(100%/4) calc(100%/4) calc(100%/4); }

/* Text Alignment */
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }

/* Position */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.postiion-fixed { position: fixed; }

/* Font Weight */
.font-weight-lighter { font-weight: lighter; }
.font-weight-normal { font-weight: normal; }
.font-weight-bold { font-weight: bold; }
.font-weight-bolder { font-weight: bolder; }

/* Font Style */
.font-style-normal { font-style: normal; }
.font-style-italic { font-style: italic; }

/* Font Color */
.font-color-white { color: white; }
.font-color-black { color: black; }
.font-color-red { color: red; }
.font-color-green { color: green; }
.font-color-yellow { color: yellow; }
.font-color-blue { color: blue; }

/* Text Decoration */
.text-decoration-none { text-decoration: none; }
.text-decoration-underline { text-decoration: underline; }

/* Background Color */
.background-color-white { background-color: white; }
.background-color-black { background-color: black; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Media Queries */
@media (max-width: 800px) {
    html { font-size: 15px; }
    .grid-template-cols-3 { grid-template-columns: calc(100%/2) calc(100%/2); }
    .grid-template-cols-4 { grid-template-columns: calc(100%/2) calc(100%/2); }
}

@media (max-width: 500px) {
    html { font-size: 14px; }
    .grid-template-cols-2 { grid-template-columns: 100%; }
    .grid-template-cols-3 { grid-template-columns: 100%; }
    .grid-template-cols-4 { grid-template-columns: 100%; }
}


.anisPic img{
    width: 155px;
    margin-bottom: 10px;
   
}




/* Btn */


  .btn
  
  a{
    margin-top: 15px;
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
    color: #0e57c5;
    border: 2px solid #1665db;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    transition: all .35s;
  }
  
  .btn a span{
    position: relative;
    z-index: 2;
    
  }
  
  .btn a:after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #176ae8;
    transition: all .35s;
  }
  
  .btn a:hover{
    color: #fff;
  }
  
  .btn a:hover:after{
    width: 100%;
  }


/* Btn */

  .glow-on-hover {
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/*div projects */

.projects {
  border-color: blue;
  color: #fff;
  box-shadow: 0 0 40px 40px rgb(45, 41, 41) inset, 0 0 0 0 blue;
  transition: all 150ms ease-in-out;
  
  &:hover {
    box-shadow: 0 0 10px 0 blue inset, 0 0 10px 4px blue;
  }
}
 


/* marquee */

.marquee {
   font-family: sans-serif, 'Press Start 2P';
   text-transform: uppercase;
   font-size: 12px;
   font-weight: bold;
   padding: .2em 0;
   color: #29cac8;
   box-shadow: 2px 2px 10px #232776;
   overflow: hidden;
   position: relative;
   animation: text-line-glow 2s linear infinite;
}
@keyframes text-line-glow {
0% {text-shadow: 0px 0px 0px #29cac8;
   }
50% {text-shadow: 0px 0px 4px #29cac8;
   }
}
.marquee:before {
   content: '';
   position: absolute;
   display: block;
   background-image: 
    repeating-linear-gradient(0deg, #23277600, #23277600 1px, #040a2444 1px, #040a2444 3px),
    repeating-linear-gradient(90deg, #23277600, #23277600 2px, #040a2444 2px, #040a2444 3px);
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 1;
}
.marquee:after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    height: 100%;
    width: 3px;
    animation: line-glow 3.5s linear infinite;
   animation-timing-function: steps(50);
    }
@keyframes line-glow {
0% {
   right: -2%;
   background-color: #29cac8;
   box-shadow: 0 0 20px #ffd2fe00;
   }
50% {
   right: 102%;
   background-color: #29cac8;
   box-shadow: 0 0 30px #ffd2feff;
    }
   }