* {
    font-family: 'Rubik';
    margin: 0;
    padding: 0;
}

body {
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}



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

    #flashing {
        position: absolute;
        z-index: 10;
        animation: flash 1s infinite; 
        width: 100%;
        height: 100%;
        opacity: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        font-size: 20px;
    }

    #close_message {
        width: 140px;
        height: 30px;
        border-radius: 30px;
        border: none;
        color: #3085fe;
        font-weight: 600;
        background-color: #fff;
        margin-top: 15px;

        animation: btnFlash 1s infinite; 

    }

    
@-webkit-keyframes flash{
    0%, 49% {
      background-color: white;
      color: black;
    }
    50%, 100% {
        background-color: black;
        color: white;
    }
  }

  @-webkit-keyframes btnFlash{
    0%, 49% {
      background-color: black;
      color: white;
    }
    50%, 100% {
        background-color: white;
        color: black;
    }
  }

    #loader {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 80px;
        height: 80px; 
        margin: -46px 0 0 -46px; 
        border: 12px solid #ffffff; 
        border-radius: 50%;
        border-top: 12px solid #3085fe; 
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
      

    header {
        background-color: #3085fe;
        color: #8c8c8c;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22px;
        position: sticky;
        top: 0;
    }

    #enable {
        background-color: #fff;
        width: 140px;
        height: 30px;
        border-radius: 30px;
        border: none;
        color: #3085fe;
    }

    #enable:active {
        background-color: #f1f1f1;

    }

    #header h1 {
        font-size: 40px;
        font-weight: 500;
        letter-spacing: 1.5px;
    }

    #header a{
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
    
        stroke: #fff;
    }

    #header a svg {
        margin-left: 3px;
        width: 40px;
    }

    .listen_icon {
        stroke: #fff;
    }

    #listen_tab {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #listen {
        background-color: #3085fe;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 250px;
        height: 300px;
        border-radius: 30px;

        margin-top: 15%;
    }

    #sound_detected {
        margin-top: 15px;
        font-size: large;
    }

    #listen:active {
        background-color: #7bb1fc;
    }

    .listen_icon {
        width: 150px;
    }

    #listen_btn {
        margin-top: 15px;

        background: none;
	    border: none;
	    padding: 0;
	    font: inherit;
        color: #fff;
        cursor: pointer;
        outline: none;
        border-radius: 30px;
        width: 250px;
        height: 50px;
        font-size: 20px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
    }



    #settings_tab {
        display: flex;
        flex-direction: column;
    }

    nav {
        box-shadow: 0px -4px 3px rgba(202, 202, 202, 0.75);
        background-color: #fff;
        color: black;
        display: flex;
        justify-content: space-around;
        padding-top: 8px;
        padding-bottom: 8px;

        bottom: 0;
        left: 0;
        right: 0;
         z-index: 5;
         position: fixed;
    }

    .ionicon {
        fill: rgb(100, 100, 100);
        width: 25px;
        margin-bottom: 5px;
    }

    nav a {
        color: rgb(100, 100, 100);
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 15px;
    }

    .selected {
        color: #3085fe;
        font-weight: 600;
    }

    .selected svg {
        fill: #3085fe;
        width: 28px;
    }

    #add_sound{
        padding: 25px;
        background-color: #fff;
        margin: 20px;
        border-radius: 30px;
    }
    
    #settings_tab h2 {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    
    #alert_input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 70%;
    }

    #alert_input:focus {
        outline: none;
    }

    #search {
        display: flex;
        justify-content: space-between;
    }
    
    #add_sound_btn {
        background-color: #3085fe;
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #add_sound_btn:active {
        background-color: #7bb1fc;
    }
    
    #sound_list {
        list-style: none;
        padding: 0;
        margin: 15px 0;
    }
    
    #sound_list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }
    
    #sound_list li:last-child {
        border-bottom: none;
    }
    
    #sound_list .remove_btn {
        color: #e74c3c;
        cursor: pointer;
    }

    #custom_sound {
        padding: 25px;
        background-color: #fff;
        margin: 20px;
        border-radius: 30px;
    }

    
    #about div{
        padding: 25px;
        background-color: #fff;
        margin: 20px;
        border-radius: 30px;
    }

    #about div h2 {
        margin-bottom: 10px;
    }

    .error {
        box-shadow: 0px 0px 2px 1px #e74c3c;
    }

/* } */