@charset "UTF-8";
article,aside,footer,header,main,nav,section{
    display:block;
}

html,body,h1,h2,h3,ul,li,a,p,article,aside,footer,header,main,nav,section,div{
    padding:0;
    margin:0;
    box-sizing: border-box;
    overscroll-behavior: none;
    cursor: default;
    user-select: none;
}
body{
    height:100vh;
    width: 100vw;
    background-image : url("images/BlissBackground.png");
    background-repeat: no-repeat;  
    background-position: bottom;
    font-family: 'Trebuchet MS';
    overflow-y: hidden;
    color: white;
    text-decoration: none;
}
a:not(#sociallist){
    color: inherit;
    text-decoration: inherit;
}
@media (min-aspect-ratio: 4/3){
    body{
        background-size: 100% auto;  
    }
}
@media (max-aspect-ratio: 4/3){
    body{
        background-size: auto 100%;
    }
}
ul{
    text-decoration: none;
    list-style-type: none;
}
/*Task Bar*/
footer{
    background-image: url("images/TaskBar.png");
    background-size: cover;
    background-repeat: repeat-x;
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    max-height: 30px;
    
}
h3{
        background-image: url("images/GradientBar.png");
        background-size: auto 100%;
        padding: 5px;
        color: white;
}
#clock{
    position: absolute;
    bottom: 0;
    right:0;
    background-image: url("images/BarRight.png");
    height : 100%;
    width : 10%;
    min-width: 80px;
    padding: 5px;
    text-align: right;
    font-size: small;
    align-content: center;
}
.taskPortfolio,.taskSocialMedia,.taskContactMe,.taskAboutMe{

    margin-left: 0px;
    display:inline;
    
    & p {
        position: absolute;
        display : inline;
        margin-left: -120px;
        bottom : 5px;
    }

    &:hover{
        & img:not(.taskIcon){
            content:url("images/SelectedBar.png");
        } 
    }

    @media only screen and (max-width:850px) {
        p{
            visibility: hidden;
        }
        img:not(.taskIcon){
            content: url("images/SmallBar.png");
            &:hover{
                content: url("images/SelectedSmallBar.png");
            }
        }
        .taskIcon{
            margin-left: -32px;
        }
    }
}
.taskIcon{
    image-rendering: pixelated;
    position: absolute;
    margin-left: -150px;
    margin-top: 5px;
}
.taskPortfolio{
    margin-left: 125px;
}
.home{
    position: absolute;
    bottom:5px;
    left:10px;
    text-decoration: none; 
    font-size : 100%;
    list-style-type: none;
    font-style: italic;
    font-size: large;
    & img{
        position: relative;
        left : -5px;
        top : 6px;
    }
}

/*Desktop Icons*/
.icons{
    image-rendering: pixelated;
    margin: 5px;
    display:block;
    width:70px;
    text-shadow: 2px 2px 5px black;
    text-align: center;
    background-color: rgba(114, 171, 236, 0.0);
        border-style: solid;
        border-width: 1px;
        border-color: rgba(94, 142, 197, 0.0);
    &:hover{
        background-color: rgba(114, 171, 236, 0.452);
        border-style: solid;
        border-width: 1px;
        border-color: rgba(94, 142, 197, 0.452);
    }
}
/*Desktop Buddy*/
#assistant{
    position: absolute;
    bottom: 10%;
    right: 10%;
    image-rendering: pixelated;
    p{
        max-width: 200px;
        margin: auto;
        display: block;
        padding: 10px;
        border:solid transparent;
        border-image: url("images/AssistantTextBox.png");
        border-image-slice: 6;
        border-width: 12px;
        border-radius: 18px;
        border-image-repeat: repeat;
        background-color: #ffffcc;
        color: black;
    }
}
#assistantImage{
    max-width: 300px;
    width: 150%;
    text-align: center;
    image-rendering: pixelated;
    cursor: pointer;
    filter:drop-shadow(rgba(0, 0, 0, 0.5) 0px 25px 10px);
}
#speech{
    margin-left: 25%;
    margin-top: -2px;
}


/*Window Section*/
.window{
    max-width : 60%;
    max-height : 80%;
    width:max-content;
    position: absolute;
    border:solid transparent;
    border-width: 3px;
    border-image:url("images/border.png");
    border-image-slice: 3;
    border-image-repeat:repeat;
    border-radius: 5px;
    background-color: white;
    background-image: url("images/WindowBackground.png");
    background-size: 100% 100%;
    top : 50%;
    left : 50%;
    transform:translate(-50%, -50%);
    overflow-y: auto;
    overscroll-behavior: none;
}
#windowContent{
    height: 100%;
}
h2{
    color:rgb(255, 255, 255);
    font-family :'Trebuchet MS';
    font-size : 100%;
    border:solid;
    border-width: 3px;
    border-image: url("images/WindowBarBackground.png");
    border-image-slice: 3;
    background-image: url("images/WindowBarBackground2.png");
    
}
.exit{
    image-rendering: pixelated;
    position: absolute;
    top: 1px;
    right:0;
}
header{
    position: sticky;
    top:0;
}
/*Portfolio*/
#portfolio{
    padding: 10px;
    display: grid;
    grid-template-columns: 25% auto;
    grid-template-rows: auto;
    gap:10px;
    color:black;
    height: 100%;
}
#sideList{
    text-decoration: inherit;
    list-style-type: inherit;
    border:solid 1px;
    & li{
        cursor: pointer;
        padding: 10px;
    }
    & li:nth-child(even){
        background-color: rgba(128, 128, 128, 0.25);
    }
    text-align: center;
}

/*Image seleciton*/
#images{
    display: grid;
    grid-template-columns: 17.5% auto;
    border:solid 1px;
    width: 100%;
    margin-bottom: 10px;
}

#description{
    border: solid 1px;
    p{
        padding: 10px;
    }
}

#images ul{
    width: 100%;
}
#images li img {
    cursor:pointer;
    width: 100%;
}
#images img:hover{
    background-color: rgba(128, 128, 128, 0.25);
}

#expandedImage{
    width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}

/*About Me*/
#aboutMe{
    color: black;
}
.post {
    display: grid;
    gap: 10px;
    grid-template-columns: 200px auto;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
    padding-bottom: 25px;
    height:auto;
    & p{
        border: solid 1px;
        margin-top: 10px;
        margin-right: 10px;
        height: 100%;
        padding: 5px;
        padding-bottom: 0px;
        & img{
            padding-top: 10px;
            max-width: 100%;
            margin: auto;
        }
    }
}
.post:nth-child(even){
    background-color: rgba(128, 128, 128, 0.25);
}
.user{
    height: 100%;
    & img{
        content: url(images/ZoeyIcon.png);
        width : 100px;
        border: solid 1px;
    }
    text-align: center;
    margin: 10px;
    padding-bottom: 5px;
    margin-left: 25px;
    border-style: solid;
    border-width: 1px;
    & h4{
        color: gray;
        font-size: small;
    }
}


/*contact me*/
#contactSection{
    margin: 10px;
    display: grid;
    grid-template-columns: 65% auto;
    gap : 10px;
    height: 100%;
    max-width: 800px;
    form{
        text-align: left;
        height: 100%;
        display: flex;
        flex-flow: column;
    }
    #sent{
        border-style: solid;
        border-width: 1px;
    }
    #contactMeMessage{
        padding: 10px;
        border: solid 1px;
    }
    img{
    height: 100px;
    width: auto;
    border : solid 1px;
    }
}
#contactmebox{
    display: block;
    color: black;
}
textarea{
    resize:none;
    width: calc(100% - 10px);
    padding: 5px;
    font-size:medium;
    border: solid 1px;
    margin-left: -1px;
    font-family: 'Trebuchet MS';
    flex: 1 1 auto;
}
input:not(#submit){
    width: calc(100% - 10px);
    padding: 5px;
    font-size:medium;
    font-family: 'Trebuchet MS';
    border: solid 1px;
    margin-left: -1px;
}
label{
    background-color: rgba(128, 128, 128, 0.25);
    display: block;
    padding: 5px;
    font-size:medium;
}
#submit{
    padding: 5px;
    border: none;
    width: calc(100%); 
    font-size:medium;
    font-family: 'Trebuchet MS';
}

/*Social Media*/
#sociallist{
    padding: 10px;
    height: 350px;
    width: auto;
    color: blue;
    text-align: center;
    & img{
        position: relative;
        top:12px;
        padding-right: 25px;
    }
    & :visited{
        color:blueviolet;
    }
    & li{
        padding : 10px;
    }
}
#copyright{
    position: fixed;
    color:grey;
    text-align: center;
    bottom : 10px;
    margin: auto;
    width : 100%;
}
#socialheader{
        background-image: url("images/GradientBar.png");
        padding: 5px;
        color: white;
}