@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Lustria&family=Luxurious+Roman&family=PT+Mono&family=Ultra&family=Varela+Round&display=swap');
/*
font-family: 'Black Ops One', cursive;      //
font-family: 'Luxurious Roman', cursive;    //
font-family: 'PT Mono', monospace;          //
font-family: 'Courier Prime', monospace;    //
font-family: 'Lustria', serif;              //
font-family: 'Ultra', serif;                //
font-family: 'Varela Round', sans-serif;    //
*/
/*
BG1: #0A191E    // Dark Blue
BG2: #143C0A    // Dark Green
FG1: #AFE1FA    // Light Blue
FG2: #3CB42D    // Light Green
FG3: #F3FBF7    // Off-White
*/

/*~~~~~***~~~~~***~~~~~ Mobile View ~~~~~***~~~~~***~~~~~*/
/* ~~~~~~~~~~~~~~~ INTRO ~~~~~~~~~~~~~~~ */
.indexBox #portrait {
    height: 96px;
    width: 96px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* ~~~~~~~~~~~~~~~ BIOGRAPHY ~~~~~~~~~~~~~~~ */
.aboutBox {
    display: grid;
}
.aboutBox #portraitBox {
    grid-row: 1/2;
    align-self: flex-start; 
    justify-self: left;
    border: 2px solid black;
    height: 192px; 
    width: 192px;
}
.aboutBox #portrait {
    width: 100%; 
    height: 100%;
}
.aboutBox #overPortrait {
    grid-row: 1/2; 
    position: relative; 
    bottom: 52px;
    background: rgba(0,0,0,0.4); 
    color: #f1f1f1;
    transition: .75s ease; 
    opacity: 0.75;
    justify-self: center; 
    text-align: center;
    padding: 8px; 
    font-size: 24px;
}
.aboutBox .current {
    grid-row: 2/3;
}
.aboutBox .history {
    grid-row: 3/4;
}

/* ~~~~~~~~~~~~~~~ EDUCATION ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ EMPLOYMENT ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ ACCOMPLISHMENTS ~~~~~~~~~~~~~~~ */
.accompBox img {
    width: 192px;
    display: block;
}
.accompBox #acList {
    font-size: smaller;
}
.accompBox #acList h2 {
    font-family: 'Varela Round', sans-serif;
}
.accompBox #acList li {
    padding: 2px 2px 4px;
}

/*~~~~~***~~~~~***~~~~~ Tablet View ~~~~~***~~~~~***~~~~~*/
@media only screen and (min-width: 481px) {
/* ~~~~~~~~~~~~~~~ INTRO ~~~~~~~~~~~~~~~ */
.indexBox #portrait {
    height: 192px;
    width: 192px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* ~~~~~~~~~~~~~~~ BIOGRAPHY ~~~~~~~~~~~~~~~ */
.aboutBox {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 384px repeat(2, auto);
}
.aboutBox #portraitBox {
    grid-column: 2/5; 
    grid-row: 1/2;
    align-self: center; 
    justify-self: center;
    border: 4px solid #0A191E;
    height: 288px; 
    width: 288px;
}
.aboutBox #portrait {
    width: 100%; 
    height: 100%;
}
.aboutBox #overPortrait {
    grid-column: 2/4; 
    grid-row: 1/2;
    position: relative; 
    bottom: 84px;
    background: rgba(0,0,0,0.4); 
    color: #f1f1f1;
    transition: .75s ease; 
    opacity: 0;
    justify-self: center; 
    text-align: center;
    padding: 16px; 
    font-size: 36px;
}
.aboutBox #portraitBox:hover #overPortrait {
    opacity: 1;
}
.aboutBox .current{
    grid-column: 1/end;
    grid-row: 2/3;
}
.aboutBox .history {
    grid-column: 1/end; 
    grid-row: 3/4;}
}
/* ~~~~~~~~~~~~~~~ EDUCATION ~~~~~~~~~~~~~~~ */
.schoolBox {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}
.schoolBox h3 {
    font-size: 24px; 
    margin-top: 8px; 
    margin-bottom: 8px;
}
.schoolBox #eduHistory {
    display: grid;
    grid-template-columns: auto 96px;
    grid-template-rows: repeat(8, auto);
    grid-column: 1/9; 
    grid-row: 1/2;
}
.schoolBox #eduHistory #naitLogo {
    grid-column: 2/3; grid-row: 2/6;
    align-self: flex-start; justify-self: center;
    padding-top: 16px;
    height: 96px; width: auto;
}
.schoolBox #eduHistory #taylorLogo {
    grid-column: 2/3; grid-row: 6/9;
    align-self: flex-start; justify-self: center;
    padding-top: 16px;
    height: 96px; width: auto;
}
.schoolBox #eduHistory h3{grid-column: 1/3; grid-row: 1/2;}
.schoolBox #eduHistory dl{margin: 4px;}
.schoolBox #eduHistory dt {line-height: 32px;}
.schoolBox #eduHistory dt strong {font-size: 18px}
.schoolBox #eduHistory dt i {padding-left: 24px;}
.schoolBox #eduHistory dd {font-size: 16px; margin-bottom: 24px;}
.schoolBox #eduHistory dt:nth-child(2){grid-column: 1/2; grid-row: 2/3;}
.schoolBox #eduHistory dd:nth-child(3){grid-column: 1/2; grid-row: 3/4;}
.schoolBox #eduHistory dt:nth-child(4){grid-column: 1/2; grid-row: 4/5;}
.schoolBox #eduHistory dd:nth-child(5){grid-column: 1/2; grid-row: 5/6;}
.schoolBox #eduHistory dt:nth-child(6){grid-column: 1/2; grid-row: 6/7;}
.schoolBox #eduHistory dd:nth-child(7){grid-column: 1/2; grid-row: 7/8;}
.schoolBox #eduHistory dd:nth-child(8){grid-column: 1/2; grid-row: 8/9;}
.schoolBox #eduNotes {grid-column: 1/9; grid-row: 2/3;}
.schoolBox #eduNotes h4 {margin: unset; margin-left: 16px; font-size: smaller;}
.schoolBox #eduNotes ul {margin-top: 8px; margin-left: 8px;}
.schoolBox #eduNotes li {font-size: small;}
.schoolBox #eduCalendar {grid-column: 1/9; grid-row: 3/4;}
.schoolBox #eduCalendar table {
    margin: 2px 32px;
    border-spacing: 1px; border: 2px solid black;
}
.schoolBox #eduCalendar caption {
    font-size: 24px; font-family: 'ultra', serif;
    border-radius: 24px 24px 2px 2px;
    background-color: #3CB42D; color: #0A191E;
    border: 2px solid #0A191E;
}
.schoolBox #eduCalendar td, .schoolBox #eduCalendar th {border: 1px solid black; border-collapse: collapse;}
.schoolBox #eduCalendar tr {height: 28px;}
.schoolBox #eduCalendar thead th {
    height: 26px; background-color: #F3FBF780; color: #0A191E;
    border-bottom: 5px double #0A191E;
    font-size: 16px; font-family: 'Black Ops One', cursive;
}
.schoolBox #eduCalendar tbody th {
    font-size: 12px; font-family: 'Courier Prime', monospace;
    font-weight: normal; width: 64px; 
    text-align: left; vertical-align: middle;
    border-right: 4px solid #0A191E;
}
.schoolBox #eduCalendar tbody td {
    font-size: 16px; font-family: 'Courier Prime', monospace;
    font-weight: normal; width: 144px; line-height: 24px;
    text-align: center; vertical-align: middle;
    position: relative;
}
.schoolBox #eduCalendar .taught {
    font-size: 12px; font-family: 'Luxurious Roman', cursive;
    color:#143C0A; line-height: 8px;
}
.schoolBox #eduCalendar .inst {
    font-size: 12px; font-family: 'Varela Round', sans-serif;
    color: #0A191E; line-height: 8px;
}
.schoolBox #eduCalendar .narrow {line-height: 16px;}
.schoolBox #eduCalendar tbody tr:nth-child(2n+1) {
    background-color: #3CB42D40;
}
.schoolBox #eduCalendar tbody tr:nth-child(2n+2) {
    background-color: #143C0A40;
}
.schoolBox #eduCalendar #cnt2700 {background-color: coral ;}
.schoolBox #eduCalendar #cnt2750 {background-color: gold;}
.schoolBox #eduCalendar #cnt2800 {background-color: limegreen;}
.schoolBox #eduCalendar #cnt2850 {background-color: deepskyblue;}
.schoolBox #eduCalendar #cnt2965 {background-color: mediumorchid;}
.schoolBox #eduCalendar #cntTut {background-color: aqua;}
.schoolBox #eduCalendar .classDesc {
    display: none; position: absolute; z-index: 1;
    background-color: #0A191ED0; color: #3CB42D;
    text-align: left; font-size: 14px;
    width: 288px; height: auto;
    border: 1px solid #0A191E;
    left: 90%; top: 5%;
}
.schoolBox #eduCalendar .classDesc h5 {
    padding: 0px; margin: 2px; 
    text-align: center; font-size: 16px;
    font-family: 'Varela Round', sans-serif;
    font-weight: normal;
}
.schoolBox #eduCalendar .classDesc p {border: none; line-height: 16px; padding: 2px;}
.schoolBox #eduCalendar sup {padding-left: 144px;}
.schoolBox #eduCalendar #cnt2700:hover .classDesc {display: inline;}
.schoolBox #eduCalendar #cnt2750:hover .classDesc {display: inline;}
.schoolBox #eduCalendar #cnt2800:hover .classDesc {display: inline;}
.schoolBox #eduCalendar #cnt2850:hover .classDesc {display: inline;}
.schoolBox #eduCalendar #cnt2965:hover .classDesc {display: inline;}
.schoolBox #eduCalendar #cntTut:hover .classDesc {display: inline;}
.schoolBox #eduCalendar #cnt2700:hover .classDesc:hover {display: none;}
.schoolBox #eduCalendar #cnt2750:hover .classDesc:hover {display: none;}
.schoolBox #eduCalendar #cnt2800:hover .classDesc:hover {display: none;}
.schoolBox #eduCalendar #cnt2850:hover .classDesc:hover {display: none;}
.schoolBox #eduCalendar #cnt2965:hover .classDesc:hover {display: none;}
.schoolBox #eduCalendar #cntTut:hover .classDesc:hover {display: none;}
.schoolBox #eduCourses {grid-column: 1/11; grid-row: 4/5;}
.schoolBox #eduCourses h4 {
    font-size: 22px; font-family: 'Courier Prime'; font-weight: normal;
    margin-bottom: 4px; padding-left: 64px;
}
.schoolBox #eduCourses .className {
    margin: 16px;
    font-weight: normal; font-size: 18px;
}
.schoolBox #eduCourses .material-symbols-outlined {display: none;}

/* ~~~~~~~~~~~~~~~ EMPLOYMENT ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ ACCOMPLISHMENTS ~~~~~~~~~~~~~~~ */

/*~~~~~***~~~~~***~~~~~ Laptop View ~~~~~***~~~~~***~~~~~*/
@media only screen and (min-width: 769px) {
/* ~~~~~~~~~~~~~~~ INTRO ~~~~~~~~~~~~~~~ */
.indexBox #portrait {
    height: 224px;
    width: 224px;
}

/* ~~~~~~~~~~~~~~~ BIOGRAPHY ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ EDUCATION ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ EMPLOYMENT ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ ACCOMPLISHMENTS ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ FEEDBACK ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ HIRING ~~~~~~~~~~~~~~~ */

}
/*~~~~~***~~~~~***~~~~~ Desktop View ~~~~~***~~~~~***~~~~~*/
@media only screen and (min-width: 1025px) {
/* ~~~~~~~~~~~~~~~ INTRO ~~~~~~~~~~~~~~~ */


/* ~~~~~~~~~~~~~~~ BIOGRAPHY ~~~~~~~~~~~~~~~ */
.aboutBox {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 432px 1fr;
}
.aboutBox #portraitBox {
    grid-column: 1/4; 
    grid-row: 1/2;
    align-self: center; 
    justify-self: center;
    border: 4px solid #0A191E;
    height: 288px; 
    width: 288px;
    margin-top: 24px;
}
.aboutBox .current {
    grid-column: 4/11; 
    grid-row: 1/2;
    margin: 4px 8px 16px 24px; 
    align-self: end;
}
.aboutBox .history {
    grid-row: 2/3;
}
.aboutBox h3 {
    font-size: 24px; 
    margin-top: 4px;
}
.aboutBox p {
    font-size: 14px; 
    padding: 8px 12px;
    text-align: justify; 
    border-width: 2px 4px;
    border-style: solid; 
    border-color: #143C0A;
}
/* ~~~~~~~~~~~~~~~ EDUCATION ~~~~~~~~~~~~~~~ */
.schoolBox {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}
#naitLogo {
    grid-column: 9/10; grid-row: 1/2;
    align-self: flex-start; justify-self: center;
    padding-top: 64px;
    height: 128px; width: auto;
}
#taylorLogo {
    grid-column: 9/10; grid-row: 1/2;
    align-self: flex-start; justify-self: center;
    padding-top: 360px;
    height: 128px; width: auto;
}
#eduHistory {grid-column: 1/9; grid-row: 1/2;}
#eduNotes {grid-column: 2/10; grid-row: 2/3;}
#eduNotes h4 {margin: 0px;}
#eduNotes ul {margin-top: 16px;}
#eduNotes li {font-size: 14px; font-family: 'varela round', sans-serif;}
#eduCalendar {grid-column: 1/10; grid-row: 3/4;}
#eduCourses {grid-column: 1/11; grid-row: 4/5;}
.schoolBox h3 {font-size: 24px; margin-top: 8px; margin-bottom: 8px;}
.schoolBox dl {margin: 4px 24px;}
.schoolBox dt {line-height: 32px;}
.schoolBox dd {font-size: 16px; margin-bottom: 24px;}
.schoolBox dt strong {font-size: 18px}
.schoolBox dt i {padding-left: 24px;}
.schoolBox table {
    margin: 2px 96px;
    border-spacing: 1px; border: 2px solid black;
}
.schoolBox caption {
    font-size: 24px; font-family: 'ultra', serif;
    border-radius: 24px 24px 2px 2px;
    background-color: #3CB42D; color: #0A191E;
    border: 2px solid #0A191E;
}
.schoolBox td, .schoolBox th {border: 1px solid black; border-collapse: collapse;}

.schoolBox table tr {height: 28px;}
.schoolBox thead th {
    height: 28px; background-color: #143C0A80; color: #0A191E;
    border-bottom: 5px double #0A191E; word-spacing: 1.2em;
    font-size: 18px; font-family: 'Black Ops One', cursive;
}
.schoolBox tbody th {
    font-size: 14px; font-family: 'Courier Prime', monospace;
    font-weight: bold; width: 64px; 
    text-align: left; vertical-align: middle;
    border-right: 4px solid #0A191E;
}
.schoolBox tbody td {
    font-size: 18px; font-family: 'Courier Prime', monospace;
    font-weight: normal; width: 144px; line-height: 24px;
    text-align: center; vertical-align: middle;
    position: relative;
}
.schoolBox .taught {
    font-size: 12px; font-family: 'Luxurious Roman', cursive;
    color:#143C0A; line-height: 8px;
}
.schoolBox .inst {
    font-size: 12px; font-family: 'Varela Round', sans-serif;
    color: #0A191E; line-height: 8px;
}
.schoolBox .narrow {line-height: 16px;}
tbody tr:nth-child(2n+1) {
    background-color: #3CB42D40;
}
tbody tr:nth-child(2n+2) {
    background-color: #143C0A40;
}
.schoolBox #cnt2700 {background-color: coral ;}
.schoolBox #cnt2750 {background-color: gold;}
.schoolBox #cnt2800 {background-color: limegreen;}
.schoolBox #cnt2850 {background-color: deepskyblue;}
.schoolBox #cnt2965 {background-color: mediumorchid;}
.schoolBox #cntTut {background-color: aqua;}
.schoolBox .classDesc {
    display: none; position: absolute; z-index: 1;
    background-color: #0A191ED0; color: #3CB42D;
    text-align: left; font-size: 14px;
    width: 288px; height: auto;
    border: 1px solid #0A191E;
    left: 90%; top: 5%;
}
.schoolBox .classDesc h5 {
    padding: 0px; margin: 2px; 
    text-align: center; font-size: 16px;
    font-family: 'Varela Round', sans-serif;
    font-weight: normal;
}
.schoolBox .classDesc p {border: none; line-height: 16px; padding: 2px;}
.schoolBox #eduCalendar sup {padding-left: 160px;}
.schoolBox #cnt2700:hover .classDesc {display: inline;}
.schoolBox #cnt2750:hover .classDesc {display: inline;}
.schoolBox #cnt2800:hover .classDesc {display: inline;}
.schoolBox #cnt2850:hover .classDesc {display: inline;}
.schoolBox #cnt2965:hover .classDesc {display: inline;}
.schoolBox #cntTut:hover .classDesc {display: inline;}
.schoolBox #cnt2700:hover .classDesc:hover {display: none;}
.schoolBox #cnt2750:hover .classDesc:hover {display: none;}
.schoolBox #cnt2800:hover .classDesc:hover {display: none;}
.schoolBox #cnt2850:hover .classDesc:hover {display: none;}
.schoolBox #cnt2965:hover .classDesc:hover {display: none;}
.schoolBox #cntTut:hover .classDesc:hover {display: none;}
#eduCourses .material-symbols-outlined {display: none;}
#eduCourses h4 {
    font-size: 22px; font-family: 'Courier Prime';
    margin-bottom: 4px; padding-left: 64px;
}
.className {
    margin: 16px;
    font-weight: bold; font-size: larger;
}

/* ~~~~~~~~~~~~~~~ EMPLOYMENT ~~~~~~~~~~~~~~~ */
.employBox {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}
.workHistory {
    grid-column: 2/10;
    grid-row: 1/2;
    display: grid;
    grid-template-columns: 192px 80px 36px 112px 128px 1fr;
}
.volHistory {
    grid-column: 2/10;
    grid-row: 2/3;
}
.employBox h3 {
    font-size: larger;
    font-family: 'Courier Prime', monospace;
}
.employBox ul {

}
.employBox li {
    font-family: 'Varela Round', sans-serif;
    padding: 2px 2px 4px;
}
.employBox dd {
    padding: 8px 0px;
    margin: unset;
    display: inline-block;
    font-style: italic;
    font-size: medium;
    position: relative;
    grid-column: 5/7;
}
.employBox p {
    border: none;
}
.workHistory h3 {grid-column: 1/end; grid-row: 1/2;}
.workHistory li:nth-child(2) {grid-column: 1/end; grid-row: 2/3;}
.workHistory dd:nth-child(3) {grid-column: 2/end; grid-row: 2/3;}
.workHistory p:nth-child(4) {grid-column: 1/end; grid-row: 3/4;}
.workHistory li:nth-child(5) {grid-column: 1/end; grid-row: 4/5;}
.workHistory dd:nth-child(6) {grid-column: 3/end; grid-row: 4/5;}
.workHistory dd:nth-child(7) {grid-column: 3/end; grid-row: 5/6;}
.workHistory li:nth-child(8) {grid-column: 1/end; grid-row: 6/7;}
.workHistory dd:nth-child(9) {grid-column: 3/end; grid-row: 6/7;}
.workHistory p:nth-child(10) {grid-column: 1/end; grid-row: 7/8;}
.workHistory li:nth-child(11) {grid-column: 1/end; grid-row: 8/9;}
.workHistory dd:nth-child(12) {grid-column: 2/end; grid-row: 8/9;}
.workHistory li:nth-child(13) {grid-column: 1/end; grid-row: 9/10;}
.workHistory dd:nth-child(14) {grid-column: 3/end; grid-row: 9/10;}
.workHistory li:nth-child(15) {grid-column: 1/end; grid-row: 10/11;}
.workHistory dd:nth-child(16) {grid-column: 4/end; grid-row: 10/11;}
.workHistory dd:nth-child(17) {grid-column: 4/end; grid-row: 11/12;}
.workHistory li:nth-child(18) {grid-column: 1/end; grid-row: 12/13;}
.workHistory dd:nth-child(19) {grid-column: 5/end; grid-row: 12/13;}
.workHistory dd:nth-child(20) {grid-column: 5/end; grid-row: 13/14;}
.workHistory li:nth-child(21) {grid-column: 1/end; grid-row: 14/15;}
.workHistory dd:nth-child(22) {grid-column: 6/end; grid-row: 14/15;}
.workHistory p:nth-child(23) {grid-column: 1/end; grid-row: 15/16;}

/* ~~~~~~~~~~~~~~~ ACCOMPLISHMENTS ~~~~~~~~~~~~~~~ */
.accompBox img {
    height: 288px;
}

}
/*~~~~~***~~~~~***~~~~~ Large Screen View ~~~~~***~~~~~***~~~~~*/
@media only screen and (min-width: 1201px) {
/* ~~~~~~~~~~~~~~~ BIOGRAPHY ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ EDUCATION ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ EMPLOYMENT ~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ ACCOMPLISHMENTS ~~~~~~~~~~~~~~~ */

}