:root {
	/* Base font size */
	font-size: 15px;

	/* Heading height variable*/
	--heading-height: 10em;
}

* {
    margin: 0; 
    padding: 0;
    font-family: Arial;
}

body {
    background-image: url('../assets/images/repeating-linear-gradient.webp');
}

main {
    padding: calc(var(--heading-height) + 1.5vw) 4em 0;
}

header {
    position: fixed;
	width: 100%;
	height: var(--heading-height);
    border: 1px solid black;
    z-index: 100;
}

#restricted {
    display: none;
}

.hide {
    display: none;
}
.show {
    display: block;

}

#header {
    display: flex;
    height: 7rem;
    background-color: #ccc;
}

#logo {
    width: 10vw;
}

#login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 10rem;
}
#login_form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#register {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 10rem;
}
#register_form_container,
#login_form_container {
    margin-right: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20rem;
    height: 5rem;
}
#register_form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#email_input, 
#password_input, 
#repeat_password_input, 
#name_input,
#email_input_register, 
#password_input_register, 
#repeat_password_input_register, 
#name_input_register {
    width: 15rem;
    margin: 5px;
}
#submit_input,
#submit_input_register {
    width: 15rem;
}

#greeting_section {
    background-color: #ccc;
}

#greeting {
    display: flex;
    font-size: larger;
    align-items: center;
    justify-content: center;
    height: 10rem;
    position: relative;
}

#logout {
    position: absolute;
    right: 25px;
    width: 75px;
    height: 25px;
    border-radius: 15px;
    border: 1px solid black;
    transition: all .2s ease;
}
#logout:hover {
    cursor: pointer;
    scale: 1.05;
    transition: all .2s ease;
}

#upload_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin-top: 50px;
}
#upload_form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#file_upload, #file_button{
    display: flex;
    margin: 5px;
}
#file_upload {
    margin-left: 175px;
    width: auto;
}
#file_name {
    width: 250px;
}
#file_button {
    margin-top: 25px;
    transition: all .2s ease;
    display: table-cell;
    vertical-align: middle;
    width: 100px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid black;
    background-color: #f1f1f1;
}
#file_button:hover {
    transition: all .2s ease;
    scale: 1.05;
}
.delete_btn {
    width: 75px;
    border-radius: 5px;
    border: 1px solid black;
    cursor: pointer;
    margin-bottom: 10px;
    margin-top: 10px;
}

.files_entry {
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid black;
    border-radius: 15px;
    height: 8rem;
    width: 35rem;
    padding: 10px;
    background: #f1f1f1;
}

.soundplayer {
    margin: 5px;
    border: 1px solid black;
    border-radius: 15px;
}

#files_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px;
}

#filter {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 2rem;
    top: 14rem;
}
#text_filter{
    width: 15rem;
}

.tab {
    display: flex;
    position: fixed;
    left: 0;
    top: 10rem;
    width: 100vw;
    z-index: 100;
    overflow: hidden;
    border: 1px solid black;
    background-color: #f1f1f1;
    align-items: center;
    justify-content: center;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

#error {
    display: flex;
    align-items: center;
    justify-content: center;
    color: green;
    margin-top: 40px;
}

#register_error_label {
    margin: 25px;
}