header{
    line-height: 2rem;
    color:rgb(249, 245, 245);
    margin-bottom:5rem;
}
header .title{
    width:50%;
    float:left;
    opacity: 0.99;
}
header .title img{
    position:relative;
    top:3px;
}
header .title h1{
    font-size:1.25rem;
    display: inline;
    color:white;
}
header .nav{
    font-size:1rem;
    width:50%;
    float:right;
}
header .nav .hamburger{
    display:none;
    float:right;
    position: relative;
}
header .nav .hamburger svg{
    height:2rem;
    cursor: pointer;
}
header .nav .hamburger svg path{
    fill:white;
}
header .nav ul{
    list-style: none;
    float:right;
    position:relative;
}
header .nav ul a {
    color:rgb(249, 245, 245);
    text-decoration: none;
    margin-left:0.3rem;
    margin-right:0.3rem;
    opacity: 0.9;
    padding:0.3rem;
}
header .nav ul a li{
    display:inline-block;
}
header .nav ul .dropdown{
    display:inline-block;
    position:relative;
}
header .nav ul .dropdown .menu{
    position:absolute;
    left:50%;
    display:none;
    z-index:9;
    transform: translate(calc(-50% - 1rem), 8px);
}
header .nav ul .dropdown .menu.show{
    display:flex;
    flex-direction: column;
}
header .nav ul .dropdown .menu a{
    padding:0;
    margin:0;
}
header .nav ul .dropdown .menu a li{
    background-color: var(--secondary-2);
    width:100%;
    padding:0.25rem;
    padding-left:1rem;
    padding-right:1rem;
    text-align: center;
}

header .nav ul .dropdown .menu a:first-child li{
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
header .nav ul .dropdown .menu a:last-child li{
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

header .nav ul .dropdown .menu li:hover{
    background-color: var(--secondary-1);
}
header .nav ul a.launcher {
    border-radius: 1rem;
    margin-left:0.4rem;
    padding:0.5rem;
    padding-left:1rem;
    padding-right:1rem;
}
header .nav ul a.launcher.primary {
    background-color: var(--primary-1);
}
header .nav ul a.launcher.secondary {
    background-color: var(--tertiary-1);
}

.header svg.main-title{
    position: relative;
    width:512px;
    font-family: 'Poppins', 'Helvetica';
    font-weight:600;
    font-size: 7.5rem;
}
.header svg.main-title .g-ants #outline {
    fill: none;
    stroke:var(--tertiary-1);
    stroke-width:3;
    stroke-dasharray:100%;
    stroke-dashoffset:100%;
    animation-name: outline;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
}
.header svg.main-title .g-ants #fill {
    fill:var(--tertiary-1);
    fill-opacity: 0;
    animation-name: fill;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-delay: 2.5s;
}

.header .intro-paragraph{
    font-size: 1rem;
    font-family: 'Poppins', 'Helvetica';
    color:white;
    opacity: 0.99;

    max-width:70%;

    animation-name: fade;
    animation-duration: 8s;
}

div.straight-header{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    z-index:9;
    position:relative;
}
div.straight-header header{
    margin:0;height:2rem;
}

@keyframes outline{
    from{
        stroke-dashoffset:100%;
    }
    
    to{
        stroke-dashoffset:0;
    }
}
@keyframes fill{
    from{
        fill-opacity: 0;
    }
    
    to{
        fill-opacity: 0.75;
    }
}
@keyframes fade{
    from{
        opacity: 0;
    }
    
    to{
        opacity: 0.99;
    }
}

@media only screen and (max-width: 770px) {
    header .nav .hamburger{
        display:block;
    }
    header .nav>ul{
        display:none;
        width:100vw;
        position:relative;
        left:3rem;
    }
    header .nav ul.show{
        display:block;
    }
    header .nav ul a, header .nav ul .dropdown .menu a{
        margin:0rem;
        padding:0rem;
        display:block;
        margin-top:0.25rem;
        margin-bottom: 0.25rem;
    }
    header .nav ul a li, header .nav ul .dropdown .menu a li{
        display:block;
        padding-right:3rem;
        text-align: right;
        background-color: transparent;
    }
    header .nav ul .dropdown{
        display:block;
        position:relative;
    }
    header .nav ul .dropdown>a li:after{
        content:'. . .';
    }
    header .nav ul .dropdown .menu{
        position:static;
        transform: none;
        height:fit-content;
    }
    header .nav ul .dropdown .menu ul{
        position:static;
    }
    
    header .nav ul .dropdown .menu.show ul br{
        display: none;
    }
     header .nav ul .dropdown .menu a{
        padding-right:4.5rem;
    }
    header .nav ul .dropdown .menu a li{
        padding:0;
    }
    header .nav ul .dropdown .menu a li:after{
        content: " -";
    }
    
    header .nav ul .dropdown .menu a:first-child li{
        border-top-left-radius: 0rem;
        border-top-right-radius: 0rem;
    }
    header .nav ul .dropdown .menu a:last-child li{
        border-bottom-left-radius: 0rem;
        border-bottom-right-radius: 0rem;
    }
    
    header .nav ul .dropdown .menu li:hover{
        background-color: transparent;
    }
    header .nav ul a.launcher{
        border-radius: 0rem;
        margin-left:0rem;
        padding:0rem;
    }
    header .nav ul a.launcher.primary{
        background-color: transparent;
    }
    header .nav ul a.launcher.secondary{
        background-color: transparent;
    }
}
@media only screen and (max-width: 710px) {
    .header svg.main-title{
        width:400px;
    }
}

@media only screen and (max-width: 670px) {
    .header svg.main-title {
        width:350px;
    }
}

@media only screen and (max-width: 470px) {
    .header .intro-paragraph{
        max-width: 85%;
    }
    .header svg.main-title {
        width:300px;
    }
}

@media only screen and (max-width: 415px) {
    header .title h1{
        font-size:1rem;
    }
    header .nav .hamburger svg{
        height:1.5rem;
    }
}

@media only screen and (max-width: 400px) {
    .header{
        text-align: center;
    }
    .header svg.main-title {
        width:100%;
    }
    .header svg.main-title text{
        text-anchor:middle;
        transform: translateX(50%);
    }
    .header .intro-paragraph{
        max-width:none;
        font-size: 14px;
    }
}
@media only screen and (max-width: 370px) {
    header .title h1{
        font-size:0.9rem;
    }
    header .nav .hamburger svg{
        height:1.5rem;
    }
}
@media only screen and (max-width: 345px) {
    header .title img{
        display:none;
    }
    header .nav .hamburger svg{
        height:1.2rem;
    }
}
@media only screen and (max-width: 240px) {
    header .title img{
        display:inline-block;
    }
    header .title h1{
        display:none;
    }
    .header .intro-paragraph{
        font-size:12px;
    }
}