/* google fonts */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* google icons */
@import url('https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');

/* sections */
#gallery {
display: block;
clear: both;
position: relative;
width: 100vw;
height: 60vh;
}

.row {
display: flex;
padding: 3rem 10%;
justify-content: center;
}

/* gallery style */
[data-am-gallery] {
position: relative;
width: 100%;
height: 100%;
}

[data-am-gallery] input[type="radio"] {
position: fixed;
top: -9999px;
}

[data-am-gallery] input[type="radio"]:checked:nth-child(5) ~ .images .image:nth-child(5) { opacity: 1; }
[data-am-gallery] input[type="radio"]:checked:nth-child(5) ~ .navigation .dot:nth-child(5) { background-color: #fff; }
[data-am-gallery] input[type="radio"]:checked:nth-child(5) ~ .navigation .dot:nth-child(5):hover { opacity: 1; }

[data-am-gallery] input[type="radio"]:checked:nth-child(4) ~ .images .image:nth-child(4) { opacity: 1; }
[data-am-gallery] input[type="radio"]:checked:nth-child(4) ~ .navigation .dot:nth-child(4) { background-color: #fff; }
[data-am-gallery] input[type="radio"]:checked:nth-child(4) ~ .navigation .dot:nth-child(4):hover { opacity: 1; }

[data-am-gallery] input[type="radio"]:checked:nth-child(3) ~ .images .image:nth-child(3) { opacity: 1; }
[data-am-gallery] input[type="radio"]:checked:nth-child(3) ~ .navigation .dot:nth-child(3) { background-color: #fff; }
[data-am-gallery] input[type="radio"]:checked:nth-child(3) ~ .navigation .dot:nth-child(3):hover { opacity: 1; }

[data-am-gallery] input[type="radio"]:checked:nth-child(2) ~ .images .image:nth-child(2) { opacity: 1; }
[data-am-gallery] input[type="radio"]:checked:nth-child(2) ~ .navigation .dot:nth-child(2) { background-color: #fff; }
[data-am-gallery] input[type="radio"]:checked:nth-child(2) ~ .navigation .dot:nth-child(2):hover { opacity: 1; }

[data-am-gallery] input[type="radio"]:checked:nth-child(1) ~ .images .image:nth-child(1) { opacity: 1; }
[data-am-gallery] input[type="radio"]:checked:nth-child(1) ~ .navigation .dot:nth-child(1) { background-color: #fff; }
[data-am-gallery] input[type="radio"]:checked:nth-child(1) ~ .navigation .dot:nth-child(1):hover { opacity: 1; }

[data-am-gallery] .image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

[data-am-gallery] .navigation {
position: absolute;
bottom: 1rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

/* nav dots */
[data-am-gallery] .dot {
display: inline-block;
width: 1rem;
height: 1rem;
margin: 0 .5rem;
border-radius: 50%;
background-color: #32CD32;
cursor: pointer;
}

[data-am-gallery] .dot:hover {
background-color: #fff;
}

/* nav buttons */
.button {
z-index: 9;
cursor: pointer;
}

.back {
position: absolute;
top: 50%;
left: 2rem;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.forward {
position: absolute;
top: 50%;
right: 2rem;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.material-symbols-outlined {
color: #fff;
font-size: clamp(3.5vw, 5vw, 5vw);
font-weight: 100;
}

.material-symbols-outlined:hover {
color: #32CD32;
}

[data-am-gallery] .dot,
.material-symbols-outlined {
-webkit-transition: all .2s ease;
transition: all .2s ease;
}

/* text styles */
#title_cnt {
text-align: left;
position: absolute;
top: 50%;
left: 10rem;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

#title {
background-clip:border-box;
font-size: clamp(3.5rem, 6vw, 6vw);
font-weight: 600;
text-align: left;
line-height: 1;
font-family: 'Libre Baskerville', serif;
color: transparent;
background-image: linear-gradient( to right, #32CD32 0, #b0ffb0 22%, #74ff74 45%, #a3f8a3 50%, #74ff74 55%, #b0ffb0 78%, #98FB98 100% );
-webkit-background-clip: text;
filter: drop-shadow(1px -1px 8px #000);
}

#gallery h3 {
background-clip:border-box;
font-family: 'Oswald', sans-serif;
font-size: clamp(2rem, 3vw, 3vw);
font-weight: 100;
color: transparent;
background-image: linear-gradient( to right, #32CD32 0, #b0ffb0 22%, #74ff74 45%, #a3f8a3 50%, #74ff74 55%, #b0ffb0 78%, #98FB98 100% );
-webkit-background-clip: text;
}