html {
    scroll-behavior: smooth;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    color: white;
    text-shadow: 2px 2px 5px black;
}
.header-image {
    text-align: center;
}

.header-image img {
    max-width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.footer-image {
    text-align: center;
}

.footer-image img {
    max-width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
/* Main background */
.hero {
    min-height: 100vh;
    background-color: black;
    background-image: url("../images/backgroundt.webp");
    animation: dynamicBackground 240s ease infinite;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}
@keyframes dynamicBackground {
    0% 
    {
        background-position: 0% 50%;
    }
    50% 
    {
        background-position: 100% 50%;
    }
    100% 
    {
        background-position: 0% 50%;
    }
}
.zero {
    min-height: 100vh;
    background-color: black;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}
.content {
    max-width: 900px;
}
/* Navigation */
nav {
    margin-bottom: 40px;
}
nav a {
    color: #00bfff;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}
nav a:hover {
    color: blue;
}
.locale{
    color: #ffffff;
    text-decoration: none;
    margin: 0 15px;
    font-weight: 1000;
    font-size: larger;
}
.locale:hover{
    color: #ff0000;
}
.info
{
    color: rgb(255, 0, 255);
    text-shadow: 2px 2px 5px rgb(255, 0, 0);
    font-size: medium;
    animation: infoAnimated 10s ease infinite;
}
@keyframes infoAnimated {
    0% 
    {
        color: rgb(255, 0, 255);
        text-shadow: 2px 2px 5px rgb(255, 0, 0);
    }
    25% 
    {
        color: rgb(255, 0, 0);
        text-shadow: 2px 2px 5px rgb(255, 0, 255);
    }
    50% 
    {
        color: rgb(255, 255, 0);
        text-shadow: 2px 2px 5px rgb(0, 255, 255);
    }
}
ul{
    text-align: left;
    list-style: none;
}
li {
    padding-left: 24px;
    margin-top: 0px;
    text-align: left;
}
/* Title */
h1 {
    font-size: 60px;
    margin-bottom: 20px;
}
/* Paragraph */
p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 30px;
}
.p1 {
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}
/* Video */
.video-container {
    margin-top: 30px;
}
.play
{
    font-size: xx-large;
}
iframe {
    width: 100%;
    max-width: 800px;
    height: 450px;
    border: none;
    border-radius: 10px;
}
/* Buttons */
.buttons {
    margin: 25px 0;
}
.buttons a {
    display: inline-block;
    padding: 14px 25px;
    margin: 5px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-weight: bold;
}
.wishlist-button {
    background: #1b2838;
}
.wishlist-button:hover {
    background: #2a475e;
}
.demo-button {
    background: #e67e22;
}
.demo-button:hover {
    background: #d35400;
}
.row{
    display:flex;    
    flex-direction:row;
    text-align: center;
    transition: all 0.5s;
}
    .row ul{
        list-style: none;
        margin:auto;
        color:white;
        font-weight:600;
        padding: 0;
    }
        .row ul li {
            color: grey;
            font-weight: 400;
            opacity: 0.75;
        }  
    .row img{
        margin:auto;
        height:35px;
        width:35px;
        /*transition: all 0.5s;*/
    }
        .red img:hover {
            filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(7000%) hue-rotate(350deg) brightness(100%) contrast(120%);
        }
        .cyan img:hover {
            filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(1500%) hue-rotate(130deg) brightness(100%) contrast(100%);
        }
        .purple img:hover {
            filter: brightness(0) saturate(100%) invert(25%) sepia(80%) saturate(4000%) hue-rotate(250deg) brightness(90%) contrast(110%);
        }
        .blue img:hover {
            filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(3000%) hue-rotate(190deg) brightness(100%) contrast(110%);
        }
    .row a {
        margin: auto;
        height: 35px;
        width: 35px;
    }
/* Mobile */
@media (max-width: 600px) {
    h1 {
        font-size: 40px;
    }

    p {
        font-size: 17px;
    }

    iframe {
        height: 250px;
    }
}