/* *{
    box-sizing: border-box;
    border:1px solid red;
} */

body,html{
    height:100%;
    margin:0;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
:root{
    --primary-color: rgb(68, 56, 244);
    --secondary-color: rgb(255, 255, 255);
    --accent-color: rgb(0, 0, 0);
    --main-padding: 15px;
    --pad-sm: 10px;        
    --pad-xs: 6px;     
    --gap: 10px;  
}

h1{
    color: var(--primary-color);
    padding: var(--main-padding);
    margin:0;
    background-color:var(--accent-color);
    text-align:center;
}

.top{
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: var(--main-padding);
    text-align: center;
    height:200px;
    &:h2{
        margin:0;
        vertical-align: middle;
    }
}

nav{
    display:flex;
    justify-content: flex-end;
    background-color: var(--accent-color);
    padding: var(--main-padding);
    gap: var(--gap);
    a{
        text-decoration:none;
        color: var(--secondary-color);
        font-size: 1.2em;
        .text{
            padding: var(--pad-sm);
            &:hover{
                color: var(--primary-color);
            }
        }
    }
}

section{
    padding: var(--main-padding);
    margin: var(--main-padding);
    background-color: var(--secondary-color);
    color: var(--accent-color);
    border-radius: 5px;
}

.loginwrapper{
    width: fit-content;
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    margin:auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.685);
    form{
        display:flex;
        flex-direction: column;
        gap: var(--gap);
        input{
            padding: var(--pad-xs);
            border-radius: 5px;
            border: 1px solid var(--accent-color);
        }
        button{
            padding: var(--pad-xs);
            border-radius: 5px;
            border: none;
            background-color: var(--primary-color);
            color: var(--secondary-color);
            cursor: pointer;
            &:hover{
                background-color: var(--accent-color);
                color: var(--primary-color);
            }
        }
    }
}

.active{
    color: var(--accent-color);
    background-color: var(--secondary-color);
    border-radius: 5px;
}

.space{
    height: 200px;
}

.hidden{
    display: none;
}



#profileSection{
    width: fit-content;
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    margin:auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.685);
    border: 1px solid var(--primary-color);
    form{
        display:flex;
        flex-direction: column;
        gap: var(--gap);
        input{
            padding: var(--pad-xs);
            border-radius: 5px;
            border: 1px solid var(--accent-color);
        }
        button{
            padding: var(--pad-xs);
            border-radius: 5px;
            border: none;
            background-color: var(--primary-color);
            color: var(--secondary-color);
            cursor: pointer;
            &:hover{
                background-color: var(--accent-color);
                color: var(--primary-color);
            }
        }
    }
    &.hidden{
        display: none;
    }
}