/* reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    background: linear-gradient(rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), radial-gradient(rgba(63, 63, 63, 0.97) 0%, rgba(36, 36, 36, 0.97) 100%), var(--color-theme);
    font-family: iceland;
    font-size: 24px;
    width: 100%;
    scroll-behavior: smooth;
    color: #FFFFFF;
}
body {
    width: 100%;
}
:root {
    --color-theme: #00E897;
}

/* header */
header {
    margin-bottom: 20vh;
    overflow: hidden;
}
header section {
    background: radial-gradient(circle,var(--color-theme) 0%, rgba(0, 0, 0, 1) 100%);
    width: 100%;
}
h1 {
    text-align: left;
    padding: 2rem;
    font-size: 4rem;
}
nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    text-align: center;
    grid-gap: .2rem;
    padding: 1rem;
    font-size: 1.5rem;
}
nav a {    
    color: #FFFFFF;
    text-decoration: none;
    padding: 0.5rem;
}
nav a:hover {
    color: var(--color-theme);
    background-color: #00000050;
    transform: scale(1.2);
}
header div {
    width: 100%;
    height: 1rem;
    background: radial-gradient(circle,var(--color-theme) 0%, rgba(0, 0, 0, 1) 100%);
    margin: auto;
    margin-bottom: 1rem;
}
/* card */
.Gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 2rem .5rem;
}
.card {
    background-color: #00000050;
    padding: 0.75rem;
    margin: 0.75rem;
    width: 12rem;
    text-align: center;
    margin: auto;
}
.card:hover {
    transform: scale(1.02);
    background-color: #00000080;
}
.card img {
    width: 100%;
    height: 14rem;
    object-fit: cover;
}
.card h3 {
    text-align: left;
    background-color: #000000;
    padding: 0.5rem;
    font-size: 0.9rem;
}
.card .date {
    background-color: #000000;
    padding: 0.45rem;
    text-align: left;
}
.text {
    position: absolute;
    transform: translate(-4.5%, -90%);
    width: 11.5rem;
    height: 18rem;
    padding: 1rem;
    color: #ffffff00;
    background-color: #00000000;
    text-align: left;
    z-index: 2;
}
.text:hover {
    transform: translate(-4.5%, -90%) scale(1.02);
    background-color: #000000ce;
    color: #FFFFFF;
}
.date {
    font-size: .9rem;
    color: #777777;
}
li {
    list-style: none;
}
/* color change */
.color-change {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    grid-gap: 0.2rem;
    margin: 1.5rem;
    padding: 0.5rem;
    width: 80vw;
    max-width: 20rem;
    background: #00000050;

}
.color_button {
    width: 2rem;
    height: 2rem;
    border: #000000 solid 1px;

}
.color_button:hover {
    transform: scale(1.2);
}
#Btn_green {
    background-color: #00e897;
}
#Btn_orange {
    background-color: #e78b12;
}
#Btn_purple {
    background-color: #9510e8;
}
#Btn_pink {
    background-color: #e605ed;
}
#Btn_red {
    background-color: #d81647;
}
#Btn_blue {
    background-color: #1040d0;
}
#Btn_yellow {
    background-color: #eecc22;
}
#Btn_aqua {
    background-color: #1ad6dc;
}
/* main */
main {
    padding: 40px;
}
img {
    width: 15rem;
    object-fit: cover;
    transition: transform 0.5s ease;
}
h2 {
    background-color: #000000;
    font-size: 1.75rem;
    padding: 1rem;
    margin: 20% 0 0 0;
}
/* svg */
#waves {
    position: absolute;
    width: 300vw;
}
#backwavel1, #middelwavel1, #frontwavel1, #topwavel1 {
    fill: var(--color-theme);
}
#backwavel2 {
    fill: #00c3ff;
    opacity: 0.25;
}
#middelwavel2 {
    fill: #ff00dd;
    opacity: 0.25;
}
#frontwavel2 {
    fill: #2200ff;
    opacity: 0.25;
}
#topwavel2 {
    fill: #77ff00;
    opacity: 0.25;
}
#backwave {
    animation: waveAnimation 5s ease-in-out infinite alternate;
}
#middelwave {
    animation: waveAnimation 10s ease-in-out infinite alternate;
}
#frontwave {
    animation: waveAnimation 12s ease-in-out infinite alternate;
}
#topwave {
    animation: waveAnimation 8s ease-in-out infinite alternate;
}
@keyframes waveAnimation {
    0% {
        transform: translateX(-20rem);
    }
    100% {
        transform: translateX(0rem);
    }
}
/* footer */
footer {
    color: #FFFFFF;
    padding: 1rem;
    margin: 2rem;
}
hr {
    margin: 2rem 0;
    border: #FFFFFF solid 1px;
}