/***********************
    -----------------
         General 
    -----------------
************************/

* {
    font-family: 'Montserrat';
    --main-color:  #7DB8FF;
    --light-grey: #24252A;
    --dark-grey: #17181B;
    --text-color: #8D8D90;
    --main-color-selected: #A5CEFF;
    --cow-color-1: #B4D6FF;
    --cow-color-2: #7DB8FF;
    --cow-mouth-color: #A5CEFF;
    --patreon: #f96854;
}
html {
  scroll-behavior: smooth;
}

a{
    text-decoration: none;
}

body{
    margin: 0px;
    background-color: var(--light-grey);
}
div.mobile{
    display: none;
}
@media screen and (max-width: 600px) {
    div.desktop{ display: none;}
    div.mobile{display: block;}
    
}

h1{
    color: white;
}
h2{
    color: var(--text-color);
    font-weight: 20;
}
/***********************
    -----------------
        Topnav 
    -----------------
************************/
    .topnav {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        background-color: var(--light-grey);
        position: fixed;
        width: 100%;

        z-index: 2;
    }


    a#logo{
        color: white;
        float: left;
        font-size: 35px;
        font-weight: 600;
        margin: 1em;
    }
    .topnav > a{
        transition: 0.2s color ease-in-out;
        color: var(--text-color);
        margin-left: 2em;
        font-size: 20px;
        
    }
    
    .topnav > a:hover{
        color: var(--main-color);
    }

    a#contact{
        margin-right: auto;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }

    a#getStarted{
        border-radius: 38px;
        float: right;
        margin-right: 0.75em;
        padding: 1em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        text-decoration: none;
        border: 2px solid var(--main-color);
        color: var(--main-color);
    }


    span#getStartedtext{
        color: inherit;
        font-size: 20px;
    }


    a#getStarted:hover{
        color: var(--light-grey);
        background-color: var(--main-color);
        border: 2px solid var(--main-color);
    }

    a#patreon{
        border-radius: 38px;
        float: right;
        margin-right: 1em;
        padding: 1em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        text-decoration: none;
        border: 2px solid var(--patreon);
        color: var(--patreon);
    }


    span#patreon{
        color: inherit;
        font-size: 20px;
    }


    a#patreon:hover{
        color: var(--light-grey);
        background-color: var(--patreon);
        border: 2px solid var(--patreon);
    }

/***********************
    -----------------
         Footer 
    -----------------
************************/


    h2.links > a{
        color: var(--text-color);
        font-weight: 20;
        display: block;
        transition: 0.2s color ease-in-out;
    }

    h2.links > a:hover{
        color: var(--main-color);
    }

    div.footer{
        height: 15em;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        align-items: center;
    }