:root {
    --basecolr:#21c6ff;
}
body {
    font-family: Arial;
    margin: 0px;
    text-align: center;
}
/* Add a black background color to the top navigation */
.topnav {
    background-color: var(--basecolr);
    overflow: hidden;
  }

/* Style the links inside the navigation bar */
.topnav span {
    float: left;    
    color: #000000;
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
    min-width: 120px;
}
.button {
    background-color: var(--basecolr);
    border: none;
    border-color: #000;
    color: #000;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 32px;
  }
.text {
    border: solid 2px;
    border-color: #000;
    padding: 8px 8px;
    border-radius: 32px;
}
.help-block {
    text-align: left;
    width: 50%;
    margin-left: 25%;
}

/* Smartphone Portrait and Landscape */
@media only screen
  and (min-device-width : 320px)
  and (max-device-width : 480px){ 
    body {
        font-size: 34px;
    }
    .text {
        font-size: 60px;
        width: 100%;
        height: 120px;
    }
    .button {
        width: 100%;
        height: 120px;
        font-size:54px
    }
    .help-block {
        margin-left: 0%;
    }
}
a {
    color: #000;
    background-color: var(--basecolr);
    text-decoration: none;
}
a:hover {
    color: var(--basecolr);
    background-color: #000;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--basecolr);
    z-index: 1;
    top: 18px;
  }
  .dropdown-content a {
    float: none;
    padding: 0px 16px;
    min-width: 120px;
    display: block;
    text-align: center;
  }
  .dropdown:hover .dropbtn {
    background-color: #000000;
    color: white;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }

.topnav-a {
  float:left;
  min-width: 120px;
  padding: 0px 16px;
}
.topnav-a:hover {
  background-color: #000000;
  color: white;
}