/* Color Variables */
:root {
    --grassOne: rgb(196, 236, 140);
    --grassTwo: rgb(169, 208, 119);
    --grassThree: rgb(185, 231, 127);
    --dirt: rgb(73, 44, 32);
    --dirtDarker: rgb(44, 27, 20);
    --topSoil: rgb(95, 43, 1);
    --topSoilDarker: rgb(69, 31, 0);
    --subParentRock: rgb(169, 114, 71);
    --subParentRockDarker: rgb(140, 94, 59);
    --bedRock: rgb(172, 165, 151);
    --bedRockDarker: rgb(139, 133, 122);
    --beddestRock: rgb(66, 66, 66);
    --beddestRockDarker: rgb(57, 56, 57);

    --projectBg: rgb(214, 217, 218);
    --projectBorder: rgb(153, 160, 163);
    --projectText: rgb(112, 121, 126);
    --labelBg: rgb(235, 236, 237);
    --labelHighLight: rgb(172, 233, 138);

    --offWhite: rgb(231, 231, 231);

    --barText: rgb(71, 174, 150);
    --barTextBg: rgb(47, 82, 88);
}

/* Page Formating */
.noBorder::-webkit-scrollbar {
    display: none;
}

.noBorder {
    margin: 0;
    padding: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html {
    scroll-behavior: smooth;
}

/* Background Layers */
.grassLayer {
    width: 100%;
    height: 108px;
    background-image: repeating-linear-gradient(to right, var(--grassOne), var(--grassTwo), var(--grassThree));
    /*background-color: var(--grass);*/
    color: white;

    display: flex;
    gap: 5%;
    justify-content: center;
    align-items: center;
    
}

.dirtLayer {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, var(--dirtDarker) , var(--dirt));
    color: white;
}

.soilBlendLayer {
    width: 100%;
    height: 1080px;
    background-image: linear-gradient(to bottom, var(--dirt) 20%, var(--topSoilDarker), var(--topSoil));
}

.soilLayer {
    width: 100%;
    background-image: linear-gradient(to bottom, var(--topSoil) 20%, var(--topSoilDarker), var(--topSoil));
}

.parentRockBlendLayer {
    width: 100%;
    height: 1080px;
    background-image: linear-gradient(to bottom, var(--topSoil) 20%, var(--subParentRockDarker), var(--subParentRock));
}

.parentRockLayer {
    width: 100%;
    background-image: linear-gradient(to bottom, var(--subParentRock) 20%, var(--subParentRockDarker), var(--subParentRock));
}

.bedRockBlendLayer {
    width: 100%;
    height: 1080px;
    background-image: linear-gradient(to bottom, var(--subParentRock) 20%, var(--bedRockDarker), var(--bedRock));
}

.bedRockLayer {
    width: 100%;
    background-image: linear-gradient(to bottom, var(--bedRock) 20%, var(--bedRockDarker), var(--bedRock));
}

.beddestRockBlendLayer {
    width: 100%;
    height: 1080px;
    background-image: linear-gradient(to bottom, var(--bedRock) 20%, var(--beddestRockDarker), var(--beddestRock));
}

.beddestRockLayer {
    width: 100%;
    height: 1080px;
    background-image: linear-gradient(to bottom, var(--beddestRock) 20%, var(--beddestRockDarker), var(--beddestRock));
}

/* Headers */

h1 {
    padding-top: 56px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 96px;
    color: var(--offWhite);
    text-align: center;
}

h2 {
    padding-top: 24px;
    margin-top: 0;
    font-size: 48px;
    color: var(--offWhite);
    text-align: center;
}

h3 {
    color: var(--offWhite);
    font-size: 24px;
    opacity: 0;
    transition: .5s ease;
}

h4 {
    color: var(--projectText);
    font-size: 24px;
}

h5 {
    color: var(--projectText);
    font-size: 22px;
}

h6 { 
    color: var(--barText);
    font-size: 36px;
    padding: 10px;
    border-radius: 25px;
    transition: .33s ease-in-out;
}

h6:hover {
    background-color: var(--barTextBg);
    transition: .33s ease-in-out;
}

p {
    padding-top: 48px;
    padding-left: 20%;
    padding-right: 20%;
    font-size: 24px;
    color: var(--offWhite);
    text-align: center;
}

.experienceHeader {
    text-align: center;
    color: var(--offWhite);
    font-size: 32px;
}

.experienceHeaderDate {
    text-align: center;
    color: var(--offWhite);
    font-size: 22px;
}

.bulletPoints {
    align-self: center;
    color: var(--offWhite);
    font-size: 22px;
}

.bulletHolder {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2%;
}

@keyframes fadeInTextA {
   0%{ opacity: 0;}
   25%{ opacity: 0;}
   100% {opacity: 1;}
}

@keyframes fadeInTextSmallA {
   0%{ opacity: 0;}
   50%{ opacity: 0;}
   100% {opacity: 1;}
}

.fadeInText {
    animation: fadeInTextA 2s 1 alternate;
}

.fadeInTextSmall {
    animation: fadeInTextSmallA 3s 1 alternate;
}

/* Images */

.shovelSpacing {
    padding-top: 324px;
    text-align: center;
    align-self: center;
    color: var(--offWhite);
}

.shovelContainer:hover h3 {
    visibility: visible;
    opacity: 1;
}

.soilSpacing {
    text-align: center;
    align-self: center;
    color: var(--offWhite);
}

.soilProjSpacing {
    text-align: center;
    align-self: center;
    color: var(--offWhite);
    margin-top: -2%;
}

.parenRockSpacing {
    padding-top: 2.5px;
    text-align: center;
    align-self: center;
    color: var(--offWhite);
}

.expSpacing {
    padding-top: 125px;
    text-align: center;
    align-self: center;
    color: var(--offWhite);
}

.shSoil:hover h3 {
    visibility: visible;
    opacity: 1;
}

.leftImage {
    padding-top: 200px;
    padding-left: 10%;
}

.rightImage {
    float: right;
    padding-right: 10%;
}

.projectIMG {
    width: 225px;
    height: 150px;

    border: 4px var(--projectBorder);
    border-style: solid;
}

.worm {
    width: 500px;
}

.rolyPoly {
    width: 400px;
}

.triloB {
    width: 250px;
}

.dino {
    width: 700px;
}

.robot {
    width: 300px;
}

.shovelImage {
    width: 150px;
}

/* Project Displays */

.projectParent {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    justify-content: center;
    padding-top: 1%;
}

.project {
    width: 300px;
    padding-bottom: 30px;
    margin-bottom: 30px;

    text-align: center;
    background-color: var(--projectBg);

    border: 4px var(--projectBorder);
    border-style: solid;
}

.labelParent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.tademButton {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;

    height: 40px;
    width: 125px;
    color: white;
    font-size: 22px;

    background-color: var(--labelBg);
    transition: .33s ease-in-out;
    border: 3px var(--projectBorder);
    border-style: solid;
    border-radius: 75px;
}

.tademButton:hover {
    background-color: var(--labelHighLight);
    transition: .33s ease-in-out;
}

.smallLabel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;

    height: 40px;
    color: white;
    font-size: 22px;

    background-color: var(--labelBg);
    border: 3px var(--projectBorder);
    border-style: solid;
    border-radius: 75px;
}

.unDigSpacing {
    padding-top: 200px;
    text-align: center;
    align-self: center;
    color: var(--offWhite);
}

/*Mobile Tweaks*/
@media (max-width: 850px){
    .grassLayer {
        height: 64px;
    }

    .shovelSpacing {
        padding-top: 250px;
    }

    .worm {
        width: 200px;
    }

    .rolyPoly {
        width: 100px;
    }

    .triloB {
        width: 100px;
    }

    .dino {
        width: 200px;
    }

    .robot {
        width: 100px;
    }

    .shovelImage {
        width: 75px;
    }

    h1 {
        font-size: 56px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        color: var(--offWhite);
        font-size: 14px;
        opacity: 1;
    }

    h4 {
        color: var(--projectText);
        font-size: 24px;
    }

    h5 {
        color: var(--projectText);
        font-size: 22px;
    }

    h6 { 
        font-size: 10px;
    }

    p {
        padding-left: 10%;
        padding-right: 10%;
    }

    .soilSpacing {
        padding-top: 50px;
    }

    .unDigSpacing {
        padding-top: 120px;
    }

    .expSpacing {
        padding-top: 25px;
    }
}