@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300&display=swap');
@import "./colors.css";
@import "./animations.css";

body{
    font-family: 'Noto Sans Mono', 'monospace';
    margin: 0; 
    padding: 0;
    background-color: var(--primary-light);
    display: flex;    
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x:hidden;
}

.box{
    margin-left: auto;
    margin-right: auto;
    border: 1px solid white;
    width: 45%;
    border-radius: 15px;
    margin-top: 5px;
    padding: 10px;
}

.box p{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}


.content {
    margin-top: 5%;
}

#leftProfile{
    margin-left: auto;
    margin-right: auto;
    background-color: var(--tertiary-blue);
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    width: 25%;
}

#leftProfile img{
    width: 60%;
    margin: auto;
    border-radius: 15px 15px;
}

.persona-attributes{
    margin-bottom: 5%;
}

#demographics{
    background-color: var(--primary-dark);
    color: var(--primary-light);
}

#valuesGoals{
    background-color: var(--tertiary-blue);
}

#challenges{
    background-color: var(--primary-dark);
    color: var(--primary-light);
}

#sources-influence{
    background-color: var(--tertiary-blue);
}

#site-message{
    text-align: center;
}