:root{
    --mark-color:rgb(0, 168, 180);

    /* Theme Colors */
    --main-color: rgb(1, 238, 255);
    --accent-color: rgba(93, 168, 179, 1);
    --muted-color: rgb(148, 177, 181);

    /* Backgrounds */
    --background-color_drk: rgb(32, 36, 45);
    --background-color_med: rgb(50, 56, 70);
    --background-color_lit: rgb(110, 114, 122);
    --background-color_brt: rgb(223, 230, 245);

    /* Text Color */
    --txt-color_drk: rgb(32, 36, 45);
    --txt-color_med: rgb(50, 56, 70);
    --txt-color_lit: rgb(110, 114, 122);
    --txt-color_brt: rgb(223, 230, 245);

    /* WES */
    --success-color: rgba(110, 175, 110, 1);
    --error-color: rgba(175, 110, 110, 1);
    --warning-color: rgba(175, 172, 110, 1);

    /* Shades */
    --white-color: rgb(255, 255, 255);
    --light-grey: rgba(230,230,230,1);
    --medium-grey: rgba(200,200,200,1);
    --dark-grey: rgba(170,170,170,1);

    /* Fonts */
    --site-font: 'Roboto', Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(./Roboto.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

.bg_dark {
    background-color: var(--background-color_drk);
    color: var(--txt-color_brt);
}
.bg_medium {
    background-color: var(--background-color_med);
    color: var(--txt-color_brt);
}

body{
    font-family: var(--site-font);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

button{
    display: inline-block;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 7px;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.7px;
    border: none;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 1px;
    font-weight: bold;
}
p {
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
    line-height: 20px;
}
a{
    color: var(--main-color);
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

/* NAVIGATION */
.lwt_mainmenu{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 50px;
    z-index: 1000;
    transition: 0.2s ease-in-out;
    background-color: var(--background-color_drk);
}
.lwt_mainmenu:hover{
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}
.lwt_menu_lv1{
    color: var(--background-color_brt);
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}
.lwt_menu_lv1:hover{
    color: var(--main-color);
    text-shadow: 0 0 3px var(--main-color);
}

/* PAGE SECTION */
.lwt_pagesection{
    position: relative;
    width: 100vw;
    height: fit-content;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 65px 5%;
}
.lwt_pagewidth {
    max-width: 1000px;
    width: 90%;
    display: block;
    margin: auto;
    z-index: 2;
}
.lwt_txtglow{
    color: var(--main-color);
    text-shadow: 0 0 3px var(--main-color);
}

/* timelineblock */
.timelineblock {
    break-inside: avoid;
    background-color: var(--background-color_med);
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-radius: 4px;
}
.timeline_item{
    break-inside: avoid;
}

/* gridgallery */
.gridgalleryblock {
    break-inside: avoid;
    margin-bottom: 40px;
    width: 80vw;
    max-width: 1000px;
}
.gridgallery_grid {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    gap: 7%;
    justify-items: center;
}
.gridgallery_grid a{
    text-align: center;
    margin-top: 10px;
    background-color: var(--background-color_med);
    padding: 8%;
    border-radius: 10px;
    color: white;
    cursor: auto;
    width: 150px;
    min-width: 100px;
}
.gridgallery_grid a img{
    width: 100px !important;
    height: 100px !important;
}

.paragraphblock{
    background-color: var(--background-color_med);
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    margin-top: 20px;
    border-radius: 4px;
}

/* progresstable */
.progresstableblock{
    break-inside: avoid;
    margin-bottom: 40px;

    background-color: var(--background-color_med);
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-radius: 4px;
}
.progresstable_data{

}
.progresstable_item{
    display: grid;
    grid-template-columns: 300px 50px auto;
    margin-bottom: 10px;
}
.progresstable_value{
    background-color: var(--main-color);
    height: 30px;
    border-radius: 3px;
}

.bg1{
    background-image: url(../media/images/bacground_1.jpg);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: 110%;
    background-repeat: no-repeat;
    z-index: 0;
    filter: opacity(0.08);
    background-position: center center;
    mix-blend-mode: lighten;
}

.bg3{
    background-image: url(../media/images/bacground_3.jpg);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    filter: opacity(0.08);
    background-position: center top;
    mix-blend-mode: lighten;
}

.timeline_desc li{
    margin-bottom: 10px;
}
.timeline_itm_title{
    font-weight: bold;
    color: var(--main-color);
    margin-bottom: 5px;
}
.timeline_desc, .timeline_skills{
    margin-top: 10px;
    margin-bottom: 10px;
}
.timeline_skills span{
    display: inline-block;
    background-color: var(--mark-color);
    padding: 4px;
    border-radius: 5px;
    margin: 3px;
    color: black;
}

.photogallery{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    height: 400px;
    transition: 0.3s ease-in-out;
    margin-bottom: 60px;
}
.photogallery a{
    background-color: var(--txt-color_drk);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.6;
    transition: 0.2s ease-in-out;
}
.photogallery a:hover{
    opacity: 1;
    box-shadow: 0 0 10px var(--main-color);
}

.appgallery{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.appgallery img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sociallinks{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 10px;
    justify-content: flex-start;
    margin-top: 60px;
}
.sociallinks a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: var(--background-color_drk);
    color: var(--txt-color_brt);
    width: 60px;
    height: 60px;
    border-radius: 4px;
}

.techskills{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 10px;
    justify-content: center;
    margin-top: 60px;
}
.techskills div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: var(--background-color_brt);
    border-radius: 5px;
    padding: 5px;
    gap: 3px;
    color: var(--txt-color_drk);
}


@media only screen and (min-width: 2000px) {
    .photogallery{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        height: 200px;
        grid-template-rows: 1fr;
    }
}

@media only screen and (max-width: 2000px) {
    .photogallery{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        height: 200px;
        grid-template-rows: 1fr;
    }
}

@media only screen and (max-width: 1500px) {
    .photogallery{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 500px;
    }
}

@media only screen and (max-width: 1080px) {
    .lwt_pagewidth {
        grid-template-columns: 1fr !important;
        grid-template-rows: 40% 60% !important;
        height: 100%;
    }
    .lwt_pagesection canvas{
        width: auto !important;
        height: 110% !important;
    }
    .maintext-home{
        text-align: center;
        justify-self: start;
        margin-top: 0 !important;
    }

    .gridgallery_grid {
        display: flex !important;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
    }
    .gridgallery_grid a{
        width: 100%;
        background-color: transparent !important;
        text-align: left;
        padding: 0px !important;
        list-style-type: disc;
    }
    .gridgallery_grid a img{
        display: none !important;
    }

    .photogallery{
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        gap: 10px;
        height: 800px;
    }
}

@media only screen and (max-width: 500px) {
    .photogallery{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        height: 1500px;
    }
}

@media print {
    body{
        --main-color: rgb(0, 56, 60);
        font-size: 12px;;
    }
    #hellosec{
        display: none;
    }
    .lwt_mainmenu {
        display: none;
        opacity: 0;
    }
    .lwt_pagesection {
        padding: 0;
        margin: 0;
        background-color: white;
        min-height: fit-content;
    }
    .bg_dark, .bg_medium{
        background-color: white;
        color: black;
    }
    .progresstable_value{
        background-color: #adadad !important;
    }

    .gridgallery_grid{
        display: flex !important;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
    }
    .gridgallery_grid a{
        width: 100%;
        background-color: transparent !important;
        text-align: left;
        padding: 0px !important;
        list-style-type: disc;
        color:black;
    }
    .gridgallery_grid a img{
        display: none !important;
    }

    #printbutton {
        display: none;
    }   
    .bg1, .bg3 {
        display: none;
    }
}