:root {
    --white: #F0F1F2;
    --black: #0D0D0D;
    --blue: #08A4BD;
    --red: #F2594B;
    --green: #20BF55;
    --yellow: #EFCB68;
    --primary: var(--blue);
    --label: #F3DFC1;
    --text: #C7CFD9;
    --background: #171717;
    --sky-default: #262626;
    --sky-neutral: #8EECFA;
    --mountain: #171717;
    --padding-edge: 6vw;
    --margin-main: 4vw;
    --margin-section: 3rem;
    --border-radius: 1vw;
    --button: var(--label);
    --button-text: var(--sky-default);
    --transition: .1s all linear;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 1.2em;
    /* Preferred icon size */
    display: inline-block;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    user-select: none;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

* {
    outline: none !important;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
}

p {
    margin-bottom: var(--margin-main);
    line-height: 1.1;
    user-select: none;
}

p+p:last-of-type,
p:only-child {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
    width: 100%;
    margin-bottom: .75vw;
    user-select: none;
}

h1 {
    font-size: 5vw;
    text-align: center;
    color: var(--label);
    margin-bottom: var(--margin-section);
}

h2 {
    font-size: 4vw;
    width: 100%;
    text-align: center;
    color: var(--label);
    margin-bottom: var(--margin-main);
}

h3 {
    /*font-size: 3vw;*/
    font-weight: 700;
    margin-bottom: calc(var(--margin-main) * .33);
}

p+h2,
p+h3 {
    margin-top: var(--margin-main);
}

a {
    color: var(--text);
}

.hide {
    opacity: 0;
}

.remove {
    display: none;
}

input[type="button"],
button,
.button {
    border: none;
    border-radius: 1.25em;
    background-color: var(--button);
    color: var(--button-text);
    padding: .5em 1.75em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    letter-spacing: 1.25;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: 2px solid var(--label);
    transition: var(--transition);
}

input[type="button"]:hover,
button[type="button"]:hover,
button:hover,
.button:hover,
input[type="button"]:focus,
button[type="button"]:focus,
.button:focus {
    /* background-color: var(--primary); */
    transition: var(--transition);
    border-color: var(--primary);
    color: var(--button);
    filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, .1));
}

input[type="button"],
button .material-icons,
.button .material-icons {
    padding-left: .5rem;
}

.button-secondary {
    background-color: var(--mountain);
    color: var(--text);
}

html,
body {
    font-family: 'Roboto', sans-serif;
    height: 100%;
    font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1600 - 320)));
    color: var(--text);
    background-color: var(--background);
}

body {
    height: calc(100vmax - 56px);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header {
    height: calc(40vw + 36vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* background: #266F8C; */
    background: var(--sky-neutral) linear-gradient(to bottom, rgba(255, 255, 255, .5) 0%, rgba(8, 164, 189, .3) 100%);
    overflow: hidden;
    position: relative;
    /* margin-bottom: 1vw; */
}

#sky,
#cloudySky {
    position: absolute;
    top: -50%;
    top: -31vh;
    left: 0;
    height: calc(24vw + 36vh);
    width: 101vw;
    background: #2c3e50;
    background: linear-gradient(to bottom, #3E5770 0%, #2c3e50 100%);
    /* opacity: 1; */
}

#cloudySky {
    /* background: linear-gradient(to bottom, #9be2fe 0%, #67d1fb 100%); */
    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    /* mix-blend-mode: color-dodge; */
    background: linear-gradient(to top, rgba(238, 238, 238, 0.7) 0%, rgba(206, 206, 206, 0.7) 100%);
    background-size: cover;
    background-repeat: no-repeat;
    /* transform: scaleX(-1); */
    /* background-blend-mode: color; */
    filter: brightness(.5);
}

.postload {
    opacity: 0;
    transition: all .3s ease-in-out;
}

#cloudySky img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    mix-blend-mode: color-burn;
    filter: grayscale(.7);
    transition: all .3s ease-in-out;
}

.weather {
    /* font-size: calc(2vh - .1vw); */
    content: "";
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1em;
    /* height: 3em;
    width: 30vw; */
    /* left: 0; */
    right: 0;
    top: -30vh;
    /* top: calc(50vw - 36vh); */
    /* bottom: 0; */
    margin: auto;
    /* transform: rotate(107deg); */
    z-index: 1000;
}

.weather.nightmode #tempFeelsLike,
.weather.nightmode #temp,
.weather.nightmode #description,
.weather.nightmode #cloudsAmount,
.weather.nightmode #cloudsWind,
.weather.nightmode #rainHumidity,
.weather.nightmode #rainAmount,
.weather.nightmode p {
    color: var(--white);
    pointer-events: visible;
}

#tempFeelsLike,
#temp,
#description,
.weather p {
    text-align: end;
    margin-bottom: .5rem;
    color: var(--mountain);
    font-weight: 200;
    font-size: 1em;
    /* text-shadow: 0 0 4px rgba(0, 0, 0, .2); */
}

#temp {
    font-size: 2.5em;
    margin-top: .25em;
    margin-bottom: -.5em;
}

#sun {
    content: "";
    display: block;
    position: relative;
    color: var(--yellow);
    font-size: 2em;
    height: 2em;
    width: 2em;
    /* left: -45vw; */
    border-radius: 50%;
}

#sun .material-icons {
    font-size: 2em;
    mix-blend-mode: color;
}

#sun:before {
    content: "";
    display: block;
    position: absolute;
    height: 1em;
    width: 1em;
    /* top: 2vw;
    left: calc(-50vw + 9vw); */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: auto;
    background: rgba(255, 255, 255, .5);
    border-radius: 50%;
    box-shadow: 0 0 5em 4em var(--white);
}

.weather *:not(#sun) span {
    color: hsl(0, 0%, 25%);
}

.clouds {
    /* content: ""; */
    /* position: absolute; */
    /* height: 10vw;
    width: 20vw; */
    margin-top: -3.4em;
    /* left: -45vw; */
    /* transform: rotate(-107deg); */
    /* background: url(/new/clouds.svg);
    background-size: cover;
    background-repeat: no-repeat; */
}

.rain {
    /* content: ""; */
    /* position: absolute; */
    /* height: 4.83vw;
    width: 6.45vw; */
    margin-left: 3em;
    /* top: -1vw; */
    /* left: -32vw; */
    /* transform: rotate(-107deg); */
    /* background: url(/new/rain.svg);
    background-size: cover;
    background-repeat: no-repeat; */
}

#svgs {
    display: none;
}

#cloudPuffs {
    height: 4em;
    width: 8em;
    overflow: visible;
    fill: var(--white);
    stroke: var(--white);
    stroke-width: 400px;
    z-index: 1000;
}

#rainDrops {
    height: 2em;
    width: 3em;
    fill: var(--blue);
    overflow: visible;
    fill: transparent;
    stroke: var(--white);
    stroke-width: 300px;
    stroke-dasharray: 1500, 1500;
}

.rain-light #rainDropsDropLeft {
    fill: transparent;
    stroke: none;
    animation-name: drop;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: forwards;
}

.rain-moderate #rainDropsDropLeft,
.rain-moderate #rainDropsDropRight {
    fill: transparent;
    stroke: none;
    animation-name: drop;
    animation-duration: 1.25s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: forwards;
}

.rain-heavy #rainDropsDropLeft,
.rain-heavy #rainDropsDropMiddle,
.rain-heavy #rainDropsDropRight {
    fill: transparent;
    stroke: none;
    animation-name: drop;
    animation-duration: .85s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: forwards;
}

.rain-violent #rainDropsDropLeft,
.rain-violent #rainDropsDropMiddle,
.rain-violent #rainDropsDropRight {
    fill: transparent;
    stroke: none;
    animation-name: drop;
    animation-duration: .45s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: forwards;
}

@keyframes drop {
    0% {
        fill: transparent;
    }
    20% {
        fill: var(--blue);
    }
    100% {
        fill: transparent;
    }
}

#rainDropsDropLeft {
    animation-delay: 1s;
}

#rainDropsDropMiddle {
    animation-delay: 1.5s;
}

#rainDropsDropRight {
    animation-delay: 1.25s;
}

#rainDrops.no-rain {
    fill: none;
    stroke-dasharray: 1500, 1500;
}

#clouds,
#rain {
    display: flex;
    justify-content: space-between;
}

#clouds {
    align-items: flex-end;
    align-content: flex-end;
}

#rainHumidity,
#cloudsWind,
#cloudsAmount,
#rainAmount {
    font-size: .75em;
    padding-left: 3em;
    /* padding-right: 2vw; */
    padding-top: .1em;
    padding-bottom: .1em;
    font-weight: 700;
    letter-spacing: 1.2px;
    font-family: Arial, Helvetica, sans-serif;
    /* border-top: dotted 1px rgba(255, 255, 255, .5);
    border-bottom: dotted 1px rgba(255, 255, 255, .5); */
    margin: .25rem 0;
}

#rainAmount,
#cloudsWind {
    font-weight: 400;
    letter-spacing: 0;
}

#cloudsWind,
#cloudsAmount {
    padding-top: .5em;
    padding-bottom: .5em;
    border-bottom: none;
}

#cloudsAmount {
    margin-left: .25em;
    padding-left: 2em;
    padding-right: 1em;
}

#rainHumidity {
    padding-right: .25em;
}

#cloudsWind,
#rainAmount {
    margin: .25rem 0;
    padding-left: 0;
}

.sunset {
    background: linear-gradient(to top, #F2594B, #F2845C 10%, rgb(157, 178, 185) 45%, #266F8C 100%);
    /* background: linear-gradient(to top, #F2594B 15%, #F2845C 25%, #266F8C 60%, #266F8C 100%); */
}

.night {
    background: #2980b9;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #2c3e50, #2980b9);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #2c3e50, #2980b9);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.view,
.mountain {
    position: absolute;
    top: 31vh;
    /* left: calc(-3vw + 1.5vh); */
    height: 60vw;
    width: 100vw;
    pointer-events: none;
}

.mountain {
    top: 0;
    background: url(/new/mountain.svg);
    background-size: 110vw 70vw;
    background-repeat: no-repeat;
    background-position: center;
    width: 110vw;
    left: -9%;
}

.tree,
.grass {
    position: absolute;
    width: 15vw;
    height: 20vw;
    background: url(/new/tree.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

.tree1 {
    top: 24%;
    left: -1%;
}

.tree2 {
    top: 27.5%;
    left: 75%;
    transform: scaleX(-1);
}

.tree3 {
    top: 0%;
    left: 42.5%;
}

.tree6 {
    opacity: 0;
}

.tree3+.tree3 {
    top: 29%;
    left: 36.6%;
    filter: contrast(0.3);
    transform: scale(.85, -.85);
}

.tree4 {
    top: 15%;
    left: 6%;
}

.tree5 {
    top: 35%;
    left: 36%;
    transform: scaleX(-1);
}

.tree6 {
    top: 34%;
    left: 59%;
    transform: rotate(175deg) scaleX(-1);
}

.tree7 {
    top: 27%;
    left: 77%;
}

.tree8 {
    top: 14%;
    left: 83.5%;
    transform: rotate(27deg);
}

.tree9 {
    top: 17%;
    left: 12%;
    transform: scaleX(-1);
}

.grass {
    width: 5vw;
    height: 1vw;
    background: url(/new/grass.svg);
    background-size: 5vw 1vw;
}

.icon {
    position: absolute;
    color: var(--white);
    font-size: 1.5vw;
}

.icon1 {
    top: 19%;
    left: 97%;
    transform: rotate(-37deg);
    font-size: .75vw;
}

.icon2 {
    top: 15.5%;
    left: 16%;
    transform: rotate(-4deg);
    color: var(--background);
    font-size: 1.5vw;
}

.icon3 {
    top: 39%;
    left: 35.5%;
    color: var(--background);
    font-size: 4.5vw;
}

.icon4 {
    top: 31.5%;
    left: 64.3%;
    color: var(--background);
    transform: rotate(-4deg);
    font-size: 4vw;
}

.grass1 {
    top: 31.3%;
    left: 46.5%;
}

.grass2 {
    top: 38%;
    left: 63.5%;
    transform: scaleX(-1);
}

.grass3 {
    top: 30.8%;
    left: 50.5%;
}

main,
footer {
    position: relative;
    padding: 0 var(--padding-edge);
}

article {
    max-width: 35em;
    margin: auto;
}

.modal {
    width: 0;
    height: 0;
    z-index: 1000;
    display: none;
    position: fixed;
}

.modal-open {
    cursor: pointer;
}

body.modal-show {
    overflow: hidden;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, .9);
}

.modal-content {
    padding: var(--padding-edge);
    border-radius: var(--border-radius);
    background-color: var(--sky-default);
    max-width: 100vw;
    /* display: block; */
}

header h1 {
    position: absolute;
    top: 61%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
}

.logo {
    position: absolute;
    width: 10vw;
    height: 10vw;
    top: 43%;
    left: 48%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    fill: var(--label);
}

#logo_box {
    fill: var(--mountain);
    animation-name: logo;
    animation-duration: 6.4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: forwards;
}

@keyframes logo {
    0% {
        fill: var(--mountain);
    }
    16.666% {
        fill: var(--red);
    }
    33.333% {
        fill: var(--mountain);
    }
    50% {
        fill: var(--blue);
    }
    66.666% {
        fill: var(--mountain);
    }
    83.333% {
        fill: var(--green);
    }
    100% {
        fill: var(--mountain);
    }
}


/* .sign {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .75vw 2vw;
    background-color: var(--sky-default);
    border-radius: .25rem;
    transform: rotate(4deg);
    font-family: 'Rancho', cursive;
    font-size: 2.5vw;
}

.sign p {
    font-size: 1.2em;
} */

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: var(--margin-section) 0;
}

footer>* {
    margin-bottom: 2.5em;
}

footer>*+*:last-of-type,
footer>*:only-child {
    margin-bottom: 0;
}

.attributions {
    display: flex;
    justify-content: space-between;
}

.social {
    display: flex;
    justify-content: flex-end;
}

.social-icon {
    width: 3em;
    height: 3em;
    margin-right: 1.5em;
    /* filter: grayscale(0.25); */
    /* padding: .3em .2em .1em .2em; */
    transition: var(--transition);
    /* border-radius: var(--border-radius); */
    position: relative;
    transition: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.social-icon:hover,
.social-icon:focus {
    filter: grayscale(1);
    transition: 12.8s filter linear;
    /* z-index: 100; */
}

.social-icon img {
    transition: var(--transition);
    /* filter: sepia(1); */
    filter: contrast(1) grayscale(1);
}

.social-icon:hover img,
.social-icon:focus img {
    transition: var(--transition);
    filter: sepia(0);
}

.social-icon::before {
    content: "+";
    position: absolute;
    top: -.75em;
    /* bottom: 1.35em; */
    width: 1em;
    height: 1em;
    font-size: 1.25em;
    /* left: 1em; */
    right: -.75em;
    margin: auto;
    text-align: center;
    opacity: 0;
    color: var(--primary);
    transition: var(--transition);
    font-weight: 700;
}


/* .social-icon::after {
    transition: var(--transition);
    content: "";
    position: absolute;
    width: .75em;
    height: 2px;
    background-color: var(--primary);
    bottom: -1em;
    left: 0;
    right: 0;
    margin: auto;
    filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, .1));
    opacity: 0;
} */

.social-icon::after {
    border-top: 3px solid rgba(255, 255, 255, .1);
    transition: var(--transition);
    /* content: ""; */
    position: absolute;
    width: 3em;
    height: 3em;
    background-color: rgba(0, 0, 0, .1);
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    /* padding: 0; */
    /* filter: grayscale(0); */
    /* border: 2px solid var(--primary); */
    filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, .1));
    opacity: 0;
    z-index: -1;
}

.social-icon:hover::after,
.social-icon:focus::after,
.social-icon:hover::before,
.social-icon:focus::before {
    transition: var(--transition);
    opacity: 1;
}

.social-icon:last-of-type {
    margin-right: 0;
}