/*overall style*/

body{
    background:fixed;
    background-color:#fff7da;
    padding:2% 4%;
}
main a{
    font-size: 1.5rem;
    text-decoration:none;
    color:#000;
}
main a:hover{
    color:#007fff;
}
main ul{
    list-style-position: inside;
    font-size:1.5rem;
}
main li{
    padding:8px 0px;
}
main h1{
    padding-bottom:8px;
}
main h2{
    padding-bottom:8px;
}
.separate{
    margin-top: 40px;
}



/*Window style*/
.windowTop{
    background:#007fff;
    border-style: solid;
    border-bottom: 0px;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding:10px 20px;
    font-size:1.5rem;
    display:flex;
    justify-content: space-between;
}
.windowTop p{
    padding:4px;
}

.windowCircle{
    display: flex;
    width:min-content;
}
.circle{
    height: 24px;
    width: 24px;
    background-color: #ff69b4;
    border-style: solid;
    border-radius: 50%;
    margin:4px;
}

.windowContent{
    padding: 40px;
    background:#fff;
    border-style: solid;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
 }
 .windowContent p{
    font-size:1.5rem;
    padding-top: 10px;
 }

 /*Post style*/
 .post{
    margin-bottom: 40px;
    padding:20px;
    background-color:#fff7da;
    max-height: 600px;
    overflow-y:auto;
 }

 /*Blinkies style*/
 #blinkies{
    width:200px;
 }
 #blinkies:hover{
    transition: transform 0.1s;
    transform: translate(8px);
 }

 /*Anything I need to rotate on hover*/
 #rotate:hover{
    transition:transform 0.7s;
    transform:rotate(360deg);
 }

/*header style*/
 header h1{
    font-size:3rem;
    padding-bottom:20px;
 }

/*navigation menu style*/
nav {
    height:auto;
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap:20px;
 }
nav a{
    text-decoration: none;
    background-color:#fff;
    font-size:1.5rem;
    color:#000;
    padding:1rem;
    border-style: solid;
    border-radius: 5px;
    width:230px;
    box-shadow: 5px 5px;
 }
 nav a:hover{
    color:#007fff;
    transition: transform 0.5s;
    transform: rotate(5deg);
 }

 /*footer style*/
footer {
    text-align: center; 
    padding: 20px;
    
 }
 
 footer p {
    padding:20px;
 }

 /*flex content*/
 .container{
    display:flex;
    justify-content: space-between;
    gap:20px;
}

 /*side content*/
.sidecontent{
    margin-top:20px;
    min-width:350px;
    max-width:450px;
}
.sidecontent .windowTop{
    background:#ff69b4;
}
.sidecontent .circle{
    background:#007fff;
}


/*content*/
.content{
    margin-top:20px;
    flex-grow: 1;
    min-width:400px;
}
.content .windowTop{
    background:#0033a0;
}
.content .windowTop p{
    color:#fff;
}
.content .circle{
    background:#fff;
}

/*INDEX FUN THINGS*/
/*bookshelf*/
.bookshelf{
    display:flex;
    justify-content: space-between;
    gap:20px;
    flex-wrap:wrap
}
#books{
    width:150px;
    color:#FFA0A0;
}
#books:hover{
    box-shadow: 6px 6px;
 }