* {
    margin:0;
    padding:0;
}

html {
    scroll-behavior:smooth;
}

::-webkit-scrollbar {
    width:10px;
    background:#fff;
}

::-webkit-scrollbar-thumb {
    background:#FFD700;
    border-radius:10px;
}

_::-webkit-full-page-media, _:future, :root nav ul li {
  padding-right: 3em;
}

body {
    font-family:'Raleway', sans-serif;
    background:#eee;
}

header {
    width:100%;
    height:100px;
    background:#fff;
    text-transform:uppercase;
    text-decoration:none;
    list-style:none;
    position:fixed;
    top:0;
    left:0;
    z-index:10;
    box-shadow: 0vh 0vh 25px #000000;
    text-align:center;
}

.text-only {
    text-align:center;
    width:100% !important;
    height:50vh !important;
    background:#eee;
    color:#333;
    display:flex;
    flex-direction:column;
    gap:3vh;
    justify-content:center;
    align-items:center;
    z-index:3;
}

.text-only h1 {
    color:#FFD700;
    font-size:6vw;
    font-weight:900;
    text-transform:uppercase;
}

.logo {
    color:#333;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    margin-left:2em;
    font-weight:800;
    transition: color 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.logo:hover {
    transform:scale(1.1) translateY(-50%);
    color:#FFD700;
    transition: color 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.nav-toggle {
    position:absolute;
    top:0;
    z-index:15;
    right:0;
    margin-right:3em;
    align-items:center;
    height:100%;
    width:5vw;
    opacity:0;
    display:none;
}

.hamburger {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 14;
  display: none;
  margin-right:3em;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}

.bar::before,
.bar::after,
.bar {
    width: 5vw;
    height:3px;
    background:#000;
}

.bar {
    position:relative;
    display:block;
}

.bar::before,
.bar::after {
    content:'';
    position:absolute;
    left:0;
    transition:all 0.3s ease-in-out;
}

.bar::after {
   transition:all 0.3s ease-in-out;
}

.bar::before {
    top:10px;
}

.bar::after {
    bottom:10px;
}

.nav-toggle:checked + .hamburger {
        transform: rotate(45deg);
        transform-origin:middle;
        transition:all 0.3s ease-in-out;
}

.nav-toggle:checked + .hamburger .bar::before,
.nav-toggle:checked + .hamburger .bar::after {
  top: 0;
  transform-origin:middle;
  transform: rotate(90deg);
  transition: transform 0.3s ease-in-out;
}

.nav-toggle:checked + .hamburger .bar::after {
    opacity:0;
    transition:opacity 0.3s ease-in-out;
}

.nav-toggle:checked ~ nav {
    display:block;
    font-size:4vw;
    transform:scale(1,1);
    transition: transform 0.5s ease-in-out;
}

.nav-toggle:checked ~ nav a {
    color:#000;
    opacity:1;
    transition:color 0.3s ease-in-out, opacity 0.5s ease-in-out 0.3s;
}

.nav-toggle:checked ~ nav a:hover {
    color: #FFD700;
    transition:color 0.2s ease-in-out;
}

.grid-cells a {
    font-family:sans-serif;
    text-transform:uppercase;
    font-weight:700;
    border-radius: 3vw;
    padding:1vh 2vw;
    border: 3px solid #FFD700;
    text-decoration: none;
    font-size:1.5vw;
    color:#FFD700;
    transition:background 0.2s ease-in-out, color 0.2s ease-in;
}

.grid-cells a:hover {
    color:#fff;
    background:#FFD700;
    transition:background 0.2s ease-in-out, color 0.2s ease-in;
}

.nav {
    width:100%;
    height:100%;
}

.nav-list {
    display:flex;
    height:100%;
    gap:3em;
    margin-left:13em;
    text-decoration:none;
    list-style:none;
    align-items:center;
    color:#000;
}

.nav-link {
    color:#000;
    text-decoration:none;
    font-weight:700;
    transition:color 0.2s ease-in-out;
}

.nav-link:hover {
    color:#FFD700;
    transition:color 0.2s ease-in-out;
}

.mobile {
    display:none;
}

.footer {
    width:100%;
    height:10vh;
    color:#FFD700;
    background-color: #eee;
    background-image: url("network.jpg");
    font-size:3.25vh;
    text-transform:uppercase;
    text-align:center;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    background-repeat: no-repeat;
    background-size: cover;
}

.footer p {
    width:100%;
}

.grid-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: #333;
  color: #eee;*/
}

.grid {
  width: 80%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  text-align: center;
  /*color: white;*/
  grid-column-gap: 3vw;
  grid-row-gap: 3vh;
  width: 80%;

}

.grid-cell-title {
  font-weight: 900;
  font-size: 3vw;
  text-transform: uppercase;
  color: #FFD700;
  transition: color 0.3s ease-in-out;
}

.description {
  font-weight: 700;
  font-size: 1.25vw;
  margin-top: 1vh;
}
.grid-cells {
  padding: 3vh 3vw;
  transition: background 0.3s ease-in, color 0.3s ease-in-out;
}

.grid-cells:hover {
  background: white;
  color: black;
  transition: background 0.3s ease-in, color 0.3s ease-in-out;
}

.grid-cells:hover > .grid-cell-title {
  transition: color 0.3s ease-in-out;
}

/*------ MOBILE STYLES --*/

@media screen and (max-width: 900px) {
    ::-webkit-scrollbar {
        width:0px;
        background:#eee;
    }

    header {
        height:100px;
    }


    .nav-toggle {
        display:block;
    }

    .nav {
        width:100%;
        height:100vh;
        background:#fff;
        transform:scale(1,0);
        transform-origin:bottom;
        display:block;
        transition: transform 0.5s ease-in-out 0.2s;
    }

    .nav-list {
        display:flex;
        flex-direction:column;
        justify-content:center;
        width:100%;
        font-size:4vw;
        margin-left:0;
        gap:3em;
        text-decoration:none;
        color:#000;
    }

    .nav-link {
        text-decoration:none;
        color:#000;
        opacity:0;
        transition: opacity 0.3s ease-in-out;
    }

    .hamburger {
        display:flex;
    }

    .nav-desktop {
        display:none;
    }

    .logo {
        z-index:20;
    }

    .mobile {
        display:table;
        padding-top:10vh;
    }

    .text-and-image a {
        font-size:2.5vw;
        margin-bottom:3vh;
    }

    .footer {
        width:100%;
        height:10vh;
        color:#FFD700;
        background-color: #eee;
        font-size:1.00vh!important;
        background-image: url("network.jpg");
        text-transform:uppercase;
        text-align:center;
        font-weight:700;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .footer {
        font-size:1vw;
    }
    /*------ END OF MOBILE STYLES --*/


@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 2)
   { 
}

/*
.grid-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  color: #eee;
}

.grid {
  width: 80%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  text-align: center;
  color: white;
  grid-column-gap: 3vw;
  grid-row-gap: 3vh;
}

.grid-cell-title {
  font-weight: 900;
  font-size: 3vw;
  text-transform: uppercase;
  color: #ef4d8c;
  transition: color 0.3s ease-in-out;
}

.description {
  font-weight: 700;
  font-size: 1.25vw;
  margin-top: 1vh;
}
.grid-cells {
  padding: 3vh 3vw;
  transition: background 0.3s ease-in, color 0.3s ease-in-out;
}

.grid-cells:hover {
  background: white;
  color: black;
  transition: background 0.3s ease-in, color 0.3s ease-in-out;
}

.grid-cells:hover > .grid-cell-title {
  transition: color 0.3s ease-in-out;
}
*/