/*formatting for scrollbar*/
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: #ededed;
    margin-top: 44px;
}

::-webkit-scrollbar-thumb {
    background: darkgrey;
    border-radius: 7px;
}

::-webkit-scrollbar-thumb:hover {
    background: #717171;
}

@supports (scrollbar-color: red blue) {
    * {
        scrollbar-color: #c9c9c9 #ededed;
        scrollbar-width: auto;
    }
}






/*formatting for entire page*/
body {
    font-family: "Roboto", sans-serif;
    color: #717171;
    margin: 0;
    padding: 0;
    background: #ededed;
}





/*formatting for top bar*/
.header {
    display: grid;
    grid-template-columns: [first] 8% [line2] 84% [last];
    grid-template-rows: auto;
    height: auto;
    width: 100%;
    position: fixed;
    background: #ededed;
    padding-top: 22px;
    padding-bottom: 0px;
    /*background-color: red;*/
}

/*formatting for header text*/
.header h1 {
    grid-column: line2;
    font-size: 24px;
    margin: 0px;
    /*background-color: blue;*/
}





/*formatting for image-caption-paragraph group*/
figure {
    margin: 0;
    display: grid;
    grid-template-columns: [first] 8% [line2] 84% [last];
}


/*formatting for "images" group*/
.images {
    /*width: auto;*/
    max-height: calc(96vh - 180px);
    aspect-ratio: 280 / 400;
    display: grid;
    grid-column: line2;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    grid-auto-columns: 100%;
    gap: 3%;
    scroll-snap-type: x mandatory;
    background-color: #ededed;
    padding-top: 100px;
    /*background-color: blue;*/
}

.images > * {
    scroll-snap-align: start;
}


/*formatting for all images*/
img {
    width: auto;
    max-width: 98%;
    max-height: calc(100vh - 260px);
    height: auto;
    border-radius: 7px;
    z-index: 1;
}

/*formatting for image captions*/
.caption {
    display: inline-flex;
    grid-template-columns: [first] 80% [last];
    /*background-color: pink;*/
}

/*formatting for all captions*/
figcaption {
    font-size: 11.5px;
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 5px;
    /*background-color: blue;*/
}

/*formatting for "about" button*/
.caption label {
    font-size: 11.5px;
    color: darkgrey;
    grid-column: last;
    justify-self: right;
    align-content: center;
    padding-left: 5px;
    /*background-color: blue;*/
}

/*formatting for hovering over the "about" button*/
.caption label:hover {
    color: #717171;
    font-weight: 500;
}

/*formatting for project descriptions*/
.description {
    background-color: rgb(237, 237, 237, 0.95);
    position: relative;
    z-index: 2;
    margin-top: -133%;
    display: none;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

/*formatting for project descriptions*/
.description h {
    font-size: 18px;
    padding-top: -10%;
    font-weight: 700;
}

/*formatting for project descriptions*/
.description p {
    font-size: 13px;
}

/*formatting for project description "show less" button*/
.description label {
    font-size: 13px;
    color: darkgrey;
    /*background-color: blue;*/
}

/*formatting for hovering over the project description "show less" button*/
.description label:hover {
    color: #717171;
    font-weight: 500;
}

/*formatting for check boxes*/
#ch1 {
    display: none;
}

#ch1:checked ~ .description {
    display: block;
}

#ch1:checked ~ .caption{
    display: none;
}

#ch2 {
    display: none;
}

#ch2:checked ~ .description {
    display: block;
}

#ch2:checked ~ .caption{
    display: none;
}

#ch3 {
    display: none;
}

#ch3:checked ~ .description {
    display: block;
}

#ch3:checked ~ .caption{
    display: none;
}

#ch4 {
    display: none;
}

#ch4:checked ~ .description {
    display: block;
}

#ch4:checked ~ .caption{
    display: none;
}

#ch5 {
    display: none;
}

#ch5:checked ~ .description {
    display: block;
}

#ch5:checked ~ .caption{
    display: none;
}

#ch6 {
    display: none;
}

#ch6:checked ~ .description {
    display: block;
}

#ch6:checked ~ .caption{
    display: none;
}

#ch7 {
    display: none;
}

#ch7:checked ~ .description {
    display: block;
}

#ch7:checked ~ .caption{
    display: none;
}

#ch8 {
    display: none;
}

#ch8:checked ~ .description {
    display: block;
}

#ch8:checked ~ .caption{
    display: none;
}

#ch9 {
    display: none;
}

#ch9:checked ~ .description {
    display: block;
}

#ch9:checked ~ .caption{
    display: none;
}

#ch10 {
    display: none;
}

#ch10:checked ~ .description {
    display: block;
}


#ch10:checked ~ .caption{
    display: none;
}


/*formatting for bottom bar*/
.footer {
    display: grid;
    grid-template-columns: [first] 8% [line2] 84% [last];
    width: 100%;
    padding-top: 3px;
    padding-bottom: 12px;
    position: fixed;
    z-index: 3;
    bottom: 0px;
    background: #ededed;
}


/*formatting for footer heading*/
.footer h1 {
    grid-column: line2;
    font-size: 15px;
    margin: 0px;
    /*background-color: green;*/
}

/*formatting for footer contact*/
.contact {
    display: inline-flex;
    grid-column: line2;
    /*background-color: blue;*/
}

/*formatting for vertical line between button and phone*/
.contact p {
    font-size: 11.5px;
    font-weight: 400;
    padding-left: 7px;
    margin: 0px;
}

/*formatting for "about" button*/
.contact a {
    font-size: 11.5px;
    text-decoration: none;
    color: darkgrey;
    /*background-color: yellow;*/
}

/*formatting for hovering over the "about" button*/
.contact a:hover {
    color: #717171;
    font-weight: 500;
}

/*formatting for footer email*/
.footer p1 {
    grid-column-start: line2;
    font-size: 11.5px;
    margin: 0px;
    font-weight: 400;
    padding: 0px;
    /*background-color: blue;*/
}

/*formatting for reverse phone and email*/
span.rev { unicode-bidi:bidi-override; direction:rtl }
span.rev.email:after { content:"@nahtan "}
span.rev.email:before { content:"moc.stcetihcrahtiffirg"}
span.rev.phone:before { content:"3762-"}
span.rev.phone:after { content:"-913"}



@media (min-aspect-ratio:410/300) {
    /*formatting for top bar*/
    .header {
    grid-template-columns: [first] 12% [line2] 30% [line3] 55% [last];
    height: none;
    background: none;
    width: none;
    padding-top: 58vh;
    z-index: 2;
    }
    /*formatting for image-caption-paragraph group*/
    figure {
    grid-template-columns: [first] 8% [line2] 30% [line3] 50% [last];
    height: 100vh;
    /*background-color: pink;*/
    }
    /*formatting for "images" group*/
    .images {
    width: 69vh;
    height: auto;
    aspect-ratio: 0;
    max-height: none;
    max-width: none;
    grid-column: line3;
    justify-self: right;
    margin-top: 2vh;
    padding-top: 0px;
    z-index: 3;
    /*background-color: green;*/
    }
    /*formatting for all images*/
    img {
    height: 92vh;
    padding-top: none;
    margin-top: none;
    max-width: none;
    max-height: none;
    }
    /*formatting for project descriptions*/
    .description {
    margin-top: -56%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    height: 38vh;
    }
    /*formatting for project descriptions*/
    .description h {
    font-size: 18px;
    margin-top: -20%;
    }
    /*formatting for project descriptions*/
    .description p {
    font-size: 16px;
}
    /*formatting for bottom bar*/
    .footer {
    background: none;
    grid-template-columns: [first] 12% [line2] 30% [line3] 55% [last];
    height: none;
    padding-bottom: 5vh;
    z-index: 1;
    /*background-color: lightblue;*/
    }
    /*formatting for footer heading*/
    .footer h1 {
    grid-column: line2;
    font-size: 14px;
    /*background-color: blue;*/
    }
    /*formatting for footer text*/
    .footer p {
    grid-column: line2;
    /*background-color: blue;*/
    }