:root {
    --suncolor: #00b8e5; /* inverted */
    --sunsize: 100px;
    --animdur: 3s;
    --sunriseheight: 300px;
}

body::before {
    background-position: 0 var(--sunriseheight) !important;
    background-size: 100% calc(100% - var(--sunriseheight)) !important;
}

#sunrise {
	width: 100%;
	height: var(--sunriseheight);
    max-height: var(--sunriseheight);
    overflow: visible;
    position: relative;
}

#sky {
    background: linear-gradient(180deg, rgba(169,222,255,1) 0%, rgba(224,218,240,1) 20%, rgba(255,210,144,1) 50%, rgba(255,80,80,1) 100%);
	background-size: 200% 200%;
	background-position: 50% 100%;
	width: 100%;
	height: 100%;
	position: relative;
	animation: var(--animdur) ease-out forwards skyanim;
    overflow: hidden;
}

#sun {
	background-color: var(--suncolor);
	border-radius: 50%;
	box-shadow: 0px 0px 40px 20px var(--suncolor);
	width: var(--sunsize);
	height: var(--sunsize);
	opacity: 1;
	z-index: 3;
	position: absolute;
	top: 100%;
	left: 40%;
	margin-left: calc(var(--sunsize) * -0.5);
    margin-top: calc(var(--sunsize) * -0.5);
	overflow: visible;
	animation: var(--animdur) ease-out forwards sunriseanim;
}

#rays {
	background: repeating-conic-gradient(transparent 0deg 15deg, var(--suncolor) 15deg 30deg);
	mask-image: radial-gradient(circle at center, black 10%, transparent 50%);
	-webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 50%);
	width: calc(var(--sunsize) * 5);
	height: calc(var(--sunsize) * 5);
    border-radius: 50%;
	z-index: 4;
	position: absolute;
	top: 100%;
	left: 40%;
	margin-left: calc(var(--sunsize) * -2.5);
    margin-top: calc(var(--sunsize) * -2.5);
	opacity: 0.4;
	animation: 140s linear infinite rayanim, var(--animdur) ease-out forwards sunriseanim;
}

#mountains {
    width: 100%;
    height: 72px;
    position: absolute;
    bottom: -2px;
    left: 0;
    background: url('https://videlinify.com/wp-content/uploads/mountain.svg'), linear-gradient(0deg, var(--bgcolor), var(--bgcolor));
    background-position: left bottom, left 101%;
    background-size: auto 100%, 100% 50%;
    background-repeat: repeat-x;
    z-index: 5;
}

#videlinify {
    display: block;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 100;
    opacity: 0;
    animation: 1s ease-out var(--animdur) forwards appear;
}

#videlinify img:hover {
    opacity: 1;
}

#videlinify img {
    display: block;
    width: max(min(40vw, 320px), 200px);
    height: auto;
    opacity: 0.75;
    transition: opacity 300ms;
}

@-webkit-keyframes rayanim {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
	100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
}

@-webkit-keyframes sunriseanim {
	0% {top: 100%; left: calc(50% - var(--sunsize)); filter: brightness(1.5) invert(1);}
	100% {top: 40%; left: 50%; filter: brightness(0) invert(1);}
}

@-webkit-keyframes skyanim {
	0% {background-position: 50% 100%;}
	100% {background-position: 50% 0%;}
}

@-webkit-keyframes brighten {
	0% {filter: brightness(0.2);}
	100% {filter: brightness(1);}
}

@-webkit-keyframes brightenclouds {
	0% {opacity: 0.2;}
	100% {opacity: 1;}
}

@-webkit-keyframes movingclouds {
	0% {transform: translateX(-2vw);}
	100% {transform: translateX(2vw);}
}

@-webkit-keyframes appear {
	0% {opacity: 0;}
    100% {opacity: 1;}
}

.anim-brighten,
body::before,
#mountains,
.site-footer .site-info {
    animation: calc(var(--animdur)) cubic-bezier(0.25, 1, 0, 1) forwards brighten;
}

/* NAV */
nav a {
    display: block;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'El Messiri', serif;
    font-size: 1em;
    color: var(--bgcolor);
    line-height: 90%;
    z-index: 6;
    transition: color 300ms;
    animation-play-state: running, running;
    box-sizing: border-box;
}

nav a:hover {
    color: var(--linkcolor);
    animation-play-state: running, paused !important;
}

.cloud-1 {
    top: 20%; left: 20%;
    width: 213px; height: 59px;
    padding-top: 10px;
    background: url('https://videlinify.com/wp-content/uploads/cloud1.svg') center/100% no-repeat;
    animation:
        var(--animdur) cubic-bezier(0.25, 1, 0, 1) forwards brightenclouds,
        10s ease-in-out infinite alternate movingclouds;
}

.cloud-2 {
    top: 45%; left: 10%;
    width: 200px; height: 65px;
    padding-top: 10px;
    background: url('https://videlinify.com/wp-content/uploads/cloud2.svg') center/100% no-repeat;
    animation:
        var(--animdur) cubic-bezier(0.25, 1, 0, 1) forwards brightenclouds,
        16s ease-in-out infinite alternate-reverse movingclouds;
}

.cloud-3 {
    top: 25%; right: 20%;
    width: 160px; height: 53px;
    background: url('https://videlinify.com/wp-content/uploads/cloud3.svg') center/100% no-repeat;
    animation:
        var(--animdur) cubic-bezier(0.25, 1, 0, 1) forwards brightenclouds,
        8s ease-in-out infinite alternate movingclouds;
    padding-top: 0.7vw;
}

.cloud-4 {
    top: 50%; right: 10%;
    width: 160px; height: 46px;
    background: url('https://videlinify.com/wp-content/uploads/cloud4.png') center/100% no-repeat;
    animation:
        var(--animdur) cubic-bezier(0.25, 1, 0, 1) forwards brightenclouds,
        14s ease-in-out infinite alternate-reverse movingclouds;
    padding-top: 1vw;
}

.bg-flag {
    background-image: url('https://videlinify.com/wp-content/uploads/bg-flag.png');
}

.en-flag {
    background-image: url('https://videlinify.com/wp-content/uploads/en-flag.png');
}

.cloud-lang {
    top: 16%; left: 80%;
    width: 5vw; height: 2.5vw;
    min-width: 38px; min-height: 19px;
    max-width: 50px; max-height: 25px;
    background-color: transparent !important;
    background-size: 100% 100%;
    -webkit-mask-image: url('https://videlinify.com/wp-content/uploads/cloud_small.png');
    mask-image: url('https://videlinify.com/wp-content/uploads/cloud_small.png');
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: 16s ease-in-out infinite alternate movingclouds;
    opacity: 0.5;
    transition: opacity 300ms;
    filter: brightness(1.5) saturate(0.6);
}

.cloud-lang:hover {
    opacity: 0.8;
}

.content-area {
    padding: 50px 0;
}

/* MEDIA QUERIES */
/* ON SMALL SCREENS ONLY - MOBILE */
@media screen and (max-width: 768px) {
    .cloud-1 {top: 10%; left: -3%;}
    .cloud-2 {top: 35%; left: -3%;}
    .cloud-3 {top: 40%; right: 2%;}
    .cloud-4 {top: 60%; right: 5%;}
}