@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
    font-family: "Poppins", sans-serif;
}

#full-container {
    position: fixed;
    height: 100%;
    width: 100%;
}


.top-overlay {
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    padding-left: 0.7%;
    padding-right: 0.7%;
    padding-bottom: 0.3%;
}


.func-overlay {
    width: 50%;
    align-self: flex-end;
    
}

.spg-overlay {
    align-self: flex-end;
    margin-left: auto; 
    margin-right: 0;
    margin-bottom: 10px;
    visibility: hidden;
}

.btn-spg {
    align-self: flex-end;
}



#mute-btn,
#fscreen-btn {
    background: rgba(0,0,0,0.3);
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 5px;
    margin: 10px;
    margin-left: 20px;
    padding: 10px 20px 10px 20px;
    font-size: 20px;
}

#play-btn {
    background: rgba(77, 77, 77, 0.6);
    color: #ffffff;
    cursor: not-allowed;
    border: 1px solid #ffffff;
    border-radius: 5px;
    margin: 10px;
    padding: 10px 20px 10px 20px;
    font-size: 20px;
}

#send-btn {
    background: rgba(0,0,0,0.3);
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 10px 20px 10px 20px;
    font-size: 20px;
    width: 100%;
    margin-bottom: 20px;
}

#spg-btn {
    background: rgba(0,0,0,0.3);
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 10px 20px 10px 20px;
    font-size: 20px;
    width: 185px;
    margin-left: 215px;
    visibility: visible;
}

#play-btn:hover,
#mute-btn:hover,
#fscreen-btn:hover,
#spg-btn:hover,
#send-btn:hover {
    background: rgba(77, 77, 77, 0.6);
    color: #ffffff;
}



#inputname,
#inputmail,
#inputtel {
    width: 400px;
    height: 35px;
    color: #ffffff;
    background: rgba(0,0,0,0.3);
    margin-bottom: 10px;
    border: 1px solid rgb(var(--bs-white-rgb));
    padding: 10px;
    border-radius: 5px;
}

#inputmsg {
    width: 400px;
    height: 300px;
    color: #ffffff;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgb(var(--bs-white-rgb));
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    resize: none;
}

#inputname:hover,
#inputmail:hover,
#inputtel:hover,
#inputmsg:hover {
    background: rgba(77, 77, 77, 0.6);
}

#inputname::placeholder,
#inputmail::placeholder,
#inputtel::placeholder,
#inputmsg::placeholder {
    color:#ffffff;
}


#spgsendt {
    visibility: hidden;
    background: rgba(31, 224, 14, 0.678);
    color: #ffffff;
    border-radius: 5px;
    padding: 10px 20px 10px 20px;
    font-size: 20px;
    width: 100%;
    margin-bottom: 20px;
    margin-left: auto;
}

#audio-control {
    cursor:pointer;
    padding: 50px 100px;
    background:#fff;
    color: #000;
    font-size: 2em;
    border-radius: 20px;
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
  
  #audio-control-blur {
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background:rgba(255,255,255, 0.8);
  
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
  }