/*backgrounds: https://photos.google.com/share/AF1QipMa6o7At0h0TEKsEa30XzgDQNaowt6wXjJEEUMCBcxvUyqyv2rTTdycvbpe7f-cXg*/

@font-face {
    /*https://nowintime.itch.io/apple-system-1-font*/
    /*Susan Kare*/
    font-family: 'Chicago';
    src: url('fonts/sysfont.otf');
}

html {
    cursor: url("cursors/arrow.cur"), auto;
}

body {
    background-color: black;
    width: 100vw;
    height: 100vh;
    margin: 0;
    position: relative;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
}

#screen {
    position:relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: white;
    overflow: hidden;

    /*https://pixelcorners.lukeb.co.uk/?radius=8&multiplier=2*/
    clip-path: polygon(
    0px calc(100% - 10px),
    2px calc(100% - 10px),
    2px calc(100% - 6px),
    4px calc(100% - 6px),
    4px calc(100% - 4px),
    6px calc(100% - 4px),
    6px calc(100% - 2px),
    10px calc(100% - 2px),
    10px 100%,
    calc(100% - 10px) 100%,
    calc(100% - 10px) calc(100% - 2px),
    calc(100% - 6px) calc(100% - 2px),
    calc(100% - 6px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 6px),
    calc(100% - 2px) calc(100% - 6px),
    calc(100% - 2px) calc(100% - 10px),
    100% calc(100% - 10px),
    100% 10px,
    calc(100% - 2px) 10px,
    calc(100% - 2px) 6px,
    calc(100% - 4px) 6px,
    calc(100% - 4px) 4px,
    calc(100% - 6px) 4px,
    calc(100% - 6px) 2px,
    calc(100% - 10px) 2px,
    calc(100% - 10px) 0px,
    10px 0px,
    10px 2px,
    6px 2px,
    6px 4px,
    4px 4px,
    4px 6px,
    2px 6px,
    2px 10px,
    0px 10px
  );
}

#viewport { /*simulate desktop*/
    position: relative;
    display: flex;
    flex-direction: column;
    background-image: url("backgrounds/10042.png");
    background-repeat: repeat;
    height: 100%;
    overflow:hidden;
}

/*system 7 menubar*/
#menubar {
    display: flex;
    align-items: center;
    height: 40px;
    background-color: white;
    border-bottom: 2px solid black;
    font-family: "Chicago", sans-serif;
    font-size: 1.5rem;
    flex-wrap: wrap;
    height: auto;
    padding: 5px 0;
}

.menubar-items {
    margin-left: 20px;
    user-select: none;
    text-overflow: clip;
    white-space: nowrap;
}

.menubar-items:hover {
    color: white;
    background-color: black;
    cursor: url("cursors/hand.cur"), auto;
}

#menubar-logo {
    margin-left: 20px;
    height: 20px;
}

#menubar-socials {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
}

#menubar-socials img {
    height: 30px;
}

#menubar-socials a {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

#menubar-socials a:hover {
    cursor: url("cursors/hand.cur"), auto;
    outline: 2px black solid;
}

#clock {
    margin-left: auto;
    margin-right: 20px;
    user-select: none;
}

.flash {
    animation: flash 0.1s steps(2) 4;
}

@keyframes flash {
    from {
        background-color: white;
        color: black;
    }
    to   {
        background-color: black;
        color: white;
    }
}

/*window and taskbar styles*/
#window {
    position: relative;
    margin: 25px;
    background-color: white;
    border: 2px solid black;
    box-shadow: 2px 2px black;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#titlebar {
    display: flex;
    align-items: center;
    border: 2px solid #DADAF5;
    border-bottom: 2px solid #B4B5D0;
    border-right: 2px solid #B4B5D0;
    height: 25px;
    background-image: url("icons/lines1.bmp");
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-repeat: repeat-x;
    background-size: contain;
}

.titlebar-controls {
    image-rendering: pixelated;
    min-width: 16;
    min-height: 16px;
    margin-right: 15px;
    margin-left: 15px;
    border: 2px solid #F2F4F3;
    user-select: none;
}

#titlebar-title {
    margin-left: auto;
    margin-right: auto;
    background-color: #F2F4F3;
    padding-left: 10px;
    padding-right: 10px;
    font-family: "Chicago";
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    user-select: none;
}

/*content page styles*/
.content {
    font-family:Arial, Helvetica, sans-serif, auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.content img {
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
}

.tophand-content img {
    display: inline-block;
}

.bottomhand-content {
    display: flex;
}

.lefthand-content {
    width: 80%;
    margin-right: 10px;
}
.righthand-content {
    width: 20%;
}

/*horizontal image carousel*/
.gallery-container {
    display: flex;
    align-items: center;
}

.gallery-container button {
    image-rendering: pixelated;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: url("cursors/hand.cur"), auto;
}

.image-left {
    background-image: url("icons/left2.bmp");
    background-repeat: no-repeat;
    background-size:contain;
}

.image-right {
    background-image: url("icons/right2.bmp");
    background-repeat: no-repeat;
    background-size:contain;
}

.gallery-images {
    display: flex;
    align-items: center;
    max-height: 300px;
    overflow: hidden;
}

.gallery-images img {
    display: block;
    max-height: 300px;
    padding: 5px;
    padding-top: 0;
}

/*responsive stuff*/
@media only screen and (max-width: 720px) {
    #clock {
        display: none;
    }
    #window {
        margin: 0;
    }
    footer {
        display: none;
    }
    #hackclub {
        display: none;
    }
}

@media only screen and (max-width: 620px) {
    #menubar-socials {
        display: none;
    }
}

@media only screen and (max-width: 230px) {
    #titlebar-title {
        display: none;
    }
    #maximize {
        display: none;
    }
}