:root{
    --mainColour: #c2c2c2;
}
.navbar {
    /* opacity: 98%; */
    display: block;
    margin: 0;
    padding: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    backdrop-filter: blur(0.6rem);
    -webkit-backdrop-filter: blur(1rem);
    border-bottom: solid;
    border-bottom-width: 1px;
    /* border-bottom-color: hsla(0, 0%, 20%, 0.9); */
    border-bottom-color: white;

    z-index: 1100;
}

.navbar:hover{
    opacity: 100%;
}

.home {
    text-transform: uppercase;
    letter-spacing: 0.07rem;
    font-size: 0.85rem;
}
.home a:hover {
    animation: colourCycle 3s linear infinite;
}

@keyframes colourCycle {
  0% {
    color: rgb(249, 87, 90);
  }
  25% {
    color: rgb(252, 176, 77);
  }
  50% {
    color: rgb(249, 87, 90);
  }
  75% {
    color: rgb(84, 170, 222);
  }
  100% {
    color: rgb(249, 87, 90);
  }
}


.navbar a {
    text-decoration: none;
    color: var(--mainColour);
    fill: var(--mainColour)
}
.navbar a:visited {
    color: var(--mainColour)
}

  

.navbar-links {
    display: block;
    position: absolute;
    right: 0;
}
.navbar-items {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.toggle-buttons {
    position: absolute;
    display: grid;
    right: 1.3rem;
    transform: translateY(-18px);
}
.toggle-on, .toggle-off {
    grid-row: 1;
    grid-column: 1;
}
.centre-navbar-mobile {
    color: transparent;
}






@media (max-width: 991px) {







    .navbar-links a {
        /* color: white; */
        color: rgb(38, 44, 49);
        transition: color 0.75s ease-in-out;
    }
    
    .navbar-links a:visited {
        color: rgb(38, 44, 49);
        /* color: white; */
    }
    .navbar-links a.active {
        /* color: blue;  */
        color: white;
    }
    

    .navbar {
        padding: 1.6rem 0 1.6rem 0;
    }

    .home a {
        color: var(--mainColour);
    }
    .home a:visited {
        color: var(--mainColour);
    }


    .text-links {
        padding-top: 2.5vh;
        padding-bottom: 2.5vh;
    }
    .hide-me {
        display: none;
    }
    .toggle-off {
        display: none;
    }
    .toggle-on {
        fill: var(--mainColour);
    }
    .navbar-links {
        display: none;
    }
    .navbar-links {
        position: absolute;
        margin: 0;
        top: 50vh;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: right;
        padding-right: 10vw;
        font-size: 0.7rem;
        letter-spacing: 0.3rem;
        text-transform: uppercase;
    }

    .hide-me {
        height: 100vh;
        width: 100vw;
    }


    .home {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
    }


    #icon-link2 {
        position: absolute;
        bottom: 0;
        transform: translate(-1.6rem, 150px);
    }

    #icon-link1 {
        position: absolute;
        bottom: 0;
        transform: translate(calc(-3.2rem - 22px), 150px);
    }

    #icon-link0 {
        position: absolute;
        bottom: 0;
        transform: translate(calc(-4.8rem - 44px), 150px);
    }
    .icon-links {
        opacity: 0%;
    }
}

@media (max-height: 520px) {
    #icon-link2 {
        position: absolute;
        bottom: 0;
        transform: translate(-1.6rem, 3.2rem);
    }

    #icon-link1 {
        position: absolute;
        bottom: 0;
        transform: translate(calc(-3.2rem - 22px), 3.2rem);
    }

    #icon-link0 {
        position: absolute;
        bottom: 0;
        transform: translate(calc(-4.8rem - 44px), 3.2rem);
    }
}

@media (min-width: 992px) {

    .hide-me {
        display: none;
    }

    .centre-navbar-mobile {
        display: none;
    }

    .toggle-buttons {
        display: none;
    }


    .navbar {
        display: flex;
        padding: 1.4rem 0 1.4rem 4rem;
    }
    .navbar-links {
        margin-right: 4rem;
    }
    .navbar-items {
        display: inline-block;
        padding-left: 0.8rem;
    }
    .home {
        float: left;
        letter-spacing: 0.15rem;
        text-transform: uppercase;
    }
    .navbar-links {
        position: absolute;
        float: right;
        right: 0;
    }
    .text-links {
        transform: translateY(-1.4rem);
        letter-spacing: 0.05rem;
    }
    .icon-links {
        transform: translateY(-1.1rem);
    }
      
    .navbar-links a {
        display: block;
        transition: opacity 0.4s ease-out, transform .2s ease-in-out;
    }

    .navbar-links:hover a:not(:hover) {
        opacity: 0.7;
        opacity: 0.5;
        filter: blur(0.015rem);
        -webkit-filter: blur(0);
    }

    .navbar-links a:hover {
        opacity: 1;
        color: hsl(0, 0%, 100%);
        fill: hsl(0, 0%, 100%);
    }
    
    .text-links a:hover {
        transform: scale(1.065);
    }
}