/* .container {
    position: relative;
    top: 4.5rem;
    left: 3%;
    width: 68%;
    height: 32rem;
    overflow: hidden;
    margin-left: 1rem;
    border: 5px solid black; 
    background-color: white;
    font-family: "sour-gummy", sans-serif;
    color: #fa1413;  
    display: flex;
    flex-direction: flex;
} */
.socials a {
    text-decoration: none;
    color:black;
  }

.container {
    width: 100%;
    max-width: 1200px;
    height: 80vh;
    overflow-y: auto; 
    overflow-x: hidden; 
    border: 5px solid black;
    background-color: white;
    font-family: "sour-gummy", sans-serif;
    box-sizing: border-box;
    /* margin: 2rem auto;  */
    padding: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-right: 1rem;
    color: #fa1413;  
    position: relative;
}


.contactLink{
    color: #fa1413;  
}

.bunnyImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-85%, -50%); 
    width:70%;
    height:70%;
  }
  

.contactText{
    fill: #fa1413; 
    position: absolute;
    /* top: 10%; */
    top: calc(10% + 5.5%);
    left: 35%;
    width: 55%;
}

.resumeBtn{
    cursor: pointer;
    position: absolute;
    top: 55%;
    left: 57%;
    width: 20%;
    pointer-events: auto;
    cursor: pointer;
}

.resumeClick {
    display: inline-block; /* make the <a> take up space */
    position: absolute; /* or relative if you're placing it inside a container */
    top: 55%;
    left: 57%;
    width: 20%;
    height: 17%;
    z-index: 10;
    /* border:2px solid red; */
  }



.resumeBtn:hover{
    fill: #fa1413; 
}

.socials{
    gap: 20%;
    color: black;
    bottom:-3%;
    font-size:1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;         
    text-align: center;    
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.socials h1:hover {
    color: #fa1413;
}


.socials a:hover {
    color: #fa1413;
}


@media (min-width: 1351px) {
    .container {
        width: 95%;              
        /* max-width: 1100px;   */
        margin-left: calc(100px + 1rem);
      }
}

@media (max-width: 1350px) and (min-width: 900px) {
    .container {
        font-size: 1.1rem;
      margin-left: calc(150px + 1rem);
      width: 95%;
      /* margin-right: 1rem; */
    }
    .resumeBtn,.resumeClick{
        top:40vh;
        left:42vw;
    }
    .bunnyImg {
        transform: translate(-75%, -50%); 
        width:60%;
        height:60%;
      }

      .contactText{
        top:15%;
      }
      .socials{
        gap: 8%;
    }
    
}


@media (max-width: 1050px) and (min-width: 900px) {
    .socials{
        gap: 8%;
        font-size: .8rem;
        bottom: 2%;
    }
    .resumeBtn,.resumeClick{
        top:40vh;
        left:38vw;
    }
}


  @media (max-width: 899px) and (min-width:690px){
    .socials{
        gap: 12%;
        font-size: 1rem;
        bottom: 2%;
    }
    .container {
        align-items: center;
        justify-content: center;
        text-align: center;
        /* margin: 2rem auto; */
        width: 95%;
        height: 65vh;
        font-size: 1rem;
        /* max-width: 600px; */
    }
    .contactText {
        width:50%;
        left:40%;
        top:5%;
    }

    .bunnyImg {
        transform: translate(-90%, -70%); 
        width:60%;
        height: 60%;
      }

      .resumeBtn,.resumeClick{
        top:32vh;
        left:55vw;
        width:20%;
    }

  }
  @media (max-width: 691px) and (min-width:576px){
    .socials{
        gap: 10%;
        font-size: .9rem;
        bottom: 2%;
    }

    .resumeBtn,.resumeClick{
        top:35vh;
        left:58vw;
    }
    .container{
        height:65vh;
    }
    .bunnyImg{
        width:60%;
        height: 60%;
    }
  }

  @media (max-width: 575px)and (min-width:416px){
    .socials{
        gap: 8%;
        font-size: .6rem;
        bottom: 2%;
    }
    .resumeBtn,.resumeClick{
        top:20vh;
        left:55vw;
        width:25%;
    }

    .contactText{
        top:2vh;
        left:35vw;

    }
    .container {
        height:45vh;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 2rem auto;
        width: 95%;
        max-width: 500px;
    }
    .bunnyImg {
        transform: translate(-90%, -15vh); 
        width:60%;
        height: 60%;
      }
     
  }

  @media (max-width: 415px) {
    .container {
        height:45vh;
    }
    .resumeBtn,.resumeClick{
        top:22vh;
        left:58vw;
        width:30%;
    }
    .socials{
        gap: 8%;
        font-size: .6rem;
        bottom: 2%;
    }
    .bunnyImg {
        width:60%;
        height: 60%;
      }
}

/* @media (max-width: 1050px) and (min-width: 734px)  {
    .resumeBtn{
        top:32vh;
        width:25%;
        left:35vw;
    }
} */