@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

*{
    margin: 0;
    padding: 0;
    color: white;
    --prim: #FF9800;
    --primLight: #f7b053;
    --back: rgb(17, 17, 17);
    --main: rgb(42, 40, 38);
    --blog-title: rgb(235, 225, 213);
    --blog-date: rgb(255, 197, 122);
    font-family: Orbitron;
}

body{
    /* background-color: #f1f1f1; */
    background-color: var(--main);
}

.container{
    margin: 30px auto;
    padding: 30px;
    width: 60%;
}

.wrapper{
    display: flex;
    /* height: 100vh; */
    margin: 20px auto;
    width: 70%;
    height: 100%;
}

.wrapper .flex-left{
    flex: 3;
    text-align: justify;
    text-justify: inter-word;
}

.wrapper .flex-right{
    flex: 1;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.349);
    margin-left: 20px;
    position: sticky;
    top: 10px;
}

.blog-container:hover{
    box-shadow: 0 0 10px rgb(34, 32, 30);
}

.hr-class{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #ccc, rgba(0, 0, 0, 0));
}
.hr-classA{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right,#ccc, rgba(0, 0, 0, 0));
}

.post-img{
    height: 30vw;
    width: auto;
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--prim); 
  }

.main{
    background-image: url("../images/main.0698a040eae0.gif");
    width: 100vw;
    height: 100vh;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; 
}


.nav {
    overflow: hidden;
    margin: 10px auto;
    width: 25vw;
}

.nav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 0 0 25px;
    text-decoration: none;
    font-size: 19px;
    transition: 0.25s ease-out;

}

.nav a:hover {
    color: var(--prim);
}

.nav-img{
    position: absolute;
    top: 20px;
    left: 15px;
    height: 35px;
    width: auto;
    color: white;
}

.rotate {
    animation: rotation 8s infinite linear;
  }
  
@keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}

.nav .icon {
    display: none;
    position: absolute;
    right: 0;
    top: 10px;
}
  
@media screen and (max-width: 600px) {
    .nav a:not(:first-child) {
        display: none;
    }
    .nav a.icon {
      float: right;
      display: block;
    }
}
  
@media screen and (max-width: 600px) {
    .nav.responsive {
        position: relative;
    }
    .nav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .nav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
}

.intro{
    margin-top: 70vh;
    text-align: center;
    justify-content: center;
    font-size: 4vw;
    letter-spacing: 6px;
    -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, 0.068));
    line-height: 1em;
    outline: none;
    animation: animate 5s linear infinite;
    animation-timing-function: ease-in;
    animation-delay: 1s;
}

@keyframes animate {
    0%,15%,23%,33%,43%,60%,65%,70%,71%,72%,73%,76%,80%,90.1%,98%{
        color: white;
        text-shadow: none;
    }
    2%,17%,25%,35%,45%,60%,65%,70%,71%,72%,73%,76%,80%,90.1%,98%{
        color: var(--prim);
        text-shadow: 0 0 10px var(--prim),
        0 0 10px var(--prim);
        /* 0 0 80px var(--prim); */
    }
}

.intro .bold{
    font-size: 3vw;
    color: white;
}

button{
    margin-top: 1em;
    background: linear-gradient(to right, var(--prim), var(--primLight));
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2vh;
}

button:hover{
    transition: 0.5s ease;
    box-shadow: 0 0 10px var(--prim);
    background: linear-gradient(to right, var(--primLight),var(--prim));
}

@media only screen and (max-width: 870px) {
    .footer-text{
        font-size: small;
    }
    .box{
        flex-direction: column;
        font-size: small;
    }
    .box .left, .box.right{
        flex: auto;
    }
    .wrapper{
        flex-direction: column;
    }
    .wrapper .flex-right{
        margin-top: 40px;
    }
}

.box{
    height: 80vh;
    width: 80vw;
    background-color: white;
    /* box-shadow: 0 0 10px #888; */
    box-shadow: 0 0 10px rgb(34, 32, 30);;
    margin: 70px auto;
    display: flex;

}

.box .left{
    flex: 2.5;
    width: 100%;
    height: auto;
    background-image: url("../images/mypic.6db9626facd5.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; 
}
.box .right{
    margin: auto 0;
    flex: 2.5;
    background-color: rgb(255, 255, 255);
    color: black;
    text-align: center;
    font-weight: 500;
}

.box p,h1,h3,h2{
    color: black;
}

.fab{
    color: crimson;
    font-size: larger;
}

.pleft, .fa{
    margin-left: 10px;
    text-align: left;
    color: black;
}

/* .skills{
    background-color: #f1f1f110;
    height: 18vh;
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.skills h1{
    color: var(--prim);
    margin-top: 10px;
}

.skills img{
    position: relative;
    height: 80px;
    width: auto;
} */




.footer{
    background-color: rgba(0, 0, 0, 0.295);
}

.footer-text{
    padding: 20px;
    color: var(--prim);
}