/* Global Variables */
body{
    background-color: #33353f;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    line-height: 1.25;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    color: #c3c6b3;
}

button{
    background: #1D1F25;
    color: #2C8D7D;
    border: 2.5px solid #2C8D7D;
    border-radius: 5px;
    margin:10px;
    padding: 15px;
    display: block;
    width: 20%;
    
}

button:hover{
    background: #e2e5d3;
    color: #2C8D7D;
    border: 1px solid #2C8D7D;
    cursor: pointer;
}

.container{
    width: 100%;
    margin: auto;
    overflow: hidden;
}

a{
    color: #2c8d7d;
    font-weight:bold;
    font-size: 16px;
    font-weight: normal;
}

a:hover{
    font-weight: bolder;
}

.onfinish {
    text-align: center;
    font-size: 20px;
}

#wrong{
    display: none;
}

#logout {
    margin:5;
    padding:2px;
    text-decoration: none;
    font-size: 16px;
    display: none;
}

#empty{
    display: none;
}


#weak-pwd {
    display: none;
}

#logged_in{
    margin: 10px;
}
#not_logged_in{
    margin: 10px;
}

#exists {
    display: none;
}

#invalid {
    display: none;
}

#incorrect_password{
 display: none;   
}

#loggedDream{
    display: none;
}
.deleteMe{
    width: 50%;
}


/* Header */

header{
    background: #2C8D7D;
    color: #80869E;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    align-items: center;
}


header img{
    width: 125px;
}

header h1{
    color: white;
}


nav{
    font-size: 16px;
    font-weight: bolder;
    padding-left: 50px;
    flex-grow: 1;
    flex: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color:#FFFFFF;
    background: #1D1F25;
}

nav .current{
    color: #2c8D7D;
    font-weight: bolder;
}

nav a{
    padding-left: 5px;
    padding-right: 5px;
    color: #FFFFFF;
}


nav a:hover{
    color:#2C8D7D;
    font-weight: bold;
}




/* main */

main{
    flex: 1;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    min-height: 100px;
    text-align: left;
    padding: 10px;
    
}

main container{
    flex: row;
}


main h1{
    margin-top: 20px;
    font-size: 30px;
    text-align: center;
}

data1{
    display: flex;
    flex-wrap: wrap;
}
data2{
    display: flex;
    flex-wrap: wrap;
}


select{
    margin: 5px;
    padding: 10px;
    margin-bottom: 5px;
    background: #e2e5d3;
    border-radius:10px;
    border: 3.5px solid #2C8D7D;
    height: 50px;
}

orders button{
    margin-top: 20px; 
}

.credentials{
    font-size: 20px;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

credential{
    display: flex;
    flex-direction: row;
    align-items: center;
}

input {
    margin: 5px;
    padding: 10px;
    height: 16px;
    margin-bottom: 5px;
    background: #e2e5d3;
    border-radius:10px;
    border: 3.5px solid #2c8D7D;
    
}

field{
    display: flex;
    flex-direction: column;
}

orders{
    display: flex;
}

top_input{
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 100%
}

main p{
    font-size: 20px;
    margin: 10px 20px;
}

#recordings{
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.tile{
    color:#1D1F25;
    display: flex;
    flex-wrap: wrap;
    width: 43%;
    padding: 10px;
    border-radius:10px;
    border: 3.5px solid #2C8D7D;
    margin: 10px;
    background-color: #e2e5d3;
}

sort{
    display: flex;
}
select{
    width: 100%;
}

sort button{
    width: 100%;
}

/*Footer*/
footer{
    flex: 1 0 1;
    padding:20px;
    margin-top: 100px;
    color:#ffffff;
    background-color: #2C8D7D;
    text-align: center;
}

















/*Small Screens*/

@media(max-width: 780px){
    header{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: :20px;
    }
    orders{
        flex-direction: column;
        width: ;
    }
    orders button{
        width: 100%;
        margin: 0px;
        margin-top:10px;
    }
    button{
        width: 100%;
    }
    
    top_input{
        width: 95%;
    }
    #exp{
        height: 50px;
    }
    #tags{
        height: 50px;
    }
    
    nav{
       padding-left: 0px; 
    }
    
    main{
/*        display: flex;*/
        align-items: center;
    }
    
    credential{
        flex-direction: column;
    }
    #username{
        width:80%;
    }
    #password{
        width: 80%;
    }
    
    field{
        width: 100%;
    }
    
    data{
        flex-direction: row;
        width: 100%;
        align-items: center;
    }
    data1{
        flex-direction: column;
        width: 95%;
        align-items: center;
    }
    data2{
        flex-direction: column;
        width: 95%;
        align-items: center;
    }
    #txtEmail{
        width: 80%;
    }
    #txtPassword{
        width: 80%;
    }
    #txtPassword2{
        width: 80%;
    }
    #sorting{
        width: 30%
    }
    #logout{
        float:none;
        text-align: center;
        width: 100%;
        display: none;
    }
    
    .tile{
        width:100%;
    }
    
}