body {
    background-image: url(Photos/background-grunge.jpg);
    background-repeat: repeat;
    background-position: center;
    color: #E0DFDF;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 16px;  
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(43, 33px);
    column-gap: none;
    row-gap: .5em;
    background-color: lightgray;
    color: #E0DFDF;
    vertical-align: middle;
    padding: 20px;
    margin-top: 20px;

}
#text-credits a:link {
    color: darkorchid;
    text-decoration: none;
}
#text-credits a:visited {
    color: darkorchid;
    text-decoration: none;
}
#text-credits a:hover {
    color: darkorchid;
    text-decoration: none;
}
#text-credits a:active {
    color: darkorchid;
    text-decoration: none;
}
.glyphicon {
    font-size: 5.5em;
}
#glyphicon-caryn-small {
    display: none;
} 
#glyphicon-about-small {
    display: none;
} 
#glyphicon-education-small {
    display: none;
} 
#glyphicon-employment-small {
    display: none;
} 
#glyphicon-techskills-small {
    display: none;
} 
#glyphicon-contact-small {
    display: none;
} 
#glyphicon-credits-small {
    display: none;
} 
#glyphicon-certifications-small {
    display: none;
} 
#glyphicon-covid-small {
    display: none;
} 

.bubble {
    grid-column: span 12;
    border-radius: 10px;
    padding: 20px;
    padding-left: 25px;
    padding-right: 25px;

}

.text-cats {
    grid-column: span 12;
    padding: 1px;
    margin: 0px;
    line-height: 1em;
    text-align: center;
    vertical-align: middle;
    font-size: 2.2em;
}



#bubble-caryn {
    grid-column: 1/8;
    grid-row: 1/6;
    padding-top: 25px;
    background-color: #663300;    
} 
#bubble-about {
    grid-column: 17/25;
    grid-row: 1/8;
    background-color: #b32400;
    line-height: 1.5em;
    padding-top: 30px;
}
#bubble-education {
    grid-column: 1/8;
    grid-row: 6/10;
    background-color: #ff6600;
    line-height: 1em;
}
#bubble-employment {
    grid-column: 17/25;
    grid-row: 8/16;
    background-color:  #ff8c1a;
}
#bubble-techskills {
    grid-column: 1/8;
    grid-row: 10/44;
    background-color: #1390A9;
    font-size: 1.1em;
    line-height: 2.1em;
    padding-top: 35px;
}
#bubble-techskills span {
    font-size: 1em;
}

#bubble-credits {
    grid-column: 17/25;
    grid-row: 16/20;
    background-color: darkorchid;
    position: relative;
    padding-top: 43px;
}
#bubble-credits a {
    color: white;
}
#bubble-certifications {
    grid-column: 17/25;
    grid-row: 20/37;
    background-color: purple;
    padding-top: 40px;
    font-size: 1.05em;
    
}
#bubble-covid {
    grid-column:17/25;
    grid-row: 37/44;
    background-color: #003300;
    font-size: 1.05em;
    padding-top: 50px;
}
#bubble-contact {
    grid-column: 9/16;
    grid-row: 26/41;
    text-align: center;
    font-size: 1.4em;
}
#bubble-contact .glyphicon {
    font-size: 1.4em;
}


#text-caryn {
    grid-column: 9/16;
    grid-row: 1/5;
    color: #663300;
    font-size: 4.4em;
    margin-top: 5px;   
}
#text-caryn :nth-child(1){
    font-size: 1.445em;
}
#text-about {
    grid-column: 9/16;
    grid-row: 5/7; 
    color: #b32400;
    font-size: 4.1em;
}
#text-about :nth-child(2) {
    font-size: .46em;
    line-height: 0em;
}
#text-education {
    grid-column: 9/16;
    grid-row: 8/10;
    color: #ff6600;
    font-size: 3.8em;
}
#text-employment {
    grid-column: 9/16;
    grid-row: 10/13;
    color: #ff8c1a;
    font-size: 3.1em;
}
#text-employment :nth-child(2){
    font-size: 1.62em;
}
#text-techskills {
    grid-column: 9/16;
    grid-row: 13/17;
    color: #1390A9;
    font-size: 3.8em;
    margin-top: 13px;
}
#text-techskills :nth-child(2) {
    font-size: 1.7em;
}
#text-credits {
    grid-column: 9/16;
    grid-row: 17/19;
    color: darkorchid;
    font-size: 5.1em;
    position: relative;
    top: 10px;
}
#text-certifications {
    grid-column: 9/16;
    grid-row: 19/22;
    color: purple;
    font-size: 2.7em;
    position: relative;
    top: 35px;

}
#text-certifications :nth-child(2) {
    font-size: 1.25em;
}
#text-contact {
    grid-column: 9/16;
    grid-row: 23/25;
    color: #003366;
    font-size: 4em;
    border: 4px solid #003366;
    border-radius: 5px;
    padding-top: 5px;
}
#glyphicon-contact {
    grid-column: 9/16;
    grid-row: 25;
}
#glyphicon-contact span {
    grid-column: 12;
    color: #003366;
    position: relative;
    left: 110px;
    top: -28px;
}
#text-covid {
    grid-column: 9/16;
    grid-row: 40/44;
    color: #003300;
    font-size: 3.3em;
}
#text-covid :nth-child(1) {
    font-size: 1.16em;
}
#text-covid :nth-child(3) {
    font-size: .82em;
}
#glyphicon-caryn {
    grid-column: 8;
    grid-row: 1/5;
}
#glyphicon-caryn span {
    color: #663300;
    position: relative;
    top: 35px;
    left: -26px;
}
#glyphicon-about {
    grid-column: 16;
    grid-row: 5/7;
}
#glyphicon-about span {
    color: #b32400;
    position: relative;
    top: 0px;
    left: 26px;
}

#glyphicon-education {
    grid-column: 8;
    grid-row: 8/10;
}
#glyphicon-education span {
    color: #ff6600;
    position: relative;
    top: -10px;
    left: -26px;
}

#glyphicon-employment {
    grid-column: 16;
    grid-row: 10/13;
}
#glyphicon-employment span {
    color: #ff8c1a;
    position: relative;
    top: 10px;
    left: 26px;
}

#glyphicon-techskills {
    grid-column: 8;
    grid-row: 13/17;
}
#glyphicon-techskills span {
    color: #1390A9;
    position: relative;
    top: 40px;
    left: -26px;
}
#glyphicon-credits {
    grid-column: 16;
    grid-row: 17/19;
}
#glyphicon-credits span {
    color: darkorchid;
    position: relative;
    top: 5px;
    left: 26px;
}
#glyphicon-certifications {
    grid-column: 16;
    grid-row: 19/22;
}
#glyphicon-certifications span {
    color: purple;
    position: relative;
    top: 40px;
    left: 26px;
}
#glyphicon-covid {
    grid-column: 16;
    grid-row: 41/44;
}
#glyphicon-covid span {
    color: #003300;
    position: relative;
    top: 10px;
    left: 26px;
}


















/* MEDIUM SIZED DEVICES MEDIUM SIZED DEVICES MEDIA QUERY MEDIUM MEDIUM TWO BUBBLES */
@media (min-width: 992px) and (max-width: 1199px){
.wrapper {
    margin-left: 20px;
    margin-right: 20px;
    grid-template-rows: repeat(64, 33px);

}    
    #bubble-caryn {
        grid-column: 2/13;
        grid-row: 1/5; 
        padding-top: 25px;  
    } 
    #glyphicon-caryn {
        grid-column: 13;
        grid-row: 1/5;
        position: relative;
        left: 3px;
    }
    #text-caryn {
        grid-column: 14/24;
        grid-row: 1/5;
    }
    #bubble-about {
        grid-column: 14/24;
        grid-row: 5/12;
        padding-top: 30px;
    }
    #text-about {
        grid-column: 2/13;
        grid-row: 5/7; 
    }
    #glyphicon-about {
        grid-column: 13;
        grid-row: 5;
    }
    #text-education {
        grid-column: 2/13;
        grid-row: 8/10;
        position: relative;
        top: -20px;
    }
    #bubble-education {
        grid-column: 2/13;
        grid-row: 10/14;
        position: relative;
        top: -10px;
    }
    #glyphicon-education {
        grid-column: 8;
        grid-row: 8/10;
    }
    #glyphicon-education span {
        position: relative;
        top: 15px;
        left: -30px;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
    }
    #text-employment {
        grid-column: 1/13;
        grid-row: 14/17;
    }
    #bubble-employment {
        grid-column: 14/24;
        grid-row: 12/20;
    }
    #bubble-techskills {
        grid-column: 2/13;
        grid-row: 17/53;
        line-height: 2.3em;
        padding-top: 20px;
        font-size: 1.1em;
    }

    #text-techskills {
        grid-column: 14/24;
        grid-row: 20/24;
    }

    #glyphicon-techskills {
        grid-column: 13;
        grid-row: 21;
    }
    #glyphicon-techskills span {
        position: relative;
        top: 0px;
        left: -23px;
    }
    #text-credits {
        grid-column: 14/24;
        grid-row: 24;
    }
    #bubble-credits {
        grid-column: 14/24;
        grid-row: 27/30;
        position: relative;
        padding-top: 25px;
    }
    #glyphicon-credits {
        grid-column: 17;
        grid-row: 26;
    }
    #glyphicon-credits span {
        top: -10px;
        left: 40px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    #text-certifications {
        grid-column: 14/24;
        grid-row: 30/33;
        position: relative;
        top: 0px;
    }
    #glyphicon-certifications {
        grid-column: 17;
        grid-row: 32;
    }
    #glyphicon-certifications span {
        position: relative;
        top: -10px;
        left: 40px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    #bubble-certifications {
        grid-column: 14/24;
        grid-row: 33/51;
        font-size: 1.3em;
        padding-top: 60px;
        padding-bottom: 0px;
        font-size: 1.05em; 
    }
    #text-contact {
        grid-column: 14/24;
        grid-row: 51/53;
    }
    #glyphicon-contact {
        grid-column: 17;
        grid-row: 53;
    }
    #glyphicon-contact span {
        left: 45px;
    }
    #bubble-contact {
        grid-column: 14/24;
        grid-row: 53/59;
        position: relative;
        top: 40px;
        font-size: .8em;
    }
    #text-covid {
        grid-column: 2/13;
        grid-row: 53/56;
    }
    #glyphicon-covid {
        grid-column: 8;
        grid-row: 57;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    #glyphicon-covid span {
        position: relative;
        left: 8px;
        top: 10px;
    }
    #bubble-covid {
        grid-column: 2/13;
        grid-row: 58/64;
        font-size: 1.1em;
        padding-top: 25px;
        position: relative;
        top: 0px;
    }  
    #glyphicon-employment {
        grid-column: 13;
        grid-row: 14;
    }
    #glyphicon-employment span {
        top: 10px;
        left: 23px;
    }
    #bubble-contact .glyphicon {
        font-size: 2.3em;
    }
    
    
}















/* SMALL DEVICES  */
@media (min-width: 768px) and (max-width: 991px){
       .wrapper {
        grid-template-rows: repeat(61, 33px);
        font-size: 90%;
    }    
        #bubble-caryn {
            grid-column: 2/13;
            grid-row: 1/5; 
            padding-top: 20px;  
        } 
        #glyphicon-caryn {
            grid-column: 13;
            grid-row: 1/5;
            position: relative;
            left: 3px;
        }
        #text-caryn {
            grid-column: 14/24;
            grid-row: 1/5;
        }
        #bubble-about {
            grid-column: 14/24;
            grid-row: 5/12;
            padding-top: 25px;
        }
        #text-about {
            grid-column: 2/13;
            grid-row: 5/7; 
        }
        #glyphicon-about {
            grid-column: 13;
            grid-row: 5;
        }
        #text-education {
            grid-column: 2/13;
            grid-row: 8/10;
            position: relative;
            top: -20px;
        }
        #bubble-education {
            grid-column: 2/13;
            grid-row: 10/14;
            position: relative;
            top: -15px;
            padding-top: 25px;
        }
        #glyphicon-education {
            grid-column: 8;
            grid-row: 8/10;
        }
        #glyphicon-education span {
            position: relative;
            top: 15px;
            left: -30px;
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
        }
        #text-employment {
            grid-column: 1/13;
            grid-row: 14/17;
        }
        #bubble-employment {
            grid-column: 14/24;
            grid-row: 12/20;
            padding-top: 30px;
        }
        #bubble-techskills {
            grid-column: 2/13;
            grid-row: 17/50;
            line-height: 2.3em;
            padding-top: 20px;
            font-size: 1.1em;
        }
    
        #text-techskills {
            grid-column: 14/24;
            grid-row: 20/24;
        }
    
        #glyphicon-techskills {
            grid-column: 13;
            grid-row: 21;
        }
        #glyphicon-techskills span {
            position: relative;
            top: 0px;
            left: -23px;
        }
        #text-credits {
            grid-column: 14/24;
            grid-row: 24;
        }
        #bubble-credits {
            grid-column: 14/24;
            grid-row: 27/30;
            position: relative;
            padding-top: 25px;
        }
        #glyphicon-credits {
            grid-column: 17;
            grid-row: 26;
        }
        #glyphicon-credits span {
            top: -10px;
            left: 30px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
        }
        #text-certifications {
            grid-column: 14/24;
            grid-row: 30/33;
            position: relative;
            top: 0px;
        }
        #glyphicon-certifications {
            grid-column: 17;
            grid-row: 32;
        }
        #glyphicon-certifications span {
            position: relative;
            top: -10px;
            left: 30px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
        }
        #bubble-certifications {
            grid-column: 14/24;
            grid-row: 33/48;
            font-size: 1.3em;
            padding-top: 40px;
            padding-bottom: 0px;
            font-size: 1.05em; 
        }
        #text-contact {
            grid-column: 14/24;
            grid-row: 48/50;
        }
        #glyphicon-contact {
            grid-column: 17;
            grid-row: 50;
        }
        #glyphicon-contact span {
            left:35px;
            top: -26px;
        }
        #bubble-contact {
            grid-column: 14/24;
            grid-row: 50/57;
            position: relative;
            top: 23px;
            font-size: 1.1em;
        }
        #text-covid {
            grid-column: 2/13;
            grid-row: 50/54;
        }
        #glyphicon-covid {
            grid-column: 8;
            grid-row: 54;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
        }
        #glyphicon-covid span {
            position: relative;
            left: 0px;
            top: 10px;
        }
        #bubble-covid {
            grid-column: 2/13;
            grid-row: 55/62;
            font-size: 1.1em;
            padding-top: 35px;
            position: relative;
            top: -10px;
        }  
        #glyphicon-employment {
            grid-column: 13;
            grid-row: 14;
        }
        #glyphicon-employment span {
            top: 10px;
            left: 23px;
        }
        #bubble-contact .glyphicon {
            font-size: 2.3em;
        }
    
    
     
}  






















/* EXTRA SMALL MEDIA QUERY */
@media (max-width: 767px) {

    body {
        background-image: none;
        background-color: lightgray;
    }
    #resume-container {
        background-color: lightgray;
 
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        align-items: center;

    }
    /* .wrapper {
        grid-template-rows: repeat(93, 33px);

} */
#glyphicon-caryn {
    display: none;
} 
#glyphicon-about {
    display: none;
} 
#glyphicon-education {
    display: none;
} 
#glyphicon-employment {
    display: none;
} 
#glyphicon-techskills {
    display: none;
} 
#glyphicon-contact {
    display: none;
} 
#glyphicon-credits {
    display: none;
} 
#glyphicon-certifications {
    display: none;
} 
#glyphicon-covid {
    display: none;
} 
    #bubble-caryn {
        grid-row: 1/6;
        grid-column: 1/25;
        height: 100%;
        display: flex;
        align-items: center;
        width: 100%; 
        font-size: 110%;
    }
    #text-caryn {
        grid-row: 7/10;
        grid-column: 1/25;
        font-size: 360%;
        width: 100%;
        position: relative;
        top: 10px;
    }
    #glyphicon-caryn-small {
        display: inline-flex;
        color: #663300;
        grid-row: 5;
        grid-column: 1/25;
        font-size: 1.5em;        
    } 
    #glyphicon-caryn-small span {
        position: relative;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
    }
    #text-about {
        grid-row: 10/11;
        grid-column: 1/25;
        font-size: 340%;
        position: relative;
        top: 0px; 
        width: 100%;
    }
    #glyphicon-about-small {
        display: inline-flex;
        color:  #b32400;
        grid-row: 11;
        grid-column: 1/25;
        font-size: 1.5em;
    } 
    #glyphicon-about-small span {
        position: relative;
        left: 35%;
        transform: translateX(-65%);
    }

    #bubble-about {
        grid-row: 13/21;
        grid-column: 1/25;
        padding-top: 35px;
        display: flex;
        width: 100%;
        text-align: left;
        align-items: center;    
    }
    #bubble-education {
        grid-row: 21/25;
        grid-column: 1/25;
        position: relative;
        top: 0px;
        width: 100%;
        text-align: left; 
        align-items: center;
    }
    #glyphicon-education-small {
        display: inline-flex;
        color: #ff6600;
        grid-row: 24;
        grid-column: 1/25;
        font-size: 1.5em;
 
    } 
    #glyphicon-education-small span {
        position: relative;
        left: 65%;
        transform: translateX(-35%);
        top: -8px;
    }
    #text-education {
        grid-row: 26;
        grid-column: 1/25;
        width: 100%;
        font-size: 320%;
    }
    #text-employment {
        grid-row: 27/28;
        grid-column: 1/25;
        width: 100%; 
        font-size: 255%;
        position: relative;
        top: 18px;
    }
    #glyphicon-employment-small {
        display: inline-flex;
        color: #ff8c1a;
        grid-row: 29;
        grid-column: 1/25;
        font-size: 1.5em;
        width: 100%;
    } 
    #glyphicon-employment-small span {
        position: relative;
        left: 37%;
        transform: translateX(-63%);
    }
    #bubble-employment {
        grid-row: 31/39;
        grid-column: 1/25;
        width: 100%;
        text-align: left;
        vertical-align: middle;       
    }
    #text-techskills {
        grid-row: 39/42;
        grid-column: 1/25;
        width: 100%;
        font-size: 307%;
    }
    #glyphicon-techskills-small {
        display: inline-flex;
        color: #1390a9;
        grid-row: 42;
        grid-column: 1/25;
        font-size: 1.5em;
        width: 100%;
    } 
    #glyphicon-techskills-small span {
        position: relative;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
    }
    #bubble-techskills {
        grid-row: 43/82;
        grid-column: 1/25;
        width: 100%;
        position: relative;
        top: 10px;
        text-align: left;
        align-items: center;
    }
    #bubble-credits {
        grid-row: 83/85;   
        grid-column: 1/25;
        width: 100%;
        position: relative;
        top: 7px;
    }
    #glyphicon-credits-small {
        display: inline-flex;
        color: darkorchid;
        grid-row: 85;
        font-size: 1.5em;
        grid-column: 1/25;
        width: 100%; 

    } 
    #glyphicon-credits-small span {
        position: relative;
        top: -40px;
        left: 37%;
        transform: translateX(-63%);
    }
    #text-credits {
        grid-row: 85;
        grid-column: 1/25;
        width: 100%;
        font-size: 430%;
        position: relative;
        top: 60px;
        text-align: center;
    }
    #text-certifications {
        grid-row: 86;
        grid-column: 1/25;
        width: 100%;
        font-size: 229%;
        text-align: center;
        top: 18px;
    }
    #glyphicon-certifications-small {
        display: inline-flex;
        color: purple;
        grid-row: 87;
        width: 100%;
        grid-column: 1/25; 
        font-size: 1.5em;
    } 
    #glyphicon-certifications-small span {
        position: relative;
        left: 66%;
        transform: translateX(-34%);
    }
    #bubble-certifications {
        grid-row: 88/168;
        grid-column: 1/25;
        /* width: 100%; */
        position: relative;
        top: -48px; 
        text-align: left;
        font-size: .88em;
        display: inline;
        vertical-align: middle;
    }
    #bubble-covid {
        grid-row: 168/199;
        /* width: 100%;  */
        grid-column: 1/25;
        position: relative;
        top: -30px;
        text-align: left;
        font-size: .88em;
        display: inline;
        vertical-align: middle;
        padding-top: 25px;
    }
    #glyphicon-covid-small {
        display: inline-flex;
        color: #003300;
        grid-row: 199;
        width: 100%; 
        grid-column: 1/25;
        font-size: 1.5em;
    } 
    #glyphicon-covid-small span {
        position: relative;
        top: -70px;
        left: 36%;
        transform: translateX(-64%);
    }
    #text-covid {
        grid-row: 199;
        grid-column: 1/25;
        width: 100%; 
        font-size: 267%;
        position: relative;
        top: 22px;
    }
    #text-contact {
        grid-row: 201/202;
        grid-column: 1/25;
        width: 100%;
        font-size: 380%;
        position: relative;
        top: 10px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 0px;
        padding-left: 0px;
        border: none;

    }
    #glyphicon-contact-small {
        display: inline-flex;
        color: #003366;
        grid-row: 202/203;
        width: 100%;
        grid-column: 1/25;
        font-size: 1.5em;
    } 
    #glyphicon-contact-small span {
        position: relative;
        left: 50%;
        transform: translateX(-50%);   
    }
    #bubble-contact {
        grid-row: 203;
        grid-column: 1/25;
        width: 100%; 
        font-size: 120%;
    }
    #bubble-contact .glyphicon {
        font-size: 180%;
    }

































  












 

}