/*..........global..........*/

h1, h2, h3, h4, h5, h6 {
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px rgba(0, 0, 0, 0.2);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(0, 0, 0, 0.2);
}

html, body {
    font-family:Ubuntu, Verdana, sans-serif
}

p {
    color: rgb(130, 200, 255);
    font-size:1.2em;
}

.emphasis {
    color: rgb(255, 255, 255);
    font-weight:bold;
    letter-spacing: 0.1vw;
}

.list-level-1 {
    color: rgb(130, 200, 255);
    font-size:1.2em;
}

.list-level-2 {
    color: rgb(130, 200, 255);
    font-size:1em;
}

/*..........greeting..........*/

.dashed-solid {
    border-style: dashed solid;
}

.greeting-bg {
    background-color: blue;
    background-image: url("media/greeting-bg.webp");
    height:100vh;
}

.greeting-col {
    background-color: rgba(40, 40, 60, 0.6);
    border-left: 3px dotted rgba(130, 201, 255, 0.5);
    border-right: 3px dotted rgba(130, 201, 255, 0.5);
    padding: 50px;
}

.greeting-container {
    height:100vh
}

.greeting-emphasis {
    color: rgb(255, 255, 255);
    letter-spacing: 0.4vw;
}

.greeting-text {
    color: rgb(130, 200, 255);
    font-size:2em;
    letter-spacing: 0.1vw;
    align-self: end;
}

.my-name {
    font-size:3em;
    font-variant:small-caps;
}

.profile-photo-1-small {
    border-right: 3px dotted rgba(130, 201, 255, 0.5);
    margin-left: -15%;
    object-fit: contain;
    padding-right:0;
    padding-left:0;
    height: 100dvh;
    display: flex;
    align-items: flex-end;
}

.underlined {
    position: relative;
}

.underline-clip:after {
    content: '';
    position: absolute;
    top: 95%;
    width: 150%;
    aspect-ratio: 3/1;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 50%;
    border: 6px solid rgba(120, 25, 230, 0.4);
    /* Use a clip-path to hide and show the bits you want */
    clip-path: polygon(0 0, 50% 50%, 100% 0);
    vertical-align: text-bottom;
}

/*..........about me..........*/

.about-me-bg {
    background-color: magenta;
    background-image: url("media/about-me-bg.webp");
    height:100vh;
}

.about-me-col {
    background-color: rgba(40, 40, 60, 0.6);
    border: 3px dotted rgba(130, 201, 255, 0.5);
    padding: 50px;
}

.about-me-container {
    height:100vh
}

/*..........forestry..........*/

.forestry-bg {
    background-color: blue;
    background-image: url("media/forestry-bg.webp");
    height:100vh;
}

.forestry-col {
    background-color: rgba(40, 40, 60, 0.6);
    border: 3px dotted rgba(130, 201, 255, 0.5);
    padding: 50px;
}

.forestry-container {
    height:100vh
}

/*..........programming..........*/

.programming-bg {
    background-color: magenta;
    background-image: url("media/programming-bg.webp");
    height:100vh;
}

.programming-col {
    background-color: rgba(40, 40, 60, 0.6);
    border: 3px dotted rgba(130, 201, 255, 0.5);
    padding: 50px;
}

.programming-container {
    height:100vh
}

/*..........logistics-and-trucks..........*/

.logistics-and-trucks-bg {
    background-color: blue;
    background-image: url("media/logistics-and-trucks-bg.webp");
    height:100vh;
}

.logistics-and-trucks-col {
    background-color: rgba(40, 40, 60, 0.6);
    border: 3px dotted rgba(130, 201, 255, 0.5);
    padding: 50px;
}

.logistics-and-trucks-container {
    height:100vh
}

/*..........contact..........*/
.contact-bg {
    background-color: magenta;
    background-image: url("media/contact-bg.webp");
    height:100vh;  
}

.contact-col {
    background-color: rgba(40, 40, 60, 0.6);
    border: 3px dotted rgba(130, 201, 255, 0.5);
    padding: 50px;
}

.contact-container {
    height:100vh
}

/*..........footer..........*/

.footer-bg {
    background-color: magenta;
    background-image: url("media/footer-bg.webp");
    height:100vh;
}

.footer-col {
    background-color: rgba(40, 40, 60, 0.6);
    border: 3px dotted rgba(130, 201, 255, 0.5);
    padding: 50px;
}

.footer-container {
    height:100vh
}