:root{
--color-orange:#fe9432;
--color-purple:#7134ac;
--color-red:#cd4c76;
}


*{
box-sizing: border-box;
}

html{
font-size:min(1.33333vw, 10px);
font-family: 'Jost', 'Noto Sans JP', serif;
font-weight: 400;
font-feature-settings: "palt";
font-optical-sizing: auto;
}

body{
position: relative;
line-height:1.6;
font-size: 1rem;
letter-spacing: 0.03em;
font-feature-settings: "palt" 1;
}

main{
position: relative;
max-width: 75rem;
margin: auto;
}

#signup{
position: fixed;
z-index: 10;
right:3rem;
bottom:3rem;
width: 100%;
font-size: 3rem;
text-align: right;
letter-spacing: 0.05em;
font-family: 'Noto Sans JP', sans-serif;
}

#signup a{
position: relative;
display: inline-block;
overflow: hidden;
border-radius: 10vw;
padding: 0.4em 1.5em 0.4em 1.55em;
font-weight: 500;
text-decoration: none;
transition: opacity 0.3s ease-in-out;
}

#signup a span{
position: relative;
z-index: 2;
}

#signup a::after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--color-purple), var(--color-red) 85%, var(--color-orange));
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

#signup a:link,
#signup a:visited{
background: linear-gradient(to right, var(--color-orange), var(--color-red) 15%, var(--color-purple));
color: #fff;
}

#signup a:hover::after{
opacity: 1;
}


.background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}

.cloud {
    position: absolute;
    background: radial-gradient(circle, var(--color-orange), var(--color-purple));
	border-radius: 100%;
	width: 30vw;
	height: 30vw;
    filter: blur(15rem);
    will-change: transform;
    transition: transform 5s ease-in-out;
    animation:colorChange 30s alternate-reverse linear infinite;
}


@keyframes colorChange {
    100% {
        background: radial-gradient(circle, var(--color-purple), var(--color-orange));
    }
}