html {
    width:100%;
    height: 100%;
    margin:0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
    margin:0;
    background-color: var(--background-dark);
    color: var(--text-dark);
    box-sizing: border-box;
    font-size: 1.125em;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
body.light {
    color:var(--text-light);
    background-color:var(--background-light);
}
#aditz {
    color: var(--accent1);
}
.border {
    border: 2px solid var(--accent1);
}

:root {
    --accent1: #5272ff;
    --accent1-dark: #415acc;
    --accent1-light: #708AFF;
    --accent2: #4BBC39;
    --accent2-dark: #368929;
    --accent2-dark2: #173c11;
    --text-dark: #E2E2E2;
    --background-dark: #222;
    --background-dark-light: #333;
    --background-dark-light2: #444;
    --background-light: #E2E2E2;
    --background-light-light: #EEE;
    --background-light-light2: #F2F2F2;
    --background-light-dark: #afafaf;
    --text-light: #222;


}
* {
    box-sizing: border-box;
}

details {
    border: 1px solid var(--accent1);
  padding: 8px;
  border-radius: 8px;
  background-color: var(--background-dark-light);
}
.light details {
    
  background-color: var(--background-light-light);
}
summary {
    padding: 4px;
    cursor:pointer;
}


.nav {
    position: fixed;
    
    z-index: 2;
    top:0;
    left: 0;
    background-color: var(--background-dark-light);/*am pus o culoare de test*/
    width: 100%;
    display: flex;
    justify-content: start;
    
    align-items: center;
}
.light .nav {
    background-color: var(--background-light-light);
}
.nav a {
    flex-grow: 1;

    padding: 10px 20px;text-align: center;
    text-decoration: none;
    color: var(--background-light-light);
    border-bottom: 2px solid transparent;
    transition: 0.5s background-color, 0.5s border-bottom;
}
.light .nav a {
    color: var(--background-dark-light);
}

.nav a:not([active=""]):hover {
    background-color: var(--background-dark-light2);
    border-bottom: 2px solid var(--accent2);
}
.light .nav a:not([active=""]):hover {
    background-color: var(--background-light-dark);
}

@media only screen and (max-width: 1400px) {
    #about, #final {
        width:100%;
    }
}
#about, #final {
    width:75%;
    margin:auto;
}

a {
    color: var(--accent1);
}

#profiles {
    width: 100%;
    display: flex;
    padding-top: 32px;
}

.all-profiles {
    width: 100%;
    display:flex;
    align-items:start;
    justify-content: center;
    flex-wrap: wrap;
}

.profile {
    padding: 10px 20px;
    user-select: none;
    opacity: 0;
}


.profile-picture{
    border-radius: 50%;
    height: 180px;
    width: 180px;
}


main {
    width: 75%;
    margin:auto;
}
.text-center {
    text-align: center;
}
.margin-auto {
    margin:auto;
    display: block;
}

.right {
    margin-left: auto;
    display: block;
}

button, input {
    border: 1px solid var(--accent1-light);
    background-color: var(--background-dark-light);
    border-radius: 8px;
    color: var(--text-dark);
    padding: 10px 20px;
    font-size: 1rem;
    outline:none;

    transition: 0.3s background-color, 0.3s color;
}



.light button, .light input {
    background-color: var(--background-light-light);
    color: var(--text-light);
}
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type=number] { 
    -moz-appearance: textfield;
    appearance: textfield;
}
.accent {
    background-color: var(--accent1);
}
.light .accent {
    background-color: var(--accent1);
    color: var(--text-dark);
}
button:hover {
    cursor:pointer;
    background-color: var(--accent1-dark);
}
.light button:hover {
    color: var(--text-dark);
}

main section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
hr {
    border-radius: 2px;
    height: 2px;
    background-color: var(--accent1-dark);
    border: none;
}

.text-right {
    text-align: right;
}

#about {
    text-align: center;
}

.nav a[active=""] {
    background-color: var(--background-dark);
}
.light .nav a[active=""] {
    background-color: var(--background-light);
}

.acc1 {
    color: var(--accent1);
}
.acc2 {
    color: var(--accent2);
}
#title {
    font-size: 4rem;
    margin:0;
}

footer {
    position: fixed;
    z-index: 2;
    left:0;
    bottom:0px;
    height: 48px;
    width: 100%;
    padding: 0 8px 0 8px;
    background-color: var(--background-dark-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
footer div:nth-child(2) {
    flex-grow: 1;
}
.light footer {
    background-color: var(--background-light-light);
}

.togglebar{
    border-radius: 20px;
    border: 1px solid black;
    background-color: rgb(49, 49, 49);
    height: 20px;
    width: 40px;
    cursor: pointer;
}

.toggleball{
    border-radius: 50%;
    background-color: rgb(86, 86, 86);
    height: 20px;
    width: 20px;
    position: relative;
    left: 0px;
    /*left: 22px;*/ /*toggle in dreapta activat*/
}

.image-and-vrei-ca-banii {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

.titlu-vrei-ca-banii {
    font-weight: bold;
    font-size: 60px;
    margin: 10px;
}

.ui-transition, .ui-transition * {
    transition: 0.3s color, 0.3s background-color;
}
.no-ui-transition, .no-ui-transition * {
    transition: none !important;
}


.allEmails {
    font-size: 1rem;
}

.container-emails {
    width:100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
}

.mail-icon {
    position: relative;
    top: 7px;
    /* fill: var(--background-light-light); */
}

@media only screen and (max-width: 412px) {
    .maps-link {
        width: 330px;
    }
}