body {
    background-color: #0D0D0D;
    color: white;
}
.topnav {
    overflow: hidden;
    /* background-color: #333; */
    display: grid;
    grid-template-columns: 20% 15% 15% 15% 15% 15% 5%;
    grid-template-rows: 100px 100px;
    align-items: center;
  }
  .logo {
    grid-area: 1/1/3/1;
    object-fit: contain;
    align-self: self-start;
  }
  .topnav a {
    /* float: left; */
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    border-radius: 30px 30px 30px 30px;
  }
  
  .topnav a:hover {
    background-color: #0D0D0D;
    color: #299FBE;
    border: 2px solid #299FBE;
  }
  
  .topnav a.active {
    background-color: #299FBE;
    color: white;
  }
  
  .topnav .icon {
    display: none;
    float: right;
    color: #299FBE;
    font-size: 15px;
    padding: 5px;
  }
  .topnav .icon :hover {
    background-color: transparent;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .main4 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto;
        grid-gap: 2%;
        margin-left: 5%;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      /* float: none; */
      display: block;
      text-align: center;
      font-size: 12px;
    }
    .main4 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto;
        grid-gap: 2%;
        margin-left: 5%;
    }
  }
.main {
    display: grid;
    grid-template-columns: 55% 42%;
    grid-template-rows: 450px;
    grid-gap: 2%;
    height: 300px;
    margin-left: 5%;
    margin-right: 5%;
}
.main-items1 {
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
    display: grid;
    grid-template-rows: 50px 50px 50px 50px 40px;
    grid-gap: 2%;
}

.main-items1-items1 {
    width: 100%;
    height: 50px;
    /* background-color: red; */
    align-content: center;
}
.main-items1-items2 {
    width: 100%;
    height: 50px;
    /* background-color: blue; */
    align-content: center;
}
.main-items1-items3 {
    width: 100%;
    height: 50px;
    /* background-color: black; */
    align-content: center;
}
.main-items1-items4 {
    width: 100%;
    height: 50px;
    /* background-color: brown; */
}
.main-items1-items4 a {
    text-decoration: none;
}
.main-items1-items5 {
    width: 100%;
    height: 40px;
    /* background-color: purple; */
    display: grid;
    grid-template-columns: 40% 40%;
    grid-gap: 5%;
}
.main-items1-items5 a {
    text-decoration: none;
    color: white;
}
.main-items1-buttons1 {
    width: 100%;
    height: 40px;
    background-color: #299FBE;
    align-content: center;
    border-radius: 50px 50px 50px 50px;
}
.main-items1-buttons1 a {
    text-decoration: none;
    color: white;
}
.main-items1-buttons2 {
    width: 100%;
    height: 40px;
    background-color: #299FBE;
    align-content: center;
    border-radius: 50px 50px 50px 50px;
}


.main-items2 {
    width: 100%;
    height: 100%;
    /* background-color: yellow; */
}
.main-items2 img { 
    width: 100%; 
    height: 100%; 
    object-fit:cover; 
} 
.footer {
    width: 100%;
    height: 40px;
    background-color: black;
    color: white;
    align-content: center;
}

/* about page css */
.main2 {
    display: grid;
    grid-template-columns: 45% 47%;
    grid-gap: 2%;
    margin-left: 5%;
    /* margin-right: 5%; */
}
.main2-items1 {
    width: 100%;
    height: 400px;
    /* background-color: red; */
}
.main2-items2 {
    width: 75%;
    height: 400px;
    /* background-color: blue; */
    border-radius: 100%;
    margin-left: 10%;
    border: 3px solid #299FBE;
}
.main2-items2 img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: 100%;
}
.main2-items3 {
    width: 100%;
    height: 400px;
    /* background-color: green; */
    grid-area: 2/1/2/3;
}
.main2-items3 iframe {
    width: 100%;
    height: 340px;
}
.education ul {
    list-style-type: none;
    margin-left: 5%;
}
.primary h3 {
    border-bottom: 3px solid #299FBE;
    width: 20%;
}
.high {
    border-bottom: 3px solid #299FBE;
    width: 40%;  
}
.tertiary {
    border-bottom: 3px solid #299FBE;
    width: 60%;  
}
.extra {
    border-bottom: 3px solid #299FBE;
    width: 80%;  
}
.about-me {
    width: 90%;
    height: auto;
    margin-left: 5%;
    margin-right: 5%;
    text-align:center;
}
.hobbies {
    width: 90%;
    height: auto;
    margin-left: 5%;
}
.gaming {
    display: grid;
    grid-template-columns: 8% 90%;
    height: 100px;
    /* background-color: red; */
    align-content: center;
}
.description1 {
    align-self: center;
    font-size: 25px;
}
.ri-gamepad-fill {
    font-size: 70px;
    color: #299FBE;
}
.ri-film-fill {
    font-size: 70px;
    color: #299FBE;
}
.ri-heart-pulse-fill {
    font-size: 70px;
    color: #299FBE;
}
.ri-music-2-fill {
    font-size: 70px;
    color: #299FBE;
}

/* projects page css */
.main3 {
    display: grid;
    grid-template-columns: 46% 46%;
    grid-gap: 2%;
    margin-left: 5%;
}
.main3-items1 {
    width: 100%;
    height: 400px;
    /* background-color: red; */
    border-radius: 50px 50px 50px 50px;
    display: grid;
    grid-template-rows: 250px 50px 100px;
    border: 3px solid #299FBE;
    box-sizing: border-box;
}
.main3-items1-content1 {
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
    border-radius: 50px 50px 50px 50px;
}
.main3-items1-content1 img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: 50px 50px 50px 50px;
}
.main3-items1-content2 {
    width: 100%;
    height: 100%;
    /* background-color: purple; */
}
.main3-items1-content3 {
    width: 100%;
    height: 100%;
    /* background-color: black; */
    border-radius: 0px 0px 50px 50px;
}
.main3-items2 {
    width: 100%;
    height: 400px;
    /* background-color: green; */
    border-radius: 50px 50px 50px 50px;
    display: grid;
    grid-template-rows: 250px 50px 100px;
    border: 3px solid #299FBE;
    box-sizing: border-box;
}
.main3-items2-content1 {
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
    border-radius: 50px 50px 50px 50px;
}
.main3-items2-content1 img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: 50px 50px 50px 50px;
}
.main3-items2-content2 {
    width: 100%;
    height: 100%;
    /* background-color: purple; */
}
.main3-items2-content3 {
    width: 100%;
    height: 100%;
    /* background-color: black; */
    border-radius: 0px 0px 50px 50px;
}
.main3-items3 {
    width: 100%;
    height: 400px;
    /* background-color: blue; */
    border-radius: 50px 50px 50px 50px;
    display: grid;
    grid-template-rows: 250px 50px 100px;
    border: 3px solid #299FBE;
    box-sizing: border-box;
}
.main3-items3-content1 {
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
    border-radius: 50px 50px 50px 50px;
}
.main3-items3-content1 img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: 50px 50px 50px 50px;
}
.main3-items3-content2 {
    width: 100%;
    height: 100%;
    /* background-color: purple; */
}
.main3-items3-content3 {
    width: 100%;
    height: 100%;
    /* background-color: black; */
    border-radius: 0px 0px 50px 50px;
}
.main3-items4 {
    width: 100%;
    height: 400px;
    /* background-color: gold; */
    border-radius: 50px 50px 50px 50px;
    display: grid;
    grid-template-rows: 250px 50px 100px;
    border: 3px solid #299FBE;
    box-sizing: border-box;
}
.main3-items4-content1 {
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
    border-radius: 50px 50px 50px 50px;
}
.main3-items4-content1 img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: 50px 50px 50px 50px;
}
.main3-items4-content2 {
    width: 100%;
    height: 100%;
    /* background-color: purple; */
}
.main3-items4-content3 {
    width: 100%;
    height: 100%;
    /* background-color: black; */
    border-radius: 0px 0px 50px 50px;
}


/* services page css  */

.main4 {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: auto;
    grid-gap: 2%;
    margin-left: 5%;
}
.main4-items1 {
    width: 100%;
    height: auto;
    /* background-color: red; */
    border-radius: 50px 50px 50px 50px;
    border: 3px solid #299FBE;
    padding: 10px;
    box-sizing: border-box;
}
.main4-items2 {
    width: 100%;
    height: auto;
    /* background-color: blue; */
    border-radius: 50px 50px 50px 50px;
    border: 3px solid #299FBE;
    padding: 10px;
    box-sizing: border-box;
}
.main4-items3 {
    width: 100%;
    height: auto;
    /* background-color: green; */
    border-radius: 50px 50px 50px 50px;
    border: 3px solid #299FBE;
    padding: 10px;
    box-sizing: border-box;
}
/* contact page css  */
.main5 {
    width: 90%;
    display: grid;
    grid-template-rows: 50px 50px 300px 50px;
    grid-row-gap: 20px;
    margin-left: 5%;
}
.main5-items1 input {
    width: 100%;
    height: 100%;
    background-color: #0D0D0D;
    border-radius: 50px 50px 50px 50px;
    border: 3px solid #299FBE;
    font-size: larger;
    color: white;
}
.main5-items2 input {
    width: 100%;
    height: 100%;
    background-color: #0D0D0D;
    border-radius: 50px 50px 50px 50px;
    border: 3px solid #299FBE;
    font-size: larger;
    color: white;
}
.main5-items3 textarea {
    width: 100%;
    height: 100%;
    background-color: #0D0D0D;
    border-radius: 50px 50px 50px 50px;
    border: 3px solid #299FBE;
    font-size: larger;
    box-sizing: border-box;
    padding: 2%;
    color: white;
}
.main5-items4 button {
    width: 15%;
    height: 100%;
    background-color: transparent;
    border-radius: 50px 50px 50px 50px;
    border: 3px solid #299FBE;
    color: white;
    font-size: larger;
}
.main5-items4 button :hover {
    background-color: #299FBE;
    color: black;
    border: 3px solid black;
    cursor: pointer;
}
.main5-items4 :hover {
    background-color: #299FBE;
    color: black;
    border: 3px solid black;
    cursor: pointer;
}

/* responsive media  */
@media screen and (max-width: 600px) {
    .topnav {
        overflow: hidden;
        /* background-color: #333; */
        display: grid;
        grid-template-columns: 20% 15% 15% 15% 15% 15% 5%;
        grid-template-rows: 70px;
        align-items: center;
      }
      .topnav a {
        /* float: left; */
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 5px 7px;
        text-decoration: none;
        font-size: 15px;
        border-radius: 30px 30px 30px 30px;
      }
      
      .topnav a:hover {
        background-color: #0D0D0D;
        color: #299FBE;
        border: 2px solid #299FBE;
      }
      
      .topnav a.active {
        background-color: #299FBE;
        color: white;
      }
      .main {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 300px 300px;
        grid-gap: 2%;
        height: 430px;
        grid-gap:3%
    }
      .main-items1 {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
        display: grid;
        grid-template-rows: 30px 50px 50px 60px 70px;
        grid-area: 2/1/2/1;
        /* grid-gap: 2%; */
    }
    .main-items1-items1 {
        width: 100%;
        height: auto;
        /* background-color: red; */
        align-content: center;
    }
    .main-items1-items2 {
        width: 100%;
        height: auto;
        /* background-color: blue; */
        align-content: center;
    }
    .main-items1-items3 {
        width: 100%;
        height: auto;
        /* background-color: black; */
        align-content: center;
        font-size: 15px;
    }
    .main-items1-items4 {
        width: 100%;
        height: auto;
        /* background-color: brown; */
        text-align: center;
        align-content: space-around;
    }
    .main-items1-items4 a {
        text-decoration: none;
    }
    .main-items1-items5 {
        width: 100%;
        height: 40px;
        /* background-color: purple; */
        display: grid;
        grid-template-columns: 45% 45%;
        grid-gap: 5%;
        padding-left: 10px;
        box-sizing: border-box;
    }
    .main-items1-buttons1 {
        width: 100%;
        height: 40px;
        background-color: #299FBE;
        align-content: center;
        border-radius: 50px 50px 50px 50px;
    }
    .main-items1-buttons1 a {
        text-decoration: none;
        color: white;
    }
    .main-items1-buttons2 {
        width: 100%;
        height: 40px;
        background-color: #299FBE;
        align-content: center;
        border-radius: 50px 50px 50px 50px;
    }
    .main-items1-buttons1 :hover {
        background-color: #0D0D0D;
        color: #299FBE;
        border: 2px solid #299FBE;
        border-radius: 50px 50px 50px 50px;
    }
    .main-items1-buttons2 :hover {
        background-color: #0D0D0D;
        color: #299FBE;
        border: 2px solid #299FBE;
        border-radius: 50px 50px 50px 50px;
    }
    .main-items2 {
        width: 100%;
        height: 100%;
        /* background-color: yellow; */
    }
    .main-items2 img { 
        width: 100%; 
        height: 100%; 
        object-fit:cover; 
        border: 3px solid #299FBE;
        border-radius: 100%;
    } 

    /* about page css */
    .main2 {
        display: grid;
        grid-template-columns: 92%;
        grid-template-rows: 230px 350px 400px;
        grid-gap: 2%;
        margin-left: 5%;
        /* margin-right: 5%; */
    }
    .main2-items1 {
        width: 100%;
        height: auto;
        /* background-color: red; */
        font-size: 14px;
        grid-area: 2/1/2/1;
    }
    .main2-items2 {
        width: 75%;
        height: 230px;
        /* background-color: blue; */
        border-radius: 100%;
        margin-left: 10%;
        border: 3px solid #299FBE;
        
    }
    .main2-items2 img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        border-radius: 100%;
    }
    .main2-items3 {
        width: 100%;
        height: 400px;
        /* background-color: green; */
        grid-area: 3/1/3/3;
    }
    .main2-items3 iframe {
        width: 100%;
        height: 340px;
    }
    .education ul {
        list-style-type: none;
        /* margin-left: 5%; */
        font-size: 10px;
    }
    .primary h3 {
        border-bottom: 3px solid #299FBE;
        width: 30%;
    }
    .high {
        border-bottom: 3px solid #299FBE;
        width: 40%;  
    }
    .tertiary {
        border-bottom: 3px solid #299FBE;
        width: 55%;  
    }
    .extra {
        border-bottom: 3px solid #299FBE;
        width: 70%;  
    }
    .about-me {
        width: 90%;
        height: auto;
        margin-left: 5%;
        margin-right: 5%;
        text-align:center;
        font-size: medium;
    }
    .hobbies {
        width: 90%;
        height: auto;
        margin-left: 5%;
    }
    .gaming {
        display: grid;
        grid-template-columns: 15% 85%;
        /* background-color: red; */
        align-content: center;
    }
    .description1 {
        align-self: center;
        font-size: 15px;
    }
    .ri-gamepad-fill {
        font-size: 40px;
        color: #299FBE;
    }
    .ri-film-fill {
        font-size: 40px;
        color: #299FBE;
    }
    .ri-heart-pulse-fill {
        font-size: 40px;
        color: #299FBE;
    }
    .ri-music-2-fill {
        font-size: 40px;
        color: #299FBE;
    }
    /* services page css */

    .main4 {
        display: grid;
        grid-template-columns:95%;
        grid-template-rows:auto auto auto;
        grid-gap: 2%;
        margin-left: 5%;
        height: auto;
    }
    .main4-items1 {
        width: 100%;
        height: auto;
        /* background-color: red; */
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: 12px;
        padding: 10px;
        box-sizing: border-box;
    }
    .main4-items2 {
        width: 100%;
        height: auto;
        /* background-color: blue; */
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: 12px;
        padding: 10px;
        box-sizing: border-box;
    }
    .main4-items3 {
        width: 100%;
        height: auto;
        /* background-color: green; */
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: 12px;
        padding: 10px;
        box-sizing: border-box;
    }

    /* projects page css */

    .main3 {
        display: grid;
        grid-template-columns: 92%;
        grid-template-rows: 400px 400px 400px 400px;
        height: 1700px;
        grid-gap: 2%;
        margin-left: 5%;
    }
    .main3-items1 {
        width: 100%;
        height: 400px;
        /* background-color: red; */
        border-radius: 50px 50px 50px 50px;
        display: grid;
        grid-template-rows: 250px 50px 100px;
        border: 3px solid #299FBE;
        box-sizing: border-box;
        text-align:center;
    }
    .main3-items1-content1 {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items1-content1 img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items1-content2 {
        width: 100%;
        height: 100%;
        /* background-color: purple; */
    }
    .main3-items1-content3 {
        width: 100%;
        height: 100%;
        /* background-color: black; */
        border-radius: 0px 0px 50px 50px;
    }
    .main3-items2 {
        width: 100%;
        height: 400px;
        /* background-color: green; */
        border-radius: 50px 50px 50px 50px;
        display: grid;
        grid-template-rows: 250px 50px 100px;
        border: 3px solid #299FBE;
        box-sizing: border-box;
        text-align:center;
    }
    .main3-items2-content1 {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items2-content1 img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items2-content2 {
        width: 100%;
        height: 100%;
        /* background-color: purple; */
    }
    .main3-items2-content3 {
        width: 100%;
        height: 100%;
        /* background-color: black; */
        border-radius: 0px 0px 50px 50px;
    }
    .main3-items3 {
        width: 100%;
        height: 400px;
        /* background-color: blue; */
        border-radius: 50px 50px 50px 50px;
        display: grid;
        grid-template-rows: 250px 50px 100px;
        border: 3px solid #299FBE;
        box-sizing: border-box;
        text-align:center;
    }
    .main3-items3-content1 {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items3-content1 img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items3-content2 {
        width: 100%;
        height: 100%;
        /* background-color: purple; */
    }
    .main3-items3-content3 {
        width: 100%;
        height: 100%;
        /* background-color: black; */
        border-radius: 0px 0px 50px 50px;
    }
    .main3-items4 {
        width: 100%;
        height: 400px;
        /* background-color: gold; */
        border-radius: 50px 50px 50px 50px;
        display: grid;
        grid-template-rows: 250px 50px 100px;
        border: 3px solid #299FBE;
        box-sizing: border-box;
        text-align:center;
    }
    .main3-items4-content1 {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items4-content1 img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items4-content2 {
        width: 100%;
        height: 100%;
        /* background-color: purple; */
    }
    .main3-items4-content3 {
        width: 100%;
        height: 100%;
        /* background-color: black; */
        border-radius: 0px 0px 50px 50px;
    }
    .main5 {
        width: 90%;
        display: grid;
        grid-template-rows: 50px 50px 300px 50px;
        grid-row-gap: 20px;
        margin-left: 5%;
    }
    .main5-items1 input {
        width: 100%;
        height: 100%;
        background-color: #0D0D0D;
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: larger;
        color: white;
    }
    .main5-items2 input {
        width: 100%;
        height: 100%;
        background-color: #0D0D0D;
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: larger;
        color: white;
    }
    .main5-items3 textarea {
        width: 100%;
        height: 100%;
        background-color: #0D0D0D;
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: larger;
        box-sizing: border-box;
        padding: 5%;
        color: white;
    }
    .main5-items4 button {
        width: 50%;
        height: 100%;
        background-color: transparent;
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        color: white;
        font-size: larger;
    }
    .main5-items4 button :hover {
        background-color: #299FBE;
        color: black;
        border: 3px solid black;
        cursor: pointer;
    }
    .main5-items4 :hover {
        background-color: #299FBE;
        color: black;
        border: 3px solid black;
        cursor: pointer;
    }
    
    
    
    
}


@media screen and (max-width: 400px) {
    .topnav {
        overflow: hidden;
        /* background-color: #333; */
        display: grid;
        grid-template-columns: 20% 15% 15% 15% 15% 15% 5%;
        grid-template-rows: 70px;
        align-items: center;
      }
      .topnav a {
        /* float: left; */
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 5px 7px;
        text-decoration: none;
        font-size: 15px;
        border-radius: 30px 30px 30px 30px;
      }
      
      .topnav a:hover {
        background-color: #0D0D0D;
        color: #299FBE;
        border: 2px solid #299FBE;
      }
      
      .topnav a.active {
        background-color: #299FBE;
        color: white;
      }
      .main {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 300px 300px;
        grid-gap: 2%;
        height: 430px;
        grid-gap:3%
    }
      .main-items1 {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
        display: grid;
        grid-template-rows: 30px 50px 50px 60px 70px;
        grid-area: 2/1/2/1;
        /* grid-gap: 2%; */
    }
    .main-items1-items1 {
        width: 100%;
        height: auto;
        /* background-color: red; */
        align-content: center;
    }
    .main-items1-items2 {
        width: 100%;
        height: auto;
        /* background-color: blue; */
        align-content: center;
    }
    .main-items1-items3 {
        width: 100%;
        height: auto;
        /* background-color: black; */
        align-content: center;
        font-size: 15px;
    }
    .main-items1-items4 {
        width: 100%;
        height: auto;
        /* background-color: brown; */
        text-align: center;
        align-content: space-around;
    }
    .main-items1-items4 a {
        text-decoration: none;
    }
    .main-items1-items5 {
        width: 100%;
        height: 40px;
        /* background-color: purple; */
        display: grid;
        grid-template-columns: 45% 45%;
        grid-gap: 5%;
        padding-left: 10px;
        box-sizing: border-box;
    }
    .main-items1-buttons1 {
        width: 100%;
        height: 40px;
        background-color: #299FBE;
        align-content: center;
        border-radius: 50px 50px 50px 50px;
    }
    .main-items1-buttons1 a {
        text-decoration: none;
        color: white;
    }
    .main-items1-buttons2 {
        width: 100%;
        height: 40px;
        background-color: #299FBE;
        align-content: center;
        border-radius: 50px 50px 50px 50px;
    }
    .main-items1-buttons1 :hover {
        background-color: #0D0D0D;
        color: #299FBE;
        border: 2px solid #299FBE;
        border-radius: 50px 50px 50px 50px;
    }
    .main-items1-buttons2 :hover {
        background-color: #0D0D0D;
        color: #299FBE;
        border: 2px solid #299FBE;
        border-radius: 50px 50px 50px 50px;
    }
    .main-items2 {
        width: 100%;
        height: 100%;
        /* background-color: yellow; */
    }
    .main-items2 img { 
        width: 100%; 
        height: 100%; 
        object-fit:cover; 
        border: 3px solid #299FBE;
        border-radius: 100%;
    } 

    /* about page css */
    .main2 {
        display: grid;
        grid-template-columns: 92%;
        grid-template-rows: 230px 350px 400px;
        grid-gap: 2%;
        margin-left: 5%;
        /* margin-right: 5%; */
    }
    .main2-items1 {
        width: 100%;
        height: auto;
        /* background-color: red; */
        font-size: 14px;
        grid-area: 2/1/2/1;
    }
    .main2-items2 {
        width: 75%;
        height: 230px;
        /* background-color: blue; */
        border-radius: 100%;
        margin-left: 10%;
        border: 3px solid #299FBE;
        
    }
    .main2-items2 img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        border-radius: 100%;
    }
    .main2-items3 {
        width: 100%;
        height: 400px;
        /* background-color: green; */
        grid-area: 3/1/3/3;
    }
    .main2-items3 iframe {
        width: 100%;
        height: 340px;
    }
    .education ul {
        list-style-type: none;
        /* margin-left: 5%; */
        font-size: 10px;
    }
    .primary h3 {
        border-bottom: 3px solid #299FBE;
        width: 30%;
    }
    .high {
        border-bottom: 3px solid #299FBE;
        width: 40%;  
    }
    .tertiary {
        border-bottom: 3px solid #299FBE;
        width: 55%;  
    }
    .extra {
        border-bottom: 3px solid #299FBE;
        width: 70%;  
    }
    .about-me {
        width: 90%;
        height: auto;
        margin-left: 5%;
        margin-right: 5%;
        text-align:center;
        font-size: medium;
    }
    .hobbies {
        width: 90%;
        height: auto;
        margin-left: 5%;
    }
    .gaming {
        display: grid;
        grid-template-columns: 15% 85%;
        /* background-color: red; */
        align-content: center;
    }
    .description1 {
        align-self: center;
        font-size: 15px;
    }
    .ri-gamepad-fill {
        font-size: 40px;
        color: #299FBE;
    }
    .ri-film-fill {
        font-size: 40px;
        color: #299FBE;
    }
    .ri-heart-pulse-fill {
        font-size: 40px;
        color: #299FBE;
    }
    .ri-music-2-fill {
        font-size: 40px;
        color: #299FBE;
    }
    /* services page css */

    .main4 {
        display: grid;
        grid-template-columns:95%;
        grid-template-rows:auto auto auto;
        grid-gap: 2%;
        margin-left: 5%;
        height: auto;
    }
    .main4-items1 {
        width: 100%;
        height: auto;
        /* background-color: red; */
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: 12px;
        padding: 10px;
        box-sizing: border-box;
    }
    .main4-items2 {
        width: 100%;
        height: auto;
        /* background-color: blue; */
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: 12px;
        padding: 10px;
        box-sizing: border-box;
    }
    .main4-items3 {
        width: 100%;
        height: auto;
        /* background-color: green; */
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: 12px;
        padding: 10px;
        box-sizing: border-box;
    }

    /* projects page css */

    .main3 {
        display: grid;
        grid-template-columns: 92%;
        grid-template-rows: 400px 400px 400px 400px;
        height: 1700px;
        grid-gap: 2%;
        margin-left: 5%;
    }
    .main3-items1 {
        width: 100%;
        height: 400px;
        /* background-color: red; */
        border-radius: 50px 50px 50px 50px;
        display: grid;
        grid-template-rows: 250px 50px 100px;
        border: 3px solid #299FBE;
        box-sizing: border-box;
        text-align:center;
    }
    .main3-items1-content1 {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items1-content1 img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items1-content2 {
        width: 100%;
        height: 100%;
        /* background-color: purple; */
    }
    .main3-items1-content3 {
        width: 100%;
        height: 100%;
        /* background-color: black; */
        border-radius: 0px 0px 50px 50px;
    }
    .main3-items2 {
        width: 100%;
        height: 400px;
        /* background-color: green; */
        border-radius: 50px 50px 50px 50px;
        display: grid;
        grid-template-rows: 250px 50px 100px;
        border: 3px solid #299FBE;
        box-sizing: border-box;
        text-align:center;
    }
    .main3-items2-content1 {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items2-content1 img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items2-content2 {
        width: 100%;
        height: 100%;
        /* background-color: purple; */
    }
    .main3-items2-content3 {
        width: 100%;
        height: 100%;
        /* background-color: black; */
        border-radius: 0px 0px 50px 50px;
    }
    .main3-items3 {
        width: 100%;
        height: 400px;
        /* background-color: blue; */
        border-radius: 50px 50px 50px 50px;
        display: grid;
        grid-template-rows: 250px 50px 100px;
        border: 3px solid #299FBE;
        box-sizing: border-box;
        text-align:center;
    }
    .main3-items3-content1 {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items3-content1 img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items3-content2 {
        width: 100%;
        height: 100%;
        /* background-color: purple; */
    }
    .main3-items3-content3 {
        width: 100%;
        height: 100%;
        /* background-color: black; */
        border-radius: 0px 0px 50px 50px;
    }
    .main3-items4 {
        width: 100%;
        height: 400px;
        /* background-color: gold; */
        border-radius: 50px 50px 50px 50px;
        display: grid;
        grid-template-rows: 250px 50px 100px;
        border: 3px solid #299FBE;
        box-sizing: border-box;
        text-align:center;
    }
    .main3-items4-content1 {
        width: 100%;
        height: 100%;
        /* background-color: aqua; */
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items4-content1 img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        border-radius: 50px 50px 50px 50px;
    }
    .main3-items4-content2 {
        width: 100%;
        height: 100%;
        /* background-color: purple; */
    }
    .main3-items4-content3 {
        width: 100%;
        height: 100%;
        /* background-color: black; */
        border-radius: 0px 0px 50px 50px;
    }
    .main5 {
        width: 90%;
        display: grid;
        grid-template-rows: 50px 50px 300px 50px;
        grid-row-gap: 20px;
        margin-left: 5%;
    }
    .main5-items1 input {
        width: 100%;
        height: 100%;
        background-color: #0D0D0D;
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: larger;
        color: white;
    }
    .main5-items2 input {
        width: 100%;
        height: 100%;
        background-color: #0D0D0D;
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: larger;
        color: white;
    }
    .main5-items3 textarea {
        width: 100%;
        height: 100%;
        background-color: #0D0D0D;
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        font-size: larger;
        box-sizing: border-box;
        padding: 5%;
        color: white;
    }
    .main5-items4 button {
        width: 50%;
        height: 100%;
        background-color: transparent;
        border-radius: 50px 50px 50px 50px;
        border: 3px solid #299FBE;
        color: white;
        font-size: larger;
    }
    .main5-items4 button :hover {
        background-color: #299FBE;
        color: black;
        border: 3px solid black;
        cursor: pointer;
    }
    .main5-items4 :hover {
        background-color: #299FBE;
        color: black;
        border: 3px solid black;
        cursor: pointer;
    }
    
    
    
    
}