:root {
    --body-bgcolor: hsl(257, 40%, 49%); /* Violet */
    --body-color: white;
    --register-bgcolor: white;
    --register-color: hsl(256.5, 46.5%, 33.7%); /* Violet Blue */
    --social-icons-hover: hsl(300, 69%, 71%); /*soft magenta */
    --attributions-color: hsl(59.1, 100%, 50%); /* yellow */
    --shadow-color: 0deg 0% 0%; /* Black */
    --shadow-elevation-high: 0px 0.8px 0.9px hsl(var(--shadow-color) / 0.13),
        0px 6.3px 7.1px -0.5px hsl(var(--shadow-color) / 0.13),
        0px 13.3px 15px -1px hsl(var(--shadow-color) / 0.13),
        0.1px 25.7px 28.9px -1.5px hsl(var(--shadow-color) / 0.13),
        0.1px 47.3px 53.2px -2px hsl(var(--shadow-color) / 0.13),
        0.2px 82.1px 92.4px -2.5px hsl(var(--shadow-color) / 0.13);
    --shadow-elevation-pressed: inset 0px 1px 1px hsl(var(--shadow-color) / 0.4),
        inset 0px 2px 1px hsl(var(--shadow-color) / 0.3),
        inset 0px 2px 1px hsl(var(--shadow-color) / 0.2),
        0px 0.8px 0.9px hsl(var(--shadow-color) / 0.13),
        0px 6.3px 7.1px -0.5px hsl(var(--shadow-color) / 0.13),
        0px 13.3px 15px -1px hsl(var(--shadow-color) / 0.13);
    --temp : #fffb00;
}
body {
    background-color: var(--body-bgcolor);
    color: var(--body-color);
    background-image: url("../assets/images/bg-desktop.svg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}
header {
    padding: clamp(30px, 4vw, 50px) clamp(15px, 4vw, 50px)
        clamp(25px, 3vw, 40px);
    display: flex;
}
header img {
    width: clamp(140px , 25vw , 240px);
    height: auto;
}
main {
    padding: clamp(25px, 3vw, 40px) clamp(15px, 4.5vw, 70px);
}
.hero {
    display: flex;
    align-items: stretch;
    gap: 50px;
}
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 709px;
}
.hero-image img {
    max-width: revert;
    width: 50vw;
    height: auto;
}
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: clamp(40px, 4.5vw, 80px) 0;
}
.hero-content h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 3.5vw, 2.5rem);
    letter-spacing: 0.0075em;
    line-height: 1.4;
}
.hero-content p {
    font-size: clamp(0.875rem, 2.2vw, 1.25rem);
    letter-spacing: 0.06em;
    line-height: 1.5;
}
.hero-content a {
    text-decoration: none;
    background-color: var(--register-bgcolor);
    color: var(--register-color);
    align-self: flex-start;
    border-radius: 60px;
    padding: clamp(8px, 1vw, 13px) clamp(40px, 5vw, 60px);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    letter-spacing: 0.025em;
    box-shadow: var(--shadow-elevation-high);
}
.hero-content a:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-elevation-high);
}
.hero-content a:active {
    box-shadow: var(--shadow-elevation-pressed);
    transform: scale(0.95);
}
footer {
    padding: 30px clamp(50px, 6vw, 100px);
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.social-links {
    list-style: none;
    display: flex;
    gap: clamp(20px, 2vw, 30px);
    justify-content: flex-end;
}
.social-links svg {
    width: clamp(30px, 4.2vw, 48px);
    height: auto;
}
.social-links svg[fill="#ffffff"]:hover {
    transform: scale(1.1);
    fill: var(--social-icons-hover);
}
.social-links svg[fill="transparent"]:hover {
    transform: scale(1.1);
}
.social-links svg[fill="transparent"]:hover circle,
.social-links svg[fill="transparent"]:hover rect,
.social-links svg[fill="transparent"]:hover path {
    stroke: var(--social-icons-hover);
}
.attributions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.attributions p {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: clamp(0.75rem, 2vw, 1.125rem);
    letter-spacing: 0.06em;
}
.attributions a {
    color: var(--attributions-color);
    font-family: inherit;
    text-decoration: none;
    font-weight: 600;
}
.attributions a:hover {
    text-decoration-line: underline;
    text-decoration-color: white;
    text-underline-offset: 6px;
    display: inline-block;
    transform: scale(1.04);
}

@media screen and (max-width: 1000px) {
    body {
        background-image: url("../assets/images/bg-mobile.svg");
        background-size: 100% auto;
    }
    main {
        padding-bottom: 0;
    }
    .hero {
        flex-direction: column;
        align-items: center;
    }
    .hero-image img {
        width: 80vw;
    }
    .hero-content h1,
    .hero-content p {
        text-align: center;
    }
    .hero-content a {
        align-self: center;
    }
    footer {
        padding: 0;
        padding-bottom: 30px;
    }
    .social-links {
        justify-content: center;
    }
    .attributions {
        flex-direction: column;
    }
}