@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500&display=swap');

@font-face {
    font-family: ndot32;
    src: url(fonts/ndot-47.ttf);
}
* {
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
}

a {
    text-decoration: none;
    color: #ECF6FF;
}

ul {
    list-style-type: none;
}

nav {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #333333;
    height: 80px;
    z-index: 90;
}

.navContainer {
    display: flex;
    justify-content: space-between;
    width: 80%;
}

.navLogo  {
    height: 40px;
}

.pages {
    display: flex;
}

.pages>li {
    margin: 10px;
}
.navContainer>.right {
    display: flex;
}

.right>a {
    margin: 5px;
}

footer {
    background-color: #3F3F3F;
}

.footerLogo  {
    height: 40px;
}

.links {
    height: 150px;
    width: 80vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.links>.left {
    display: flex;

}

.links>.right {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

}

.label {
    background-color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    z-index: 2;
}

.romeo {
    color: #ECF6FF; 
    font-family: ndot32;
    letter-spacing: 1.4px;
}

.left>.column {
    margin-left: 20px;
}


.copyright>p {
    color: #ECF6FF;
}

.socials {
    padding-bottom: 15px;
}

.socials>a {
    margin-left: 10px;
}

.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
}

.line {
    height: 3px;
    width: 25px;
    background-color: #ECF6FF;
    margin: 3px;
    border-radius: 3px;
}

.drop-down {
    position: fixed;
    background-color: #333333;
    padding-top: 80px;
    z-index: 20;
    right: 0;
    width: 150px;
    border-radius: 3px;
}

.drop-down-links>li {
    padding-top: 5vw;
}

.drop-down-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.active {
    display: block;
}

.inactive {
    display: none;
}

@media screen and (max-width: 600px) {
    

    .drop-down {
        height: auto;
  }

  .drop-down-links {
        padding-bottom: 15px;
  }

    .burger-menu {
        display: flex;
    }

    .navContainer>.center {
        display: none;
    }

    .navContainer>.right {
        display: none;
    }


    /* .drop-down {
        display: block;
    } */




    .links>.left {
        display: none;
    }

    .links {
        justify-content: center;
        height: 100px;
    }

    .label {
        height: 26px;
    }

    .romeo {
        font-size: 13px;
    }
}





.ghost {
    height: 900px;
}