:root {
    --blue: #1d98ba;
    --translucent_blue: rgba(29,152,186,.8);
    --transparent_blue: rgba(29,152,186,.3);
    --green: #81b741;
    --translucent_green: rgba(129,183,65,.8);
    --transparent_green: rgba(129,183,65,.3);
    --highlight: #cde188;
    --pink: #ed1a75;
    --translucent_pink: rgba(237,26,117,.8);
    --transparent_pink: rgba(237,26,117,.3);
    --purple: #93469b;
    --translucent_purple: rgba(147,70,155,.8);
    --transparent_purple: rgba(147,70,155,.3);
    --skyblue: #b8e4f4;
    --nightblue: #084044;
    --teal: #11646e;
    --translucent_teal: rgba(19,100,110,.8);
    --transparent_teal: rgba(19,100,110,.3);
    --white: #ffffff;
    --yellow: #f8a71b;
    --translucent_yellow: rgba(248,167,27,.8);
    --transparent_yellow: rgba(248,167,27,.3);
}

@font-face {
    font-family: "Poppins";
    src: url('fonts/Poppins-Regular.ttf');
    format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: "Reklame";
    src: url("fonts/Reklame-Script-Web-Medium.eot") format("eot"), 
        url("fonts/Reklame-Script-Web-Medium.woff") format("woff"), 
        url("fonts/Reklame-Script-Web-Medium.woff2") format("woff2"); 
    font-weight: normal; font-style: normal;
}

::selection {
    background: var(--highlight);
}

html {
    scrollbar-gutter: stable;
}

html,
body {
    width: 100%;
    padding: 0;
    margin: 0;
    min-height: 100%;
    position: relative;
    scroll-behavior: smooth;
}

html.day {
    background-color: var(--skyblue);
}

html.night {
    background-color: var(--nightblue);
}

body {
    background-size: 100% auto;
    background-repeat: repeat;
    font-family: "Poppins", sans-serif;
    background-position-y: 0; 
}

body, a, button {
    cursor: url(imgs/cursor/bee.png), auto;
    animation: animateCursor 0.4s infinite;
}

@keyframes animateCursor {
    0% { 
        cursor: url(imgs/cursor/bee_1.png), auto;
    }
    12.5% { 
        cursor: url(imgs/cursor/bee_2.png), auto;
    }
    25% { 
        cursor: url(imgs/cursor/bee_3.png), auto;
    }
    37.5% { 
        cursor: url(imgs/cursor/bee_4.png), auto;
    }
    50% { 
        cursor: url(imgs/cursor/bee_5.png), auto;
    }
    62.5% { 
        cursor: url(imgs/cursor/bee_4.png), auto;
    }
    75% { 
        cursor: url(imgs/cursor/bee_3.png), auto;
    }
    87.5% { 
        cursor: url(imgs/cursor/bee_2.png), auto;
    }
    100% { 
        cursor: url(imgs/cursor/bee_1.png), auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body, a, button { 
        cursor: auto;
    } 
}

.day body {
    background-image: url(imgs/sky_day.jpg);
    color: var(--teal);
}

.night body {
    color: var(--skyblue);
    background-image: url(imgs/sky_night.jpg);
}


nav.progress {
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg,rgba(17, 100, 110, 1) 0%, rgba(29, 152, 186, 1) 16%, rgba(129, 183, 65, 1) 30%, rgba(248, 167, 27, 1) 47%, rgba(237, 26, 117, 1) 63%, rgba(147, 70, 155, 1) 77%, rgba(29, 152, 186, 1) 100%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 23;
    clip-path: inset(0 100% 0 0);
}

.night nav.progress {
    background-color: var(--skyblue);
}

button.toggle-day {
    display: block;
    border: 0;
    border-radius: 0 0 25px 25px;
    transition: all 0.2s linear;
    position: fixed;
    right: 17px;
    top: 0;
    width: 11.7vw;
    max-width: 90px;
    margin: 0;
    padding: 0;
    height: 7vw;
    max-height: 52px;
    font-size: 0;
    background-image: url(imgs/sliderSprite.svg);
    background-size: 200%;
    background-position: right center;
    z-index: 22;
    background-color: #01a8c9;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    button.toggle-day {
        max-width: none;
        max-height: none;
        width: 17vw;
        height: 10vw;
    }
}

.night button.toggle-day {
    background-position: left center;
    background-color: #032649;
}

main {
    width: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    clear: both;
    box-sizing: border-box;
    height: 493.6vw;
}

.windows main {
    height: 488.6vw;
}

@media screen and (max-device-width: 768px),
(max-width: 768px) { 
    main {
        padding: 0;
        height: 756vw;
    }
    
    .windows main {
        height: 742vw;
    }
}

/*********************** intro ****************************/

section#intro {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 0 10%;
    height: 132.5vw;
}

.windows section#intro {
    height: 132.6vw;
}

@media screen and (max-device-width: 768px),
(max-width: 768px) {
    section#intro {
        padding: 0;
        height: 210.4vw;
    }  
    
    .windows section#intro {
        height: 210.2vw;
    }
}

.day section#intro {
   background-image: url(imgs/tree/tree_day_about.png); 
}

@media screen and (max-device-width: 768px),
(max-width: 768px) {
    .day section#intro {
        background-image: url(imgs/tree/mobile_day_about.png);
    }
}

.night section#intro {
   background-image: url(imgs/tree/tree_night_about.png); 
}

@media screen and (max-device-width: 768px),
(max-width: 768px) {
    .day section#intro {
        background-image: url(imgs/tree/mobile_day_about.png);
    }
    
    .night section#intro {
        background-image: url(imgs/tree/mobile_night_about.png);
    }
}

section#intro header {
    position: relative;
    width: 36vw;
    top: 3vw;
    left: 55%;
    height: 51vw;
}

@media screen and (max-device-width: 768px),
(max-width: 768px) { 
    section#intro header {
        width: 51vw;
        top: 16vw;
        left: 46.5vw;
        height: 72vw;
    }   
}

section#intro header h2 {
    font-size: 4vw;
    width: 100%;
    margin: 0;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#intro header h2 {
        font-size: 5vw;
    }
}

section#intro header h1 {
    font-family: "Reklame", sans-serif;
    transform: rotate(-15deg);
    text-align: center;
    font-size: 200px;
    font-size: 18vw;
    position: relative;
    left: -2vw;
    top: -16vw;
    letter-spacing: -.2vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#intro header h1 {
        font-size: 24.5vw;
        top: -22vw;
    }   
}

section#intro header h2:nth-of-type(2) {
    text-align: right;
    position: relative;
    top: -32vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#intro header h2:nth-of-type(2) {
        top: -45vw;
    }   
}

section#intro header h3:before {
    content: '&';
    font-family: "Reklame", sans-serif;
    text-align: center;
    display: block;
    position: absolute;
    font-size: 3vw;
    top: -2vw;
    left: calc(50% - 2vw);
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#intro header h3:before {
        font-size: 4vw;
        top: -3vw;
        left: calc(50% - 2vw);
    }   
}

section#intro header h3 {
    text-transform: uppercase;
    border-top: 0.5vw var(--teal) solid;
    position: relative;
    top: -33vw;
    font-size: 4vw;
    padding: 2vw 1vw 0;
    text-align: center;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#intro header h3 {
        top: -44vw;
        font-size: 6vw;
        margin: 5vw 0;
    }   
}

.night section#intro header h3 {
    border-top: 0.5vw var(--skyblue) solid;
}

section#intro header h3 em {
    display: inline-block;
    font-family: "Reklame", sans-serif;
    transform: rotate(-90deg);
    text-transform: lowercase;
    position: relative;
    font-size: 1.7vw;
    top: -.7vw;
    margin: -2vw;
    background: linear-gradient(90deg,rgba(17, 100, 110, 1) 0%, rgba(29, 152, 186, 1) 20%, rgba(129, 183, 65, 1) 40%, rgba(248, 167, 27, 1) 60%, rgba(237, 26, 117, 1) 80%, rgba(147, 70, 155, 1) 100%);
    background-clip: text;
    background-repeat: no-repeat;
    color: transparent;
    letter-spacing: .2vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#intro header h3 em {
        top: -1.1vw;
        margin: -2.5vw;
        font-size: 2vw;
    }   
}

section#intro header p {
    position: relative;
    top: -36vw;
    font-size: 1.45vw;
    text-align: center;
    letter-spacing: .1vw;
    line-height: 3vw;
    font-weight: 600;
    border-bottom: 0.5vw var(--teal) solid;
    padding-bottom: 3vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#intro header p {
        font-size: 2.2vw;
        line-height: 3.5vw;
        top: -48vw;
        padding-bottom: 3.5vw;
    }
}

.night section#intro header p {
    border-bottom: 0.5vw var(--skyblue) solid;
}

section#intro header p:after {
    content: '' / "a star";
    display: block;
    width: 3vw;
    height: 3vw;
    position: absolute;
    top: 10.3vw;
    background-image: url(imgs/star.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    left: calc(50% - 3vw);
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#intro header p:after {
        width: 4vw;
        height: 4vw;
        top: 12.3vw;
        left: calc(50% - 2vw);
    }
}

.night section#intro header p:after {
    background-image: url(imgs/star_night.svg);
}

section#intro header p a {
    text-decoration: none;
    color: var(--teal);
    transition: all 0.3s linear;
    border-radius: .5vw;
}

section#intro header p a:nth-of-type(1) {
    color: var(--purple);
}

section#intro header p a:nth-of-type(1):hover,
section#intro header p a:nth-of-type(1):active {
    color: var(--white);
    background: var(--purple);
}

section#intro header p a:nth-of-type(2) {
    color: var(--green);
}

section#intro header p a:nth-of-type(2):hover,
section#intro header p a:nth-of-type(2):active {
    color: var(--white);
    background: var(--green);
}

section#intro header p a:nth-of-type(3) {
    color: var(--pink);
}

section#intro header p a:nth-of-type(3):hover,
section#intro header p a:nth-of-type(3):active {
    color: var(--white);
    background: var(--pink);
}

section#intro header p a:nth-of-type(4) {
    color: var(--yellow);
}

section#intro header p a:nth-of-type(4):hover,
section#intro header p a:nth-of-type(4):active {
    color: var(--white);
    background: var(--yellow);
}

section#intro header p em {
    color: var(--blue);
    transition: all 0.3s linear;
    transition: margin .6s linear;
    border-radius: .5vw;
}

section#intro header p em:hover,
section#intro header p em:active {
    color: var(--white);
    background:var(--blue);
    margin-left: 2vw;
}

section#intro article {
    width: 42vw;
    position: relative;
    font-size: 1.45vw;
    letter-spacing: .1vw;
    line-height: 2.7vw;
    font-weight: 600;
    top: 26vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#intro article {
        font-size: 2.2vw;
        line-height: 3.3vw;
        left: 4vw;
        top: 51vw;
        width: 54%;
    }   
}

section#intro article p {
    margin-bottom: 2vw;
}

/*********************** work ****************************/

section#work {
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 0 10%;
    font-size: 1.45vw;
    letter-spacing: .1vw;
    line-height: 2.7vw;
    font-weight: 600;
    height: 296.7vw;
}

.windows section#work {
    height: 296.8vw;
}

.day section#work {
   background-image: url(imgs/tree/tree_day_work.png); 
}

.night section#work {
   background-image: url(imgs/tree/tree_night_work.png); 
}

@media screen and (max-device-width: 768px),
(max-width: 768px) {
    .day section#work {
        background-image: url(imgs/tree/mobile_day_work.png);
    }
    
    .night section#work {
        background-image: url(imgs/tree/mobile_night_work.png);
    }
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work {
        font-size: 2.2vw;
        line-height: 3.3vw;
        height: 452vw;
        padding: 0;
    }   
    
    .windows section#work {
        height: 452vw;
    }
}


section#work nav {
    float: right;
    position: sticky;
    top: 50px;
    background-image: url(imgs/nav/birdmenu_day.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: auto 100%;
    z-index: 20;
    /*width: 22vw;*/
    width: 6vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work nav {
        display: none;
    }   
}

.night section#work nav {
    background-image: url(imgs/nav/birdmenu_night.png);
}

section#work nav ul {
    list-style: none;
    text-align: right;
    margin-top: 7vw;
    padding: 0;
    padding-bottom: 1vw;
    margin-right: 1.6vw;
    display: flex;
    flex-direction: column;
    align-items: end;
}

section#work nav ul li {
    display: block;
    height: 3vw;
    min-width: 3vw;
    margin-bottom: .7vw;
    position: relative;
    background-position: right;
}

section#work nav ul li:after {
    content:"";
    background-image: url(imgs/nav/menu_top.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: block;
    width: 3vw;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    pointer-events: none;
}

section#work nav ul li a {
    display: none;
    color: var(--white);
    text-decoration: none;
    background: var(--translucent_teal);
    border-radius: 1.5vw 4vw 4vw 1.5vw;
    height: 3vw;
    padding-right: 3.5vw;
    padding-left: 1vw;
    box-sizing: border-box;
    position: relative;
    z-index: 4;
    width: 11vw;
}

section#work nav ul li:hover a,
section#work nav ul li:active a {
    display: block;
}

section#work nav ul li:nth-of-type(2):after {
    background-image: url(imgs/nav/menu_about.png);
}

section#work nav ul li:nth-of-type(2) a {
    background: var(--translucent_blue);
    width: 14vw;
}

section#work nav ul li:nth-of-type(3):after {
    background-image: url(imgs/nav/menu_gat.png);
}

section#work nav ul li:nth-of-type(3) a {
    background: var(--translucent_green);
    width: 22vw;
}

section#work nav ul li:nth-of-type(4):after {
    background-image: url(imgs/nav/menu_zoodle.png);
}

section#work nav ul li:nth-of-type(4) a {
    background: var(--translucent_yellow);
}

section#work nav ul li:nth-of-type(5):after {
    background-image: url(imgs/nav/menu_icare.png);
}

section#work nav ul li:nth-of-type(5) a {
    background: var(--translucent_pink);
}

section#work nav ul li:nth-of-type(6):after {
    background-image: url(imgs/nav/menu_lizzie.png);
}

section#work nav ul li:nth-of-type(6) a {
    background: var(--translucent_purple);
    width: 14vw;
}

section#work h2 {
    font-size: 3.5vw;
    margin: 0;
}

section#work ul.gallery {
    list-style: none;
    height: 19vw;
    padding-left: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    position: absolute;
    gap: 1vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work ul.gallery {
        height: 29vw;
    }  
}

section#work ul.gallery li {
    display: block;
}

section#work figure {
    position: fixed;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 18;
    text-align: center;
    display: none;
}

section#work figure:target {
    display: block;
}

section#work figure img,
section#work figure video {
    width: auto;
    height: 94vh;
    border: .5vw solid;
    margin: 2vh auto;
    box-sizing: border-box;
    border-radius: 5px;
}

section#work ul.gallery li a>img {
    height: 100%;
    border-radius: 5px;
    box-sizing: border-box;
    border: .3vw solid;
}

section#work article#gat {
    position: relative;
    width: 40vw;
    left: 33vw;
    top: 20vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work article#gat {
        width: 56vw;
        left: 40vw;
        top: 23vw;
    }
}

section#work article#gat ul.gallery {
    right: 3vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work article#gat ul.gallery {
        right: 0;
        height: 31vw;
    }  
}

section#work article#gat figure {
    background: var(--transparent_green);
}

section#work article#gat ul.gallery li img,
section#work article#gat figure img,
section#work article#gat figure video {
    border-color: var(--green);
}

section#work article#gat ul.gallery li ul {
    width: 9.5vw;
    display: flex;
    flex-direction: column;
    padding: 0;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work article#gat ul.gallery li ul {
        width: 16vw;
    }   
}

section#work article#gat ul.gallery li ul li a>img {
    height: auto;
    width: 100%
}

section#work article#gat ul.gallery li ul li:nth-of-type(1) figure img {
    width: 90vw;
    height: auto;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work article#gat ul.gallery li ul li figure img {
    width: 90vw;
    height: auto;
}
}

section#work article#zoodle {
    position: relative;
    top: 68vw;
    width: 40vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work article#zoodle {
        left: 4vw;
        top: 101vw;
        width: 47vw;
    }   
}

section#work article#zoodle ul.gallery li img,
section#work article#zoodle figure img {
   border-color: var(--yellow); 
}

section#work article#zoodle h2 sup {
    font-size: 2vw;
    top: -.5vw;
    position: relative;
}

section#work article#zoodle p a {
    text-decoration: none;
    color: var(--yellow);
}

section#work article#zoodle p a:hover,
section#work article#zoodle p a:active {
    color: var(--white);
    background-color: var(--yellow);
    border-radius: .5vw;
    transition: all 0.3s linear;
}

section#work article#zoodle figure {
    background: var(--transparent_yellow);
}

section#work article#icare {
    position: relative;
    width: 34vw;
    left: 42vw;
    top: 126vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work article#icare {
        width: 53vw;
        left: 44vw;
        top: 196vw;
    }   
}

section#work article#icare ul.gallery li img,
section#work article#icare figure img {
    border-color: var(--pink);
}

section#work article#icare figure {
    background: var(--transparent_pink);
}

section#work article#icare figure img {
    width: 90vw;
    height: auto;
}

section#work article#lizzie {
    position: relative;
    width: 40vw;
    top: 180vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work article#lizzie {
        left: 4vw;
        width: 49vw;
        top: 290vw;
    }   
}

section#work article#lizzie ul.gallery {
    width: 35vw;
    height: auto;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work article#lizzie ul.gallery {
        width: auto;
    }   
}

section#work article#lizzie ul.gallery li a>img {
    border-color: var(--purple);
    height: auto;
    width: 100%;
}

section#work article#lizzie figure img {
    border-color: var(--purple);
    width: 90vw;
    height: auto;
}

section#work article#lizzie ul.gallery li ul {
    width: 10vw;
    display: flex;
    flex-direction: column;
    padding: 0;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section#work article#lizzie ul.gallery li ul { 
        width: 20vw;
    }
    
    section#work article#lizzie ul.gallery li ul li:last-of-type {
        display: none;
    }   
}

section#work article#lizzie figure {
    background: var(--transparent_purple);
}

/*********************** contact **************************/

section.contact {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 0 10%;
    height: 64.5vw;
    position: relative;
}

.windows section.contact {
    height: 64.5vw;
}

.day section.contact {
   background-image: url(imgs/tree/tree_day_nav.png); 
}

.night section.contact {
   background-image: url(imgs/tree/tree_night_nav.png); 
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section.contact {
        height: 95vw;
        padding: 0;
    }
    
    .windows section.contact {
        height: 94vw;
    }
    
    .day section.contact {
        background-image: url(imgs/tree/mobile_day_contact.png);
    }
    
    .night section.contact {
        background-image: url(imgs/tree/mobile_night_contact.png);
    }
}

section.contact nav {
    background: url(imgs/nav/footermenu_day.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
    width: 15vw;
    height: 60vw;
    position: absolute;
    left: 42vw;
    bottom: 11.4vw;
}

.night section.contact nav {
    background-image: url(imgs/nav/footermenu_night.png);
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    section.contact nav {
        bottom: 42vw;
    }   
}

section.contact nav ul {
    list-style: none;
    padding: 0;
    margin-top: 11vw;
    font-size: 1.45vw;
}

section.contact nav ul li a {
    text-decoration: none;
    color: var(--white);
    background-repeat: no-repeat;
    display: block;
    background-size: 100% auto;
    position: relative;
    box-sizing: border-box;
    transition: all 0.3s linear;
}

section.contact nav ul li:nth-of-type(1) a {
    background-image: url(imgs/nav/footermenu_email.png);
    width: 20vw;
    height: 15vw;
    padding: 3.5vw 5.2vw;
    left: -5vw;
    top: -3vw;
    background-size: auto 100%;
}

section.contact nav ul li:nth-of-type(2) a {
    background-image: url(imgs/nav/footermenu_about.png);
    width: 18vw;
    padding: 1.5vw 5.2vw;
    left: 0vw;
    top: -3vw;
    transform: rotate(-19deg);
}

section.contact nav ul li:nth-of-type(2) a:hover,
section.contact nav ul li:nth-of-type(2) a:active {
    color: var(--blue);
    transform: rotate(-17deg);
}

section.contact nav ul li:nth-of-type(3) a {
    background-image: url(imgs/nav/footermenu_gat.png);
    width: 24vw;
    padding: 1.5vw 5.2vw;
    left: -3vw;
    top: 0vw;
    transform: rotate(-5deg);
}

section.contact nav ul li:nth-of-type(3) a:hover,
section.contact nav ul li:nth-of-type(3) a:active {
    color: var(--green);
    transform: rotate(-3deg);
}

section.contact nav ul li:nth-of-type(4) a {
    background-image: url(imgs/nav/footermenu_zoodle.png);
    width: 19vw;
    padding: 1.5vw 7.2vw;
    left: -2vw;
    top: 2vw;
    transform: rotate(2deg);
}

section.contact nav ul li:nth-of-type(4) a:hover,
section.contact nav ul li:nth-of-type(4) a:active {
    color: var(--yellow);
    transform: rotate(-1deg);
}

section.contact nav ul li:nth-of-type(5) a {
    background-image: url(imgs/nav/footermenu_icare.png);
    width: 13vw;
    height: 5vw;
    padding: 1.5vw 4.2vw;
    left: 2vw;
    top: 3vw;
    transform: rotate(-11deg);
}

section.contact nav ul li:nth-of-type(5) a:hover,
section.contact nav ul li:nth-of-type(5) a:active {
    color: var(--pink);
    transform: rotate(-14deg);
}

section.contact nav ul li:nth-of-type(6) a {
    background-image: url(imgs/nav/footermenu_lizzie.png);
    width: 19vw;
    height: 5vw;
    padding: 1.5vw 0 1.5vw 6.2vw;
    left: -2vw;
    top: 5vw;
    transform: rotate(7deg);
}

section.contact nav ul li:nth-of-type(6) a:hover,
section.contact nav ul li:nth-of-type(6) a:active {
    color: var(--purple);
    transform: rotate(3deg);
}

footer {
    position: absolute;
    bottom: .5vw;
    color: var(--white);
    width: 100%;
    text-align: center;
    font-size: 1.2vw;
}

.windows footer {
    bottom: -4.5vw;
}

@media screen and (max-device-width: 768px), (max-width: 768px) {
    footer {
        font-size: 2.2vw;
    }
    
    .windows footer {
        bottom: -13vw;
    }
}

footer p {
    margin: 0;
}