@property --x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -20%;
}

@property --y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -20%;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Catamaran&display=swap');

html {
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at var(--x, -20%) var(--y, -20%), 
        #0f052e 0%,
        #1290ce 200%
    );
    animation: moveGradient 30s infinite linear;
}

@keyframes moveGradient {
    0% {
        --x:-20%;
        --y:-20%;
    }
    25% {
        --x:120%;
        --y:-20%;
    }
    50% {
        --x:120%;
        --y:120%;
    }
    75% {
        --x:-20%;
        --y:120%;
    }
    100% {
        --x:-20%;
        --y:-20%;
    }
}


h1 {
    font-family: Montserrat, sans-serif;
    /* font-size: 20px; */
    font-size: 6vw;
    text-transform: uppercase;
    color: hsl(195, 20%, 67%);
    margin-left: -0.5vw
}

h2 {
    font-family: Montserrat, sans-serif;
    /* font-size: 20px; */
    font-size: 4vw;
    text-transform: uppercase;
    color: hsl(195, 20%, 67%);
    margin-left: -0.5vw
}

p {
    font-family: Catamaran, sans-serif;
    font-size: 1.5vw;
    color: hsl(195, 20%, 67%);;   
}

a {
    color: hsl(11, 100%, 57%);
}

body {
    font-family: Catamaran;
    color: white;
}

#main-content {
    width: 50vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}


input {
    font-family: Catamaran;
    font-size: 1.6vw;
}

form {
    margin-bottom: 8vh;
}

input[type="email"] {
    width: 39vw;
    color: hsl(255, 80%, 10%);
    border-radius: 100px;
    padding-left: 1vw;
}

::placeholder {
    color: hsl(195, 20%, 40%); 
}

input[type="submit"] {
    width: 8.9vw;
    background-color: rgba(0,0,0,0);
    border-color: rgba(255,255,255,0);
    border-radius: 100%;
    color: hsl(11, 100%, 57%);
}


#logo {
    width: 50vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vw

}

.flex-container {
    display: flex;
    justify-content: space-around;
}

.button {
    padding: 2vw;
    border-style: solid;
    font-size: 1.5vw;
    border-radius: 1000px;

}

.mailing_button {
    border-style: solid;
    border-radius: 1000px;
    width: 16vw;
    border-color:  hsl(11, 100%, 57%);
    color: hsl(11, 100%, 57%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-left: 42%;
    padding: 0.2em;
    margin-top: -0.5em;
}

.thumbnail {
    padding-bottom: 1vw;
    width: 14vw;

}

.thumbnail > img {
    width: 100%;
    height: 100%;
    border: solid;
    border-color: rgba(0,0,0,0);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.thumbnail > img:hover {
    width: 100%;
    height: 100%;
    border: solid;
}

.orange {
    border-color:  hsl(11, 100%, 57%);
    color: hsl(11, 100%, 57%);
}

.blue {
    border-color: #1290ce;
    color: #1290ce;
}

#demo {
    margin-top: 2em;
    width: 60%;
    position: relative;
    margin-left: 20%;
    padding-top: 33.0%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#introduction {
    width: 60vw;
    margin-left: 20vw;
}

#cards {
    margin-left: 35vw;
    display: flex;
    width: 30vw;
    justify-content: space-between;
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.switcher {
    text-align: center;
    margin-top: -1em;
}

.no_underline {
    text-decoration: none;
}

.card {
    /* Add shadows to create the "card" effect */
    border: solid 2px rgba(155, 180, 188, 0.2);
    border-radius: 5%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.2s;
    margin-top: 1vw;
    /* color: rgb(232, 162, 167); */
  }

.card > img {
    width: 12vw;
}
  
/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    border: solid 2px rgb(232, 162, 167);
    border-radius: 5%;
    }

.card:hover > .container > p {
    color: #e8a2a7;
}

/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}

.left {
float: left;
}

.pink {
    color: rgb(232, 162, 167);
}