/*
  Navbar & Footer
*/

/* Add a glassmorphism background color to the top navigation */
.topnav {
    background: rgba( 255, 255, 255, 0.2 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 6.5px );
    -webkit-backdrop-filter: blur( 6.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    transition: 0.1s;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background: rgba( 255, 255, 255, 0.6 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 6.5px );
    -webkit-backdrop-filter: blur( 6.5px );
    border-radius: 10px;
    color: black;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }

footer {
    color: #f2f2f2;
    background: rgba( 255, 255, 255, 0.2 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 6.5px );
    -webkit-backdrop-filter: blur( 6.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    overflow: hidden;
    padding: 1px 16px;
    text-align: center;
}

/*
  Style
*/

html {
    font-family: 'Roboto', sans-serif;
    background: #232526;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1 {
    font-family: 'Signika', sans-serif;
}
li {
    list-style-type: none;
    text-align: left;
}

.router {
    cursor: pointer;
    font-family: 'Signika', sans-serif;
    font-size: large;
    padding: 1em 5em;
    margin-top: 1em;
    margin-bottom: 1em;
    background: #F09819;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #EDDE5D, #F09819);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #EDDE5D, #F09819); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border: none;
    border-radius: 2.5em;
    transition: 0.3s;
}

.router:hover {
    transform: scale(1.1);
    color: white;
    background: #56ab2f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.PayPal {
    margin-top: 3em;
}

.a-PayPal {
    color: #a8e063;
    text-decoration: none;
    font-size: large;
    transition: 0.3s;
}

.a-PayPal:hover {
    transform: scale(1.1);
    color: #56ab2f;
}

#fire, #heart {
    color: #FF4E50;  /* fallback for old browsers */
}

.pumpkin {
    text-decoration: solid;
    color: #F09819;
    transition: 0.3s;
}

.pumpkin:hover {
    transform: scale(1.1);
    text-decoration: solid underline;
    color: white;
}

.body-container {
    text-align: center;
}

.upperhalf {
    padding: 5em 10em;
    color: #f2f2f2;
    background: #1e3c72;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2a5298, #1e3c72);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2a5298, #1e3c72); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    margin-top: .5em;
    margin-bottom: .5em;
    border-radius: 10px;
}

.downhalf {
    padding: 5em 10em;
    color: #f2f2f2;
    background: #ED213A;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #93291E, #ED213A);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 10px;
    margin-bottom: .5em;
}

.section-3 {
    padding: 5em 10em;
    color: #f2f2f2;
    background: #606c88;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #3f4c6b, #606c88); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    margin-top: .5em;
    margin-bottom: .5em;
    border-radius: 10px;
}

.section-4 {
    padding: 5em 10em;
    color: #f2f2f2;
    background: #606c88;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #3f4c6b, #606c88); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 10px;
    margin-bottom: .5em;
}

/* ----------------------------------------------------------------------------------------------- */

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }

    .router {
        padding: .75em 3em;
        margin-top: .5em;
        margin-bottom: .5em;
        font-size: medium;
    }

    .upperhalf {
        padding: 1em 1em;
    }

    .downhalf {
        padding: 1em 1em;
    }

    .section-3 {
        padding: 1em 1em;
    }

    .section-4 {
        padding: 1em 1em;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }