.pic-container {
    margin-top: 100px;
    margin-bottom: 150px;
}

.checkered {
    width: 100%;
    height: 100px;
    background: conic-gradient(
    #31f2bb 90deg,
    #000000 90deg 180deg,
    #31f2bb 180deg 270deg,
    #000000 270deg
    );
    background-repeat: repeat ;
    background-size: 100px 100px;
    background-position: top left;

    overflow: hidden;
    box-shadow: 7.3px 14.6px 14.6px hsl(0deg 0% 0% / 0.27);
}

.picture {
    background-color: aqua;
    width: 250px;
    height: 250px;
    position: absolute;
    top: 190px;
    left: 100px;
    box-shadow: 7.3px 14.6px 14.6px hsl(0deg 0% 0% / 0.27);
}

.info-container {
    margin: 100px;
    margin-bottom: 50px;
    display: flex;
}


#info-header {
    font-family: "bebas-neue-pro-expanded", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: black;
    font-size: 2.5em;
}

#info-paragraph {
    font-family: "New Hero", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .9em;
    color: black;
    padding-right: 280px;
    text-align: justify;
}

#contact-header {
    font-family: "bebas-neue-pro-expanded", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: black;
    font-size: 2.5em;
}

#contact-paragraph {
    font-family: "New Hero", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .9em;
    color: black;
    margin-bottom: 40px;
}

#hours-header {
    font-family: "bebas-neue-pro-expanded", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: black;
    margin-bottom: 8px;
}

#hours {
    font-family: "New Hero", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .9em;
    color: black;
    text-align: left;
    padding-right: 20px;
}

.info-col-1 {
    width: 60%;
}

.info-col-2 {
    width: 40%;
}

.resume {
    margin-left: 100px;
    margin-bottom: 100px;
}

#resumeBtn {
    font-family: "New Hero", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #FFFF40;
    background-color: black;
    border: none;
    text-align: left;
    padding: 10px;
}

#resumeBtn:hover {
    color: #007FFF;
    cursor: pointer;
}

@media (max-width: 320px){
    .pic-container {
        margin-top: 100px;
        margin-bottom: 75px;
    }
    
    .checkered {
        width: 100%;
        height: 90px;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 90px 90px;
        background-position: top left;
    
        overflow: hidden;
    }

    .picture {
    background-color: aqua;
    width: 140px;
    height: 140px;
    position: absolute;
    top: 185px;
    left: 50px;
    box-shadow: 7.3px 7px 14.6px hsl(0deg 0% 0% / 0.27);
    }

    .pic-container {
        margin-top: 50px;
    }

    .info-container {
        margin-top: 10px;
        margin: 50px;
        margin-bottom: 25px;
        display: block;
    }
    
    
    #info-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        font-size: .75em;
    }
    
    #info-paragraph {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .75em;
        color: black;
        text-align: justify;
        padding-right: 30px;
    }
    
    #contact-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        font-size: 1.5em;
        margin-top: 50px;
    }
    
    #contact-paragraph {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .75em;
        color: black;
        margin-bottom: 20px;
        margin-top:5px;
    }
    
    #hours-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        margin-bottom: 3px;
        margin-top: 50px;
    }
    
    #hours {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .9em;
        color: black;
        text-align: left;
        padding-right: 20px;
    }
    
    .info-col-1 {
        width: 100%;
    }
    
    .info-col-2 {
        width: 100%;
    }
    
    .resume {
        margin-left: 50px;
        margin-bottom: 100px;
        font-size: .75em;
    }
    
    #resumeBtn {
        font-family: "New Hero", sans-serif;
        font-weight: 300;
        font-style: normal;
        color: #FFFF40;
        background-color: black;
        border: none;
        text-align: left;
        padding: 10px;
        font-size: .9em;
    }
    
    #resumeBtn:hover {
        color: #007FFF;
        cursor: pointer;
    }
    
}

@media (min-width: 320px) and (max-width: 679px){
    .pic-container {
        margin-top: 100px;
        margin-bottom: 75px;
    }
    
    .checkered {
        width: 100%;
        height: 90px;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 90px 90px;
        background-position: top left;
    
        overflow: hidden;
    }

    .picture {
    background-color: aqua;
    width: 140px;
    height: 140px;
    position: absolute;
    top: 185px;
    left: 50px;
    box-shadow: 7.3px 7px 14.6px hsl(0deg 0% 0% / 0.27);
    }

    .pic-container {
        margin-top: 50px;
    }

    .info-container {
        margin-top: 2px;
        margin: 50px;
        margin-bottom: 15px;
        display: block;
    }
    
    
    #info-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        font-size: 1em;
    }
    
    #info-paragraph {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .6em;
        color: black;
        text-align: justify;
        padding-right: 10px;
    }
    
    #contact-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        font-size: 1em;
        margin-top: 25px;
    }
    
    #contact-paragraph {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .6em;
        color: black;
        margin-bottom: 20px;
        margin-top:5px;
    }
    
    #hours-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        margin-bottom: 3px;
        margin-top: 25px;
    }
    
    #hours {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .9em;
        color: black;
        text-align: left;
        padding-right: 20px;
    }
    
    .info-col-1 {
        width: 100%;
    }
    
    .info-col-2 {
        width: 100%;
    }
    
    .resume {
        margin-left: 50px;
        margin-bottom: 100px;
        font-size: .75em;
    }
    
    #resumeBtn {
        font-family: "New Hero", sans-serif;
        font-weight: 300;
        font-style: normal;
        color: #FFFF40;
        background-color: black;
        border: none;
        text-align: left;
        padding: 10px;
        font-size: .9em;
    }
    
    #resumeBtn:hover {
        color: #007FFF;
        cursor: pointer;
    }
    
}

@media (min-width: 680px){
    .pic-container {
        margin-top: 100px;
        margin-bottom: 75px;
    }
    
    .checkered {
        width: 100%;
        height: 90px;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 90px 90px;
        background-position: top left;
    
        overflow: hidden;
    }

    .picture {
    background-color: aqua;
    width: 140px;
    height: 140px;
    position: absolute;
    top: 185px;
    left: 50px;
    box-shadow: 7.3px 7px 14.6px hsl(0deg 0% 0% / 0.27);
    }

    .pic-container {
        margin-top: 50px;
    }

    .info-container {
        margin-top: 10px;
        margin: 50px;
        margin-bottom: 25px;
        display: flex;
    }
    
    
    #info-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        font-size: 1.75em;
    }
    
    #info-paragraph {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .75em;
        color: black;
        text-align: justify;
        padding-right: 80px;
    }
    
    #contact-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        font-size: 1.5em;
    }
    
    #contact-paragraph {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .75em;
        color: black;
        margin-bottom: 20px;
        margin-top:5px;
    }
    
    #hours-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        margin-bottom: 3px;
        margin-top: 50px;
    }
    
    #hours {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .9em;
        color: black;
        text-align: left;
        padding-right: 20px;
    }
    
    .info-col-1 {
        width: 60%;
    }
    
    .info-col-2 {
        width: 30%;
    }
    
    .resume {
        margin-left: 50px;
        margin-bottom: 100px;
        font-size: .75em;
    }
    
    #resumeBtn {
        font-family: "New Hero", sans-serif;
        font-weight: 300;
        font-style: normal;
        color: #FFFF40;
        background-color: black;
        border: none;
        text-align: left;
        padding: 10px;
        font-size: .9em;
    }
    
    #resumeBtn:hover {
        color: #007FFF;
        cursor: pointer;
    }
    
}

@media (min-width: 900px){
    .pic-container {
        margin-top: 100px;
        margin-bottom: 75px;
    }
    
    .checkered {
        width: 100%;
        height: 90px;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 90px 90px;
        background-position: top left;
    
        overflow: hidden;
    }

    .picture {
    background-color: aqua;
    width: 140px;
    height: 140px;
    position: absolute;
    top: 185px;
    left: 50px;
    box-shadow: 7.3px 7px 14.6px hsl(0deg 0% 0% / 0.27);
    }

    .pic-container {
        margin-top: 50px;
    }

    .info-container {
        margin-top: 10px;
        margin: 50px;
        margin-bottom: 25px;
        display: flex;
    }
    
    
    #info-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        font-size: 2em;
    }
    
    #info-paragraph {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .75em;
        color: black;
        text-align: justify;
        padding-right: 130px;
    }
    
    #contact-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        font-size: 1.5em;
    }
    
    #contact-paragraph {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .75em;
        color: black;
        margin-bottom: 20px;
        margin-top:5px;
    }
    
    #hours-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        margin-bottom: 3px;
        margin-top: 50px;
    }
    
    #hours {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .9em;
        color: black;
        text-align: left;
        padding-right: 20px;
    }
    
    .info-col-1 {
        width: 50%;
    }
    
    .info-col-2 {
        width: 50%;
    }
    
    .resume {
        margin-left: 50px;
        margin-bottom: 100px;
        font-size: .75em;
    }
    
    #resumeBtn {
        font-family: "New Hero", sans-serif;
        font-weight: 300;
        font-style: normal;
        color: #FFFF40;
        background-color: black;
        border: none;
        text-align: left;
        padding: 10px;
        font-size: .9em;
    }
    
    #resumeBtn:hover {
        color: #007FFF;
        cursor: pointer;
    }
    
}


@media (min-width: 1288px){
    .pic-container {
        margin-top: 100px;
        margin-bottom: 150px;
    }
    
    .checkered {
        width: 100%;
        height: 100px;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 100px 100px;
        background-position: top left;
    
        overflow: hidden;
        box-shadow: 7.3px 14.6px 14.6px hsl(0deg 0% 0% / 0.27);
    }
    
    .picture {
        background-color: aqua;
        width: 250px;
        height: 250px;
        position: absolute;
        top: 190px;
        left: 100px;
        box-shadow: 7.3px 14.6px 14.6px hsl(0deg 0% 0% / 0.27);
    }
    
    .info-container {
        margin: 100px;
        margin-bottom: 50px;
        display: flex;
    }
    
    
    #info-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        font-size: 2.5em;
    }
    
    #info-paragraph {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .9em;
        color: black;
        padding-right: 280px;
        text-align: justify;
    }
    
    #contact-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        font-size: 2.5em;
    }
    
    #contact-paragraph {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .9em;
        color: black;
        margin-bottom: 40px;
    }
    
    #hours-header {
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black;
        margin-bottom: 8px;
    }
    
    #hours {
        font-family: "New Hero", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: .9em;
        color: black;
        text-align: left;
        padding-right: 20px;
    }
    
    .info-col-1 {
        width: 60%;
    }
    
    .info-col-2 {
        width: 40%;
    }
    
    .resume {
        margin-left: 100px;
        margin-bottom: 100px;
    }
    
    #resumeBtn {
        font-family: "New Hero", sans-serif;
        font-weight: 300;
        font-style: normal;
        color: #FFFF40;
        background-color: black;
        border: none;
        text-align: left;
        padding: 10px;
    }
    
}