@media screen and (min-width: 200px) {

    .pic{
        float:inline-start;
        border-radius: 10%;
    }
    
    h1, p{
        text-align: center;
    }
    
    
    .containermt-4{
        grid-template-rows: 1fr;
    }
    
    /* .yell{
        margin-top: 70px;
        background-color: rgb(16, 24, 28);
    
    } */
    
    .additional-text {
        display: none; /* Hide the additional text by default */
        margin-top: 10px;
      }
    
     .homepg{
        margin-top: 80px;
    }
    .containerabt{
        margin-top: 100px;
        background-color: rgb(60, 171, 245);
        display: flex;
          align-items: center;
          justify-content: center;
          height: 100vh; 
        
    }
    
    
    
     .allbox{
        display:grid;
        grid-template-columns: 1fr 1fr;
    } 
    
    .abth1, .abtp{
        margin-left: 60px;
        margin-right: 60px;
    }
    
    .skills{

      background-color: #3498db;
      color: #0b0101;
      text-align: center;
      /* line-height: 150px; */
      /* margin: 10px; */
      display: inline-block;
      width: 100%
    }
    
    .footer{
        font-size: 11px;
    }
    
    .big{
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    
    .projects{
        display: flex;
          justify-content: space-around;
          align-items: center;
          height: 100vh;
    }
    
    .bullet {
        position: relative;
        display: inline-block;
        cursor: pointer;
      }
    
    .bullet, .text-overlay {
        visibility: hidden;
          position: absolute;
          top: 100%;
          left: 0;
          width: 150px;
          background-color: #555;
          color: #fb0a0a;
          text-align: center;
          border-radius: 5px;
          padding: 5px;
          opacity: 0;
          transition: opacity 0.3s;
    }
    
    .bullet:hover, .text-overlay {
        visibility: visible;
          opacity: 1;
    }
    
    .custom-box {
      position: relative;
      width: 100%;
      height: 100px;
      background-color: #3498db;
      color: #0d0303;
      text-align: center;
      /* line-height: 100px; */
      margin: 10px 0;
      display: inline-block;
      cursor: pointer;
        
        /* margin-left: 90px;
        position: relative;
        display:inline-block;
        width: 200px;
        height: 200px;
        margin: 10px;
        background-color: #0f5c90;
        color: #fff;
        text-align: center;
        padding: 10px;
        cursor: pointer;  */
      }
    
      .custom-box .hover-text {
        visibility: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
        opacity: 0;
        transition: opacity 0.3s;
      }
    
      .custom-box:hover .hover-text {
        visibility: visible;
        opacity: 1;
      } 
    

      .skip-link {
        position: absolute;
        top: 10px;
        right: 200px;
        background-color: #3498db;
        color: #fff;
        padding: 10px;
        z-index: 999;
        opacity: 0;
        transition: opacity 0.3s;
      }
  
      .skip-link a {
        color: #fff;
        text-decoration: none;
      }
  
      /* Make the skip-link visible when focused */
      .skip-link:focus {
        opacity: 1;
      }

      .fullcode{
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out;
      }

      .footer{
        width:100%;
        /* align-content:center; */
      }

      #contact-form {
        max-width: 400px;
        margin: 0 auto;
      }
      textarea {
        width: 100%;
        height: 100px;
      }

      .iconic{
        position: fixed;
      top: 60px;
      right: 10px;
      z-index: 1000;
      }

      .scroll-buttons {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
      }


}

@media screen and (min-width: 770px){
    .custom-box {
        position: relative;
        width: 100%;
        height: 250px;
        background-color: #3498db;
        color: #0d0303;
        text-align: center;
        /* line-height: 100px; */
        margin: 10px 0;
        display: inline-block;
        cursor: pointer;
    }
}

@media screen and (min-width: 1200px){
    

.big{
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    
}

.pic{
    float:inline-start;
    border-radius: 50%;
}

h1, p{
    text-align: center;
}


.containermt-4{
    grid-template-rows: 1fr;
}

.yell{
    margin-top: 70px;
    background-color: rgb(40, 156, 214);

}

.additional-text {
    display: none; /* Hide the additional text by default */
    margin-top: 10px;
  }

.homepg{
    margin-top: 80px;
}
.containerabt{
    margin-top: 100px;
    background: linear-gradient(45deg, #7598c9, #0c9aed);
    display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh; 
    
}
.projmarg{
    margin-top: 10px;
    display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh; 
}

.abth1, .abtp{
    margin-left: 60px;
    margin-right: 60px;
}

.skills{
    background: linear-gradient(45deg, #7598c9, #0c9aed);
    margin-top: 10px;
    display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh; 
}

.footer{
    font-size: 11px;
}

.big{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.projects{
    display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100vh;
}

.bullet {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

.bullet, .text-overlay {
    visibility: hidden;
      position: absolute;
      top: 100%;
      left: 0;
      width: 150px;
      background-color: #555;
      color: #fb0a0a;
      text-align: center;
      border-radius: 5px;
      padding: 5px;
      opacity: 0;
      transition: opacity 0.3s;
}

.bullet:hover, .text-overlay {
    visibility: visible;
      opacity: 1;
}

.custom-box {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 10px;
    background-color: #0f5c90;
    color: #fff;
    text-align: center;
    padding: 10px;
    cursor: pointer;
  }

  .custom-box .hover-text {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .custom-box:hover .hover-text {
    visibility: visible;
    opacity: 1;
  }

}