@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap');

*  {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     
}

body{
     font-family: 'Londrina Solid', cursive;
     font-size: 16px;
     line-height: 1.5;
     color: #000;
     background: #a1c3ff;
     
}

a{
     text-decoration: none;
}

a:link{
     color: #000;
}
a:visited{
     color: #000;
}

img{
     max-width: 100%;
     display:block;
     justify-items: center;
     margin-bottom: 25px;
}

h1, h2{
     margin-bottom: 15px;
}

ul {
     list-style-type: none;
}

.container{
     min-width: 375px;
     margin: 0 auto;
     padding: 0 30px;
}

.navbar{
     background: #3474e6;
      background-image: linear-gradient( rgba(51, 16, 251, 0.5),rgba(0, 0, 0, 0.4));
     color: #fff;
     height: 60px;
}

.navbar a {
     color: #fff;
     text-decoration: none;
     font-size: 18px;
     font-weight: bold;
}

.navbar a:hover{
     color: black;
}

.navbar .logo{
     font-size: x-large;
     font-weight: bold;
     scale: 120%;
     

}

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

.navbar ul{
     display: flex;
}

.navbar ul li {
     margin-left: 20px;
}

.header {
     background-color: #fff;
     color: #fff;
     min-height: auto;

}

.header h1{
     font-size: 3rem;
     font-weight: bold;
     line-height: 1.2;
}

/* .header img{
     max-width: auto;
} */

.header .container{
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.boxes .container{
     justify-content: space-between;
}

.box2{
     flex:2 1 500px;
     background: #000;
     color: #0a51cc;
     background-image: linear-gradient( rgba(0, 0, 0, 0.8),rgba(210, 210, 210, 0.225),rgba(0, 0, 0, 0.6));
     border-bottom: 2px solid rgba(0, 0, 0, 0.8);
     text-shadow: 1px 1px 1px #6ea3ff;
     text-align: center;
     border-radius: 10px;
     margin: 20px 10px;
     box-shadow: 2px 2px 1px rgb(255, 255, 255);
     padding: 15px 20px;
     text-align: center;
}

.active-sheen {
     border-radius: 5px;
     background-image: linear-gradient(rgb(25, 0, 165, .6), rgba(0, 0, 66, 0.2));
     border-bottom: .1px solid rgba(255, 255, 255, .15);
     border-left: .1px solid rgba(255, 255, 255, 0.15);
     margin-bottom: 5px;

}

input {
     margin-bottom: 10px;
}

/* .box2 i {
     margin-right: 10px;
} */


@media (min-width: 375px) {
     .header .container{
          flex-direction: column;
          text-align: center;
     }
     .boxes .container{
          display: flex;
          flex-wrap:wrap ;

     }
}
/* @media (max-width: 750px) {
.container{
     max-width: 750px;
     margin: 0 auto;
     padding: 0 30px;
}
} */



.skills{
     column-count: 2;
     padding: 2px;
}
.skillsss{
     margin: 5px;
     border:1px solid #fff;
}

iframe{
     width: 100%;
}

.carousel-item>img{
     border-radius: 10px;
     border: 5px solid #000;
     border-bottom: 15px solid #000;
}

.grid-container2{
     display: grid;
     grid-template-columns:repeat(2, auto);
     grid-template-rows: auto;
     }

.grid-container3{
     display: grid;
     grid-template-columns:repeat(1, auto);
     grid-template-rows: auto;
     }
     
     .grid-item-2{
          background-color: #000;
          border: 3px solid black;
          padding: 5px;
          margin: 5px;
          gap: 20px;
          text-align: center;
          border-radius: 5px;
          
     }

.back-arrow{
     padding-right: 20px;
}

.forward-arrow{
     padding-left: 20px;
}

@media (min-width: 1080px) {
     .grid-container2{
          display: grid;
          grid-template-columns:repeat(3, auto);
          grid-template-rows: auto;
          }
     
     .grid-container3{
          display: grid;
          grid-template-columns:repeat(2, 950px);
          grid-template-rows: auto;
          }
     /* .grid-container3{
          display: grid;
          grid-template-columns:repeat(1, 750px);
          grid-template-rows: auto;
          } */
}