/* CSS for System64.dev v2, by IDeletedSystem64. Under MIT License (v8.11.23) */
@font-face { font-family: 'Share Tech'; src: url(../fonts/Share-Tech/ShareTech-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; src: url(../fonts/Share-Tech/ShareTechMono-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Bitter'; src: url(../fonts/Bitter/Bitter-VariableFont_wght.ttf) format('woff2'); }

/* Import dem fonts */

button.home {
    font-family: 'Share Tech Mono', monospace; 
    color: white;
    /* font-size: */ 
    display: inline;
}

h1 {
    font-family: 'Bitter', serif;
    color: white;
    display: inline;
    font-size: 26pt
}

h2 {
    font-family: 'Bitter', serif;
    color: white;
    font-size: 16pt;
}

li {
    font-family: 'Share Tech Mono', monospace;
    color: white;
    font-size: 15pt;
    list-style-type: square;
}

p {
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    font-size: 18px; 

    color: white;
}

a {
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;;
    font-size: 18px; 

    color: white;
}
/* Text based stuffs */

body {
    background-image: url("https://img.system64.dev/web/bg/bg.jpg"); /* nevermind we're just gonna use a jpg */
}

.container {
    display: flex;
}

div.main {
    align-items: center;
    margin: 35vh auto auto 10vw;
}

img.home {
    height: 70vh;
    width: auto;
    align-self: center;
    padding-right: 5vw;
    padding-top: 10vh;
}

div.taskbar {
    position: absolute;
    
    left: 0px;
    top: 0px;
    width: 100%;
    
    height: 31px;
    background-color: #c3c3c3;
    box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #c3c3c3,inset -2px -2px grey,inset 2px 2px #dfdfdf;
}

/* Website layout */

img.webbutton{
    width: 88px;
    height: 31px;
    float: left;
    text-align: center;
}
/* Web buttons :) */

  /* REEEE MOBILE DEVICES */

  @media (max-width: 64em) {
    h1 {
        font-size: 56pt;
    }
    h2 {
        font-size: 28pt;
    }
    li {
        font-size: 26pt;
    }
    div.main {
        margin-top: 35vh;
    }
    .container {
        flex-wrap: wrap;
        align-items: center;
    }
    img.home {
        display: none;
    }
    div.taskbar {
        height: 4.5vh;
    }
  }