:root {

  --mainbox-bg: #656d4a;
  --mainbox-text: #a68a64;
  --border-color: #a68a64;
  --border-shadow: #656d4a;
  
  --sidebar-text: #a68a64;
  --sidebar-bg: #656d4a;
  --sidebar-containers:#656d4a;
  --sidebar-button-bg: #414833;
  --sidebar-button-bg-hover: #a4ac86;
  --sidebar-button-text: #b6ad90;
  --sidebar-button-text-hover: #b6ad90;
  --sidebar-border-color: #a68a64;
  
  --pinned-text: #a68a64;
  --pinned-bg: #656d4a;
  --button-bg: #414833;
  --button-bg-hover: #a4ac86;
  --button-bg-selected: #a4ac86;
  --button-text: #b6ad90;
  --button-border-color: #b6ad90;
  
  --selected-bg: #b6ad90;
  --selected-text: #333d29;
  
   --rightBar-bg: #656d4a;
  --s-text: #333d29;
}


@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  src: url(font/OpenDyslexic-Regular.otf);
}

@font-face {
    font-family: 'OpenDyslexix';
    font-style: italic;
    src: url('font/OpenDyslexic-Italic.otf');
}

@font-face {
    font-family: 'OpenDyslexix';
    font-weight: bold;
    src: url('font/OpenDyslexic-Bold.otf');
}

/* fonts */

@keyframes shake {
                0% {
                transform: translate(1px, 1px) rotate(0deg);
                }
                10% {
                transform: translate(-1px, -2px) rotate(-1deg);
                }
                20% {
                transform: translate(-3px, 0px) rotate(1deg);
                }
                30% {
                transform: translate(3px, 2px) rotate(0deg);
                }
                40% {
                transform: translate(1px, -1px) rotate(1deg);
                }
                50% {
                transform: translate(-1px, 2px) rotate(-1deg);
                }
                60% {
                transform: translate(-3px, 1px) rotate(0deg);
                }
                70% {
                transform: translate(3px, 1px) rotate(-1deg);
                }
                 80% {
                transform: translate(-1px, -1px) rotate(1deg);
                }
                90% {
                transform: translate(1px, 2px) rotate(0deg);
                }
                100% {
                transform: translate(1px, -2px) rotate(-1deg);
                }
}

    @keyframes moving {
         from{
          transform:translateX(0%)
        }
        to{
            transform:translateX(-100%)
            }
    }

ul {
  margin: 0;
  padding: 0;
}   

li{
    list-style-type: "\2605";
    margin: 0;
    padding: 0;
} 

.a{
    color:#b6ad90;
    text-decoration: none;
    }

.time{
    color: var(--mainbox-text);
    font-size: 17px;
}

html {scroll-behavior: smooth;}
::selection {
  background: var(--selected-bg);
  color: var(--selected-text);
}

* {
  box-sizing: border-box;
  scrollbar-color: var(--post-header-text) var(--post-bg);
  scrollbar-width: thick;
}


body {
  background-image: url(pictures/textiles/notes.jpg);
  background-size:200px;
  background-attachment: fixed;
  display: grid;
}

/*Grid*/

.gridContainer{
    display: grid;
    grid-template-areas:
    "sidebar1 mainbox sidebar2";
    grid-template-columns: 1fr 2fr 1fr;
    grid-auto-rows: minmax(1px, 400px);
    gap: 10px;
    align-items: start;
    padding-bottom: 0;
    padding-top: 35px;
    max-width: auto;
}

#mainbox{
    display: grid;
    grid-area: mainbox;
    width: 2fr;
    height: 100%;
    color: var(--mainbox-text);
    justify-self: center;
}

#sidebar1{
    display: grid;
    grid-area: sidebar1;
    width: 350px;
    height: 100%;
    justify-self: left;
    margin-left:80px;
}

#sidebar2{
    display: grid;
    grid-area: sidebar2;
    width: 1fr;
    height: 100%;
    color: var(--sidebar-text);
    margin-right: 80px;
    }

/*Sidebar1*/

#lights{
    position: absolute;
    height: 450px;
    margin-top: -10px;
    margin-left: -85px;
    }

.bioTagContainer{
    display: grid;
    width: 100%;
    height: 100%;
}

    .bioTagBase{
        height: 250px;
        width: 250px;
        margin-left: 50px;
        margin-top:20px;
    }

.profileContainer{
    display: grid;
    width: 100%;
    height:100%;
    background-image: url(pictures/textiles/paper.jpg);
    background-size: 150px;
    border-style: double;
    border-width: 15px;
    border-color: #b6ad90;
}

    .profileIcon{
        height: 120px;
        width: 120px;
        display: grid;
        grid-column: 1/2;
        grid-row: 1/2;
        align-self: center;
        justify-self: center;

    }

    .profileIcon:hover{
        transition: box-shadow 0.15s ease-in-out;
        cursor: pointer;
    }

    #profileHeader{
        font-family: 'OpenDyslexic';
        font-weight: bold;
        text-align:center;
        width: 200px;
        height:100px;
        font-size:30px;
        display: grid;
        grid-column: 2/2;
        grid-row: 1/2;
        margin-top: 20px;
    }

    #tamagotchiDivider{
    margin-top:25px;
    }

    #sleeping{
    display:grid;
    width: 350px;
    height:264px;
    margin-top: 25px;
    margin-bottom: 25px;
    background-image: url("pictures/gifs/sleeping.gif");
    background-size: 100%;
    border-style: double;
    border-width: 15px;
    border-color:#414833;
    }

    #Sun{
        height: 150px;
        position:absolute;
        align-self: left;
        margin-left: 250px;
        margin-top: 190px;
        
    }

.statusContainer{
    display: grid;
    width: 100%;
    height: 100%;
    align-items: center;
    background-image: url(pictures/textiles/lightCubes.jpg);
    background-size: 100%;
    border-style: double;
    border-width: 15px;
    border-color: #414833;
}

    #status{
        display: grid;
        font-family: 'OpenDyslexic';
        
    }

    #statusBox{
        display:inline;
        margin-left: 15px;
        text-align: justify;
    }

    #statusItem{
        display:inline;
        font-family: 'OpenDyslexic';
        font-style: normal;
        font-size: 16px;
        margin-left: 10px;
    }

    #statusTitle{
        display:flex;
        font-family: 'OpenDyslexic';
        font-weight: bold;
        font-size: 18px;
        text-decoration:underline;
    }

    #badPerson{
    display:grid;
    width: 100%;
    height:250px;
    margin-top: 25px;
    background-image: url(pictures/dividers/distress.jpg);
    background-size: 100%;
    border-style: double;
    border-width: 15px;
    border-color: #414833;
   } 

/*Mainbox*/

.navContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    width: 100%;
    height:50px;
    gap: 30px;
    background-image: url(pictures/textiles/paper.jpg);
    background-size: 150px;
    margin-top: 30px;
    border-radius: 30px;
    border-color: #b6ad90;
    border-style: double;
    border-width: 5px;
}

    #nav{
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 8px;
        justify-content: space-evenly;
        position: relative;
}
    #ShaunNav{
        width: 150px;
        margin-right: -10px;
        position:absolute;
        justify-self: right;
        margin-top: -65px;
        }

        #ShaunNav:hover{
        animation:shake 1s;
        animation-iteration-count: infinite;
        }

    .readButton{ 
    background-color: var(--sidebar-button-bg);
    color: var(--sidebar-button-text);
    border-radius: 15px;
    cursor: pointer;
    font-weight: bold;
    font-family: 'OpenDyslexic';
    height: 30px;
    width: 105px;
    }

    .readButton:hover{
        background-image: url(pictures/textiles/flannel.jpg);
        }

.artButton {
    background-color: var(--sidebar-button-bg);
    color: var(--sidebar-button-text);
    border-radius: 15px;
    cursor: pointer;
    font-family: 'OpenDyslexic';
    font-weight: bold;
    transition: opacity 0.5s ease-in-out;
    height: 30px;
    width: 105px;
    }

    .artButton:hover{
        background-image: url(pictures/textiles/flannel.jpg);
        }

.picsButton {
    background-color: var(--sidebar-button-bg);
    color: var(--sidebar-button-text);
    border-radius: 15px;
    cursor: pointer;
    font-weight: bold;
    font-family: 'OpenDyslexic';
    transition: opacity 0.5s ease-in-out;
    height: 30px;
    width: 105px;
    }

    .picsButton:hover{
        background-image: url(pictures/textiles/flannel.jpg);
        }

.welcomeContainer{
    display:grid;
    width: 600px;
    height:380px;
    margin-top: 30px;
    background-image: url(pictures/textiles/paper.jpg);
    background-size: 150px;
    border-style: double;
    border-width: 10px;
    border-color: #b6ad90;
    }

        #welcomeBase{
            margin-top:10px
            }

        .welcomeText{
            color:#132a13 ;
            font-family: serif;
            margin-right: 150px;
            }

.post{
    display:grid;
    width: 100%;
    height: 350px;
    margin-top: 25px;
    align-items: center;
    justify-items: center;
    background-image: url(pictures/textiles/paper.jpg);
    background-size: 150px;
    border-style: double;
    border-width: 10px;
    border-color: #b6ad90;
}

    #toCome{
        justify-self: center;
        align-self: center;
        opacity: 0.8;
        }

.changelogContainer{
    display:inline-block;
    width:270px;
    height: 345px;
    margin-top: 25px;
    border-style: double;
    border-width: 10px;
    border-color: #414833;
    background-color: #656d4a;
    }

    #highlight{
        display: inline-block;
        width:200px;
        margin-top: 7px;
        margin-left:7px;
        }

    #highlightText{
        position: absolute;
        margin-top:-57px;
        margin-left: 50px;
        transform: rotate(-5deg);
        font-family: 'OpenDyslexic';
        color: #656d4a;
        }

    #eror{
        width:250px;
        opacity: 0.7;
        justify-self: center;
        align-self: center;
        margin-top: 50px;
        }

#postHeader{
    color: var(--mainbox-header-text);
    font-family: socko, sans;
    font-style: italic;
    display: grid;
}

/*Sidebaar2*/

.MusicContainer{
    display:inline-block;
    width: 100%;
    height: 400px;
    border-radius: 30px;
    margin-top: 25px;
    margin-bottom:0;
}

.musicrepertoir{
    display:flex;
    overflow: hidden;
    width: 100%;
    height:85px;
    background-image: url(pictures/textiles/darkCubes.jpg);
    background-size: 150px;
    align-self: center;
    justify-content: space-evenly;
    }

    #music1{
            display:flex;
            width: 75px;
            height: 75px;
            margin-right:5px;
            margin-left: 5px;
            align-self: center;
            justify-self: center;
        }

            #music1:hover{
            animation:shake 1s;
            animation-iteration-count: infinite;
            }

        #music2{
            display:flex;
            width: 75px;
            height: 75px;
            margin-right:5px;
            margin-left: 5px;
            align-self: center;
            justify-self: center;
        }
            #music2:hover{
            animation:shake 1s;
            animation-iteration-count: infinite;
            }

        #music3{
            display:flex;
            width: 75px;
            height: 75px;
            margin-right:5px;
            margin-left: 5px;
            align-self: center;
            justify-self: center;
        }
            #music3:hover{
            animation:shake 1s;
            animation-iteration-count: infinite;
            }

        #music4{
            display:flex;
            width: 75px;
            height: 75px;
            margin-right:5px;
            margin-left: 5px;
            align-self: center;
            justify-self: center;
        }
            #music4:hover{
            animation:shake 1s;
            animation-iteration-count: infinite;
            }

    #title{
        display:inline-block;
        width: 100%;
        height: 50px;
        text-align:center;
        text-justify: center;
        margin:0;
        background-image: url(pictures/textiles/darkCubes.jpg);
        background-size: 100%;
        font-family: 'OpenDyslexic';
        color: #b6ad90;
        border-style: double;
        border-width: 5px;
        border-color: #b6ad90;
    }

        #albumCover{
            height: 250px;
            justify-self: center;
            align-self:center;
            margin-left: 45px;
            margin-top: 15px;
            border-style: double;
            border-width: 10px;
            border-color: #414833;
            }

            #heart{
            height: 220px;
            position:absolute;
            align-self: right;
            margin-left: -120px;
            margin-top: -90px
            }


.kittyContainer{
    display:grid;
    overflow: hidden;
    width: 100%;
    height:175px;
    border-style: double;
    border-width: 10px;
    border-color: #414833;
}

        #kitty{
            display:flex;
            width: 150px;
            height: 170px;
            animation-name: moving;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-duration: 10s;
        }


#animalCrossing{
    margin:0;
    }

#smiski{
        height: 380px;
        position:absolute;
        margin-left: -130px;
        margin-top: -23px
        
    }

.gallery{
    display:grid;
    width: 100%;
    height: 350px;
    margin-top: 0;
    background-image: url(pictures/textiles/paper.jpg);
    background-size: 150px;
    border-style: double;
    border-width: 10px;
    border-color: #b6ad90;
}

#tamagotchi2{
    margin-top: 25px;
    border-style: double;
    border-width: 10px;
    border-color: #414833;
    }