:root{
    --font-color: #ffff6e;
    --wborder-color: #ffffff;
    --wbackground: #0a1a50;
    --wbarbg: #0D0E47;
    --linkhover: #ffff6e6b;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--wbarbg);
  border-color: var(--font-color);
  border-width: 1px;
}

::-webkit-scrollbar-track:hover{
    cursor: url(/assets/cursor/cursor_deafult.png), default;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--font-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--linkhover);
  cursor: url(/assets/cursor/cursor_hand.png), grab;
}

::-webkit-scrollbar-thumb:active{
    cursor: url(/assets/cursor/cursor_grab.png), grabbing;
}

html{
    background-image: url(/assets/gifs/stars.gif);
    background-repeat: repeat;
    color: var(--font-color);
    font-family: "VT323", consolas;
    font-size: 2rem;
    cursor: url(/assets/cursor/cursor_deafult.png), default;
}

main{
    width: 70%;
    margin: auto;
    margin-top: 200px;
    border-style:solid;
    border-width: 3px;
    background-color: var(--wbackground);
}

a{
    color: var(--font-color);
    cursor: url(/assets/cursor/cursor_point.png), pointer;
    font-size: 1rem;
}

a:hover{
    background-color: var(--linkhover);
}


nav{
    display: flex;
    background-color: var(--wbarbg);
    flex-direction: row-reverse;
    gap: 7px;
    padding: 5px;
    border-style:solid;
    border-width: 0px 0px 3px 0px;
    height: fit-content;
}

button:hover{
    cursor: url(/assets/cursor/cursor_point.png), pointer;
}


.window-bar-button{
    padding: 0px;
    height: 36px;
    width: 36px;
    border-width: 2px;
    border-color: var(--font-color);
    scale: 0.9;
}

.bt1{
    background-image: url(/assets/ui-elements/minimize.jpg);
}

.bt2{
    background-image: url(/assets/ui-elements/maximize.jpg);
}

.bt3{
    background-image: url(/assets/ui-elements/exit.jpg);
}

fieldset{
    border-color: var(--font-color);
    padding-bottom: 0px;
}

.header{
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

h1{
    font-size: 2rem;
    margin-left: 10px;
}

.disc-gif{
    width:100px;
	height:100px;
	background-size: cover;
	background-image: url('/assets/gifs/disc.gif');
}

.front-container{
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 10px;
    height: 600px;
}

.my-photos{
    width: 75%;
}

#f-home{
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.row-container{
    display: flex;
    justify-content: center;
}

.row{
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

.collumn{
    flex: 50%;
    padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  max-width: 560px;
  min-width: 300px;
}

.to-do{
    width: 25%;
}

#pagescontainer{
    height: 600px;
}

.pagebtn{
    padding: 0px;
    background-color: #ffffff00;
    border-width: 0px;
    font-family: "VT323", consolas;
}

.pagebtn:hover{
    transform: rotate(5deg);
    scale: 1.07;
}

ul{
    margin-top: 16px;
}

.down-page{
    display: flex;
    justify-content: center;
}