:root{
    --padding: 14px;
    --margin: 10px;
    --sidebar-width: 350px;
    --page-width: 1000px;
    --header-height: 150px;
    --font-size: 16px;
    --lineheight: 1.2;
    --border: 4px solid;
    --border-active:  rgb(255,255,255) rgb(0,0,0) rgb(0,0,0) rgb(255,255,255);
    --border-inactive: rgb(0,0,0) rgb(255,255,255) rgb(255,255,255) rgb(0,0,0);
    --color-1: #c0c0c0;
    --color-2: #b0b0b0;
    --color-3: #f0f0f0;
    --color-4: #faebd7;
    --color-5: #565679;
}

@font-face {
    font-family: "w95fa";
    src: url("../assets/fonts/w95fa.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body{
    font-size: var(--font-size);
    font-family: w95fa;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    line-height: var(--lineheight);
    background: url("../assets/imgs/1-h.gif");
    position: relative;
}

header{
    border: var(--border);
    border-color: var(--border-active);
    display: flex;
    justify-content: center;
    height: var(--header-height);
    background-image: url('../assets/imgs/header2.png');
    background-size: cover;
    background-position: center;
}

.container{
    width: var(--page-width);
}

.main-container{
    display: flex;
}

main{
    width: 100%;
    margin-top: var(--margin);
    display: flex;
    flex-direction: column;
    min-height: 880px;
}

main > .box:last-child{
    margin-bottom: 0;
}

.sidebar{
    border: var(--border);
    border-color: var(--border-active);
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    margin: var(--margin) 0 0 var(--margin);
    background-color: #c0c0c0;
    height: 880px;
}

.sidebar ul{
    list-style: none;
    padding: var(--padding);
    margin: 0;
    text-align: left;
}

.sidebar h4{
    margin: 0 4px;
    background-color: var(--color-5);
    color: var(--color-4);
}

.sidebar li{
    border: 2px solid;
    border-color: var(--border-active);
    padding: 5px;
    margin: 2px;
    cursor: pointer;
}

.sidebar li:active, .project-element:active{
    border-color: var(--border-inactive);
    background-color: #b0b0b0;
    transform: translateY(1px);
    outline: 1px dashed #1d1c1c;
    outline-offset: -6px;
}

.sidebar li.active{
    border-color: var(--border-inactive);
    background-color: #b0b0b0;
    transform: translateY(1px);
    outline: 1px dashed #1d1c1c;
    outline-offset: -6px;
    cursor: default;
}

.img-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--padding);
}

.img-container>img{
    width: 150px;
    height: 150px;
    border: 3px solid;
    border-color: var(--border-active);
    padding: 5px;
}

.img-container>p, .box > p, .box>#todo-list, #projects-list > #container-projects{
    border: 3px solid;
    border-color: var(--border-inactive);
    background-color: #f8f7f7;
    text-align: left;
    padding: 5px;
}

.box{
    border: 4px solid;
    border-color: var(--border-active);
    background-color: #c0c0c0;
    margin: 0 var(--margin) var(--margin) var(--margin);
}

.box > h3{
    background-color: var(--color-5);
    color: var(--color-4);
    margin: 2px;
    padding: 0 7px;
}

.box > p, .box #todo-list, #projects-list div{
    margin: var(--margin);
}

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

.box > form{
    box-sizing: border-box;
    margin: 0 var(--margin) 0 0;
    padding: var(--margin);
    width: 100%;
}

.box > form input, .box > form > textarea {
    outline: none;
    height: 25px;
    width: 100%;
    border: 2px solid;
    border-color: var(--border-inactive);
    margin: 2px 0 4px 0;
    padding: 2px 6px;
}

.box > form > textarea {
    height: 75px;
    resize: none;
}

.box > form > button{
    width: 100%;
    border: 2px solid;
    border-color: var(--border-active);
    background-color: var(--color-1);
}

.box > form > button:active{
    border-color: var(--border-inactive);
    background-color: var(--color-2);
    transform: translateY(2px);
}

footer{
    display: flex;
    background-color: #c0c0c0;
    border: 4px solid;
    border-color: var(--border-active);
    margin: var(--margin) 0;
    height: 50px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.divider{
    border: 2px;
    border-style: outset;
    border-color: rgb(201, 172, 172);
    margin: 1px 4px;
}

.button-container{
    padding: var(--padding);
}

.button-container img{
    padding-bottom: var(--margin);
}

.button-container textarea{
    border: 2px solid;
    border-color: var(--border-inactive);
    resize: none;
    padding: 5px;
}

.marquee {
    position: relative;
    width: 96.5%;
    height: 36px;
    overflow: hidden;
    border: 3px solid;
    border-color: var(--border-inactive);
    margin: var(--margin);
    background-color: var(--color-3);
}

.track {
    width: 100%;
    position: absolute;
    will-change: transform;
    white-space: nowrap;
    animation: 10s linear 0s infinite normal none running marquee;
}

.track:hover{
    animation-play-state: paused;
}

.track img{
    transform: translateY(2px);
}

@keyframes marquee{
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.column-container{
    display: flex;
    flex-direction: row;
}
.column-container > .box{
    width: 100%;
    margin-top: 0;
}

.column-container > .box:first-child{
    margin-right: 0;
}

.paragraph-updates{
    height: 200px;
    overflow-y: auto;
}


.sidebar li>a{
    color:#1d1c1c;
    text-decoration: none;
    display: block;
}

#projects-list{
    height: 880px;
    display: flex;
    flex-direction: column;
}

#projects-list > #container-projects{
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-4);
    flex: 1;
}

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button{
    width: 15px;
    background-color: var(--color-2);
    border: 2px solid;
    border-color: var(--border-active);
}

::-webkit-scrollbar-button:active{
    background-color: var(--color-2);
    border-color: var(--border-inactive);
}

::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement {
    display: none;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5' width='6' height='6'><polygon points='5,0 10,5 0,5' fill='black'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5' width='6' height='6'><polygon points='5,5 10,0 0,0' fill='black'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

::-webkit-scrollbar{
    width: 15px;
    height: auto;
    background: conic-gradient(
    var(--color-1) 0deg 90deg,
    #fff 90deg 180deg,
    var(--color-1) 180deg 270deg,
    #fff 270deg 360deg
  );
  background-size: 2px 2px;
  border-left: 2px solid black;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-corner {
  background: var(--color-2);
  width: 15px;
  height: 15px;
  border: 2px solid;
  border-color: var(--border-inactive);
}

.project-element{
    border: 2px solid;
    background-color: var(--color-1);
    border-color: var(--border-active);
    margin: 1px !important;
    padding: 2px 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
    min-height: 35px;
}

.project-element a{
    text-decoration: none;
    color: #565679;
    width: 100%;
}
.project-element a:visited{
    text-decoration: none;
    color: #796356;
}

.project-element a > *{
    box-sizing: border-box;
    padding: 5px;
    margin: 0;
}

/* painel que fica sobre o principal para fazer colagens */
.painel{
    pointer-events: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.painel>img{
    position: absolute;
}