/* Border with top triangle */

.box-1 {

position: relative;

background: #ffffff;

padding: 15px;

border: 1px solid #dddddd;

margin-top: 20px;

.box-1::before,

.box-1::after {

content: '';

position: absolute;

bottom: 100%;

left: 19px;

border: 11px solid transparent;

border-bottom-color: #dddddd;

.box-1::after {

left: 20px;

border: 10px solid transparent;

border-bottom-color: #ffffff;

/* Creates a bouncing loader animation. */

@keyframes bouncing-loader {

to {

opacity: 0.1;
 transform: translate3d(0, -16px, 0);

.bouncing-loader {

display: flex;

justify-content: center;

.bouncing-loader > div {

width: 16px;

height: 16px;

margin: 3rem 0.2rem;

background: #8385aa;

border-radius: 50%;

animation: bouncing-loader 0.6s infinite alternate;

.bouncing-loader > div:nth-child(2) {

animation-delay: 0.2s;

.bouncing-loader > div:nth-child(3) {

animation-delay: 0.4s;

/* border box and content box */

div {

box-sizing: border-box;
}

*,

*::before,

*::after {

box-sizing: inherit;

.box2 {

display: inline-block;

width: 120px;

height: 120px;

padding: 8px;

margin: 8px;

background: #F24333;

color: white;

border: 1px solid #BA1B1D;

border-radius: 4px;

.content-box {

box-sizing: content-box;

/* Drop cap */

p:first-child::first-letter {

color: #5f79ff;

float: left;

margin: 0 8px 0 4px;

 font-size: 3rem;

font-weight: bold;

line-height: 1;

/* Dynamic shadow */

.dynamic-shadow {

position: relative;

width: 10rem;

height: 10rem;

background: linear-gradient(75deg, #6d78ff, #00ffb8);

z-index: 1;

.dynamic-shadow::after {

content: '';

width: 100%;

height: 100%;

position: absolute;

background: inherit;

top: 0.5rem;

filter: blur(0.4rem);

opacity: 0.7;

z-index: -1;

/* etched-text */

.etched-text {

text-shadow: 0 2px white;

font-size: 1.5rem;

font-weight: bold;
 color: #b8bec5;

/* evenly distributed chillderen */

.evenly-distributed-children {

display: flex;

justify-content: space-between;

/* Fit image in container */

.image {

background: #34495e;

border: 1px solid #34495e;

width: 200px;

height: 200px;

.image-contain {

object-fit: contain;

object-position: center;

.image-cover {

object-fit: cover;

object-position: right top;

/* Flexbox centering */

.flexbox-centering {

display: flex;

justify-content: center;

align-items: center;
 height: 100px;

/* floating stack */

.floating-stack {

background: #455A64;

color: #fff;

height: 80vh;

width: 320px;

border-radius: 1rem;

overflow-y: auto;

.floating-stack > dl {

margin: 0 0 1rem;

display: grid;

grid-template-columns: 2.5rem 1fr;

align-items: center;

.floating-stack dt {

position: sticky;

top: 0.5rem;

left: 0.5rem;

font-weight: bold;

background: #263238;

color: #cfd8dc;

height: 2rem;

width: 2rem;

border-radius: 50%;
 padding: 0.25rem 1rem;

grid-column: 1;

display: inline-flex;

align-items: center;

justify-content: center;

box-sizing: border-box;

.floating-stack dd {

grid-column: 2;

margin: 0;

padding: 0.75rem;

.floating-stack > dl:first-of-type > dd:first-of-type {

margin-top: 0.25rem;

/* fluid typography */

.fluid-type {

font-size: clamp(1rem, 8vw - 2rem, 3rem);

/* focus within */

form {

border: 2px solid #52B882;

padding: 8px;

border-radius: 2px;

}
 form:focus-within {

background: #7CF0BD;

label {

display: inline-block;

width: 72px;

input {

margin: 4px 12px;

/* fullscreen */

.element p {

text-align: center;

color: white;

font-size: 3em;

.element:-ms-fullscreen p {

visibility: visible;

.element:fullscreen {

background-color: #e4708a;

width: 100vw;

height: 100vh;

}
 /* full width image */

main {

margin: 0 auto;

max-width: 640px;

img {

height: auto;

max-width: 100%;

.full-width {

/* position: relative;

left: 50%;

right: 50%;

margin-left: -50vw;

margin-right: -50vw;

max-width: 100vw;

width: 100vw; */

/* Gradient text */

.gradient-text {

background: linear-gradient(#70D6FF, #00072D);

-webkit-text-fill-color: transparent;

-webkit-background-clip: text;

font-size: 32px;

.grid-centering {
 display: grid;

justify-content: center;

align-items: center;

height: 100px;

/* Hamburger Button */

.hamburger-menu {

display: flex;

flex-flow: column wrap;

justify-content: space-between;

height: 2.5rem;

width: 2.5rem;

cursor: pointer;

.hamburger-menu .bar {

height: 5px;

background: black;

border-radius: 5px;

margin: 3px 0px;

transform-origin: left;

transition: all 0.5s;

.hamburger-menu:hover .top {

transform: rotate(45deg);

.hamburger-menu:hover .middle {
 opacity: 0;

.hamburger-menu:hover .bottom {

transform: rotate(-45deg);

/* Height transition */

.el {

transition: max-height 0.3s;

overflow: hidden;

max-height: 0;

.trigger:hover > .el {

max-height: var(--max-height);

/* hide empty elements */

/* :empty {

display: none;

} */

/* Hide scroll bars */

/* div {

width: 200px;

height: 100px;

.no-scrollbars {

overflow: auto;
 scrollbar-width: none;

.no-scrollbars::-webkit-scrollbar {

display: none;

} */

/* horizontal image gallery */

.gallery-container {

position: relative;

display: flex;

justify-content: center;

.thumbnails {

position: absolute;

bottom: 8px;

display: flex;

flex-direction: row;

gap: 6px;

.thumbnails div {

width: 8px;

height: 8px;

cursor: pointer;

background: #aaa;

border-radius: 100%;
}

.thumbnails div.highlighted {

background-color: #777;

.slides {

margin: 0 16px;

display: grid;

grid-auto-flow: column;

gap: 1rem;

width: 540px;

padding: 0 0.25rem;

height: 720px;

overflow-y: auto;

overscroll-behavior-x: contain;

scroll-snap-type: x mandatory;

scrollbar-width: none;

.slides > div {

scroll-snap-align: start;

.slides img {

width: 540px;

object-fit: contain;

}
.slides::-webkit-scrollbar {

display: none;

/* Horizontal scroll snap */

.horizontal-snap {

margin: 0 auto;

display: grid;

grid-auto-flow: column;

gap: 1rem;

height: calc(180px + 1rem);

padding: 1rem;

max-width: 480px;

overflow-y: auto;

overscroll-behavior-x: contain;

scroll-snap-type: x mandatory;

.horizontal-snap > a {

scroll-snap-align: center;

.horizontal-snap img {

width: 180px;

max-width: none;

object-fit: contain;

border-radius: 1rem;

/* hover additional content*/

.card {

width: 300px;

height: 280px;

padding: 0;

box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);

border-radius: 8px;

box-sizing: border-box;

overflow: hidden;

.card * {

transition: 0.3s ease all;

.card img {

margin: 0;

width: 300px;

height: 224px;

object-fit: cover;

display: block;

.card h3 {

margin: 0;

padding: 12px 12px 48px;

line-height: 32px;

font-weight: 500;

font-size: 20px;

}
.card .focus-content {

display: block;

padding: 8px 12px;

.card p {

margin: 0;

line-height: 1.5;

.card:hover img, .card:focus-within img {

margin-top: -80px;

.card:hover h3, .card:focus-within h3 {

padding: 8px 12px 0;

/* Perspective transform on hover */

.image-card {

display: inline-block;

box-sizing: border-box;

margin: 1rem;

width: 240px;

height: 320px;

padding: 8px;

border-radius: 1rem;

background: url("nat-1-large.jpg");

box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;

}

.perspective-left {

transform: perspective(1500px) rotateY(15deg);

transition: transform 1s ease 0s;

.perspective-left:hover {

transform: perspective(3000px) rotateY(5deg);

.perspective-right {

transform: perspective(1500px) rotateY(-15deg);

transition: transform 1s ease 0s;

.perspective-right:hover {

transform: perspective(3000px) rotateY(-5deg);

/* Hover shadow box animation */

.hover-shadow-box-animation {

display: inline-block;

vertical-align: middle;

transform: perspective(1px) translateZ(0);

box-shadow: 0 0 1px transparent;

margin: 10px;

transition-duration: 0.3s;

transition-property: box-shadow, transform;

}
.hover-shadow-box-animation:hover,

.hover-shadow-box-animation:focus,

.hover-shadow-box-animation:active {

box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);

transform: scale(1.2);

/* Hover underline animation */

.hover-underline-animation {

display: inline-block;

position: relative;

color: #0087ca;

.hover-underline-animation::after {

content: '';

position: absolute;

width: 100%;

transform: scaleX(0);

height: 2px;

bottom: 0;

left: 0;

background-color: #0087ca;

transform-origin: bottom right;

transition: transform 0.25s ease-out;

.hover-underline-animation:hover::after {

transform: scaleX(1);
 transform-origin: bottom left;

/* image hover menu */

.hover-menu {

position: relative;

overflow: hidden;

margin: 8px;

min-width: 340px;

max-width: 480px;

max-height: 290px;

width: 100%;

background: #000;

text-align: center;

box-sizing: border-box;

.hover-menu * {

box-sizing: border-box;

.hover-menu img {

position: relative;

max-width: 100%;

top: 0;

right: 0;

opacity: 1;

transition: 0.3s ease-in-out;

}
.hover-menu div {

position: absolute;

top: 0;

left: -120px;

width: 120px;

height: 100%;

padding: 8px 4px;

background: #000;

transition: 0.3s ease-in-out;

display: flex;

flex-direction: column;

justify-content: center;

.hover-menu div a {

display: block;

line-height: 2;

color: #fff;

text-decoration: none;

opacity: 0.8;

padding: 5px 15px;

position: relative;

transition: 0.3s ease-in-out;

.hover-menu div a:hover {

text-decoration: underline;

}
.hover-menu:hover img {

opacity: 0.5;

right: -120px;

.hover-menu:hover div {

left: 0;

opacity: 1;

/* Image rotate on hover */

.hover-rotate {

overflow: hidden;

margin: 8px;

min-width: 240px;

max-width: 320px;

width: 100%;

.hover-rotate img {

transition: all 0.3s;

box-sizing: border-box;

max-width: 100%;

.hover-rotate:hover img {

transform: scale(1.3) rotate(5deg);

}
/* image mosaic card */

.image-mosaic {

display: grid;

gap: 1rem;

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

grid-auto-rows: 240px;

.card {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

background: #353535;

font-size: 3rem;

color: #fff;

box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;

height: 100%;

width: 100%;

border-radius: 4px;

transition: all 500ms;

overflow: hidden;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

padding: 0;

margin: 0;

}
@media screen and (min-width: 600px) {

.card-tall {

grid-row: span 2 / auto;

.card-wide {

grid-column: span 2 / auto;

/* Image overlay on hover */

.hover-img {

background-color: #000;

color: #fff;

display: inline-block;

margin: 8px;

max-width: 320px;

min-width: 240px;

overflow: hidden;

position: relative;

text-align: center;

width: 100%;

.hover-img * {

box-sizing: border-box;

transition: all 0.45s ease;

}
.hover-img::before,

.hover-img::after {

background-color: rgba(0, 0, 0, 0.5);

border-top: 32px solid rgba(0, 0, 0, 0.5);

border-bottom: 32px solid rgba(0, 0, 0, 0.5);

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

content: '';

transition: all 0.3s ease;

z-index: 1;

opacity: 0;

transform: scaleY(2);

.hover-img img {

vertical-align: top;

max-width: 100%;

backface-visibility: hidden;

.hover-img figcaption {

position: absolute;

top: 0;

bottom: 0;

left: 0;
 right: 0;

align-items: center;

z-index: 1;

display: flex;

flex-direction: column;

justify-content: center;

line-height: 1.1em;

opacity: 0;

z-index: 2;

transition-delay: 0.1s;

font-size: 24px;

font-family: sans-serif;

font-weight: 400;

letter-spacing: 1px;

text-transform: uppercase;

.hover-img:hover::before,

.hover-img:hover::after {

transform: scale(1);

opacity: 1;

.hover-img:hover > img {

opacity: 0.7;

.hover-img:hover figcaption {

opacity: 1;
}

/* */