@font-face {
    font-family: titulin;
    src: url(pixw.ttf);
}

@font-face {
    font-family: text;
    src: url(Pix32.ttf);
}

@keyframes spini{
    100%{
        transform: rotate(360deg);
    }
}

body{
    background-image: url(background.gif);
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
}

#welcome-page, #abmepage, #systemapp, #notesapp, #calculatorapp, #weatherapp{
    position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%);
    border: solid green;
    background-color: rgb(195, 245, 195);
    width: 670px;
    height: 600px;
    z-index: 100;
}

#weatherapp{
    width: 550px;
}

.search{
    padding-top: 20px;
    width: 500px;
    display: flex;
    align-items: center;
    padding-left: 90px;
}

#search-bar{
    border: 0;
    outline: 0;
    height: 60px;
    font-family: text;
    font-size: 30px;
    background-color: rgb(231, 255, 231);
}

#lupa-button{
    border: 0;
    background-color: rgb(231, 255, 231);
    height: 62px;
    cursor: pointer;
}

#lupa-image{
    cursor: pointer;
    height: 50px;
    width: 40px;
}

.temp, .city{
    font-family: text;
    color: green;
}

.temp{
    margin-top: -7px;
    font-size: 35px;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

#details{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: text;
    color: green;
    font-size: 18px;
}

#calculatorapp{
    width: 415px;
    height: 605px;
}

#systemapp{
    width: 450px;
    height: 420px;
    font-family: text;
    font-size: 25px;
    color: rgb(37, 136, 37);
}

#system-info{
    justify-content: left;
    text-align: left;
    margin-left: 15px;
}

#browser, #screen, #time-zone, #os-ver{
    display: flex;
    justify-content: left;
    gap: 10px;
}

#bws2, #scr2, #tz2, #osv2{
    color: rgb(39, 187, 39);
}

#abmepage, #systemapp, #paintapp, #notesapp, #calculatorapp, #weatherapp{
    display: none;
}

#calc-screen{
    background-color: #e1ffef;
    width: 368px;
    height: 70px;
    border: 4px solid green;
    margin-top: 10px;
    margin-left: 20px;
    align-items: center;
    display: flex;
}

#display-result{
    margin-left: 5px;
    font-family: text;
    font-size: 35px;
    color: green;
}

.calc-button{
    font-size: 30px;
    height: 80px;
    width: 80px;
    border: 3px solid green;
    font-family: text;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: green;
    cursor: pointer;
}

#vertical-buttons, #square-buttons{
    justify-content: space-between;
}

#square-buttons{
    height: 370px;
    margin-left: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

#vertical-buttons{
    height: 470px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
}

#buttons{
    display: flex;
    margin-top: 10px;
}

#sum-button, #minus-button, #mult-button, #div-button, #ac-button{
    background-color: rgb(151, 232, 151);
}

#paintapp{
    position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%);
    border: solid green;
    background-color: rgb(195, 245, 195);
    height:820px;
    width: 600px;
    z-index: 100;
}

#paint-title{
    margin-left: -20px;
}

#system-title{
    margin-left: -115px;
}

#itsa-me{
    height: 250px;
    width: 250px;
}

#welcome-pageheader, #abmepageheader, #paintappheader, #systemappheader, #notesappheader, #calculatorappheader, #weatherappheader{
    width:670px;
    height: 25px;
    background-color: green;
    text-align: center;
    font-family: text;
    display: flex;
    justify-content: end;
}

#weatherappheader{
    width: 550px;
}

#calculatorappheader{
    width: 415px;
}

#systemappheader{
    width: 450px;
}

#paintappheader{
    width: 600px;
}

#welcome-pageclose, #abmepageclose, #paintappclose, #systemappclose, #notesappclose, #calculatorappclose, #weatherappclose{
    height: 22px;
    width: 22px;
    margin-top: -1px;
    font-size: 20px;
    color: rgb(195, 245, 195);
    cursor: pointer;
}

#top-bar{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: text;
    font-size: 20px;
    background-color: rgb(72, 207, 72);
    color: rgb(231, 255, 231);
    border: solid rgb(30, 172, 30);
    height: 60px;
    padding: 0 16px;
    box-sizing: border-box;
}

#solosis-come-back{
    margin-top: 7px;
    height: 50px;
    width: 50px;
    margin-bottom: 10px;
    cursor: pointer;
}

#welcome-title, #abme-title, #paint-title, #system-title, #notes-title{
    height: 55px;
    width: 700px;
    display: flex;
    font-family: titulin;
    color: rgb(54, 184, 54);
    align-items: center;
    font-size: 50px;
    justify-content: center;
}

#welcome-title{
    margin-top: 40px;
}

#abme-title, #paint-title, #system-title, #notes-title{
    margin-top: 10px;
}

#welcome-2, #abme-title-1, #paint-title-1, #system-title-1, #notes-title-1{
    color: rgb(155, 206, 84);
}

#notes-title{
    margin-left: -10px;
}

#note-writer{
    align-items: center;
}

#title-here, #note-here{
    width: 450;
    padding-left: 20px;
    cursor: text;
    height: 44px;
    font-family: text;
    font-size: 30px;
    border: 0px;
    padding: 0;
    margin: 0;
    text-align: left;
    line-height: normal;
    background-color: rgb(195, 245, 195);
    outline: none;
    box-sizing: border-box;
}

#title-here{
    color: green;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

#note-here{
    margin-top: 20px;
    height: 394px;
    font-size: 25px;
    display: flex;
    justify-content: center;
}

.canvas{
    display: grid;
    background-color: white;
    grid-template-columns: repeat(20, 30px);
    grid-template-rows: repeat(20, 30px);
}

.pixel{
    background-color: rgb(240, 255, 236);
    cursor: pointer;
    border: 1px solid rgb(220, 255, 210);
}

#modifiers{
    margin-top: 20px;
}

#reset-canvas, #set-eraser{
    font-family: text;
    height: 35px;
    font-size: 20px;
    text-align: center;
    border: 1px solid black;
    cursor: pointer;
}

#reset-canvas{
    width: 80px;
}

#set-eraser{
    width: 70px;
}

#colorer{
    height: 30px;
    width: 235px;
    margin-top: 10px;
    align-items: center;
    padding-left: 182px;
}

#pick-color, #chosen-color{
    width: 135px;
    font-family: text;
    align-items: center;
    width: 130px;
    gap: 3px;
}

#chosen-color{
    font-size: 20px;
    border: 1px solid black;
    cursor: pointer;
    height:  35px;
}

.eraser-set{
    background-color: gray;
}

#hello-solosis{
    animation: spini;
    animation-duration: 4s;
    height: 300px;
    width: 300px;
    margin-top: 10px;
}

#introduction, #find-me{
    font-family: text;
    height: 50px;
    width: 500px;
    font-size: 20px;
    color: rgb(37, 136, 37);
    margin-left: 95px;
    margin-top: -5px;
}

#my-info{
    font-family: text;
    height: 50px;
    width: 500px;
    font-size: 20px;
    color: rgb(37, 136, 37);
    margin-left: 75px;
    margin-top: -5px;
    text-align: left;
}

#find-me{
    margin-top: 10px;
}

.find-me-buttons{
    width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-left: 195px;
    margin-top: -45px;
}

#my-github, #my-twitter, #my-slack{
    width: 30px;
    height: 30px;
}

#desktop-apps{
    display: flex;
    margin-right: auto;
    padding-left: 15px;
    margin-top: 70px;
    padding-top: 0px;
    position: relative;
    z-index: 1;
    font-family: text;
    color: rgb(54, 184, 54);
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
    font-size: 20px;
    gap: 25px;
}

.apps{
    height: 115px;
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

#note-logo{
    height: 60px;
    width: 60px;
}

#about-logo{
    height: 60px;
    width: 70px;
}

#system-logo{
    height: 60px;
    width: 80px;
}

#paint-logo{
    height: 70px;
    width: 70px;
}

.selected-app{
    background-color: rgba(50, 255, 57, 0.373);
}