* {
	scrollbar-color: #260d1c #e4dbba;	
}

body {
    background-color: #260d1c;
    background-image: url('assets/clean-gray-paper.png');
    color: white;
    height: 100%;
    cursor: url(assets/MG.cur), default;
}

a {
    cursor: url(assets/MGStand.cur), pointer;
;}

@font-face {
    font-family: 'TypeWrite';
    src: url('fonts/OldNewspaperTypes.ttf');
}

@font-face {
    font-family: 'ScreenPlay';
    src: url('fonts/CourierScreenplay.ttf');
}

/* custom scrollbar=================================== */

 /* width */
::-webkit-scrollbar {
  width: 5px;
  padding: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #260d1c;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #4f3a54;
} 
/* Up Down Buttons */
::-webkit-scrollbar-button {
    background: cyan;
} 
/* font color classes =================================== */
.primary {
    color: #260d1c;
}

.primary-light {
    color: #e4dbba ;
}


/* font family classes ===================================== */
.typewrite {
    font-family: 'TypeWrite';
}

.screenplay {
    font-family: 'ScreenPlay';
}

/* spacing classes ======================================= */

.no-margin {
    margin: 0px;
}

/* div section classes =================================== */
.content-box {
    background-color: #e4dbba;
    background-image: url('assets/pinstripe-dark.png');
    margin: 5px;
    border: 5px double #260d1c;
}


.container {
    display: flex;
    flex-direction: column;
    height: 609px;
    margin: 0px 150px;
}

.content-container {
    display: flex;
    justify-content: center;
    font-size: 16px;
}

.header {
    font-size: 45px;
    text-align: center;
}

.header h1{
    font-style: italic;
    font-weight: 900;
    margin: 0px;
}

.nav {
    display: flex;
    justify-content: center;
}
.nav ul {
    font-family: "TypeWrite";
    list-style-type: none;
}

.nav li {
    display: inline;
    margin: 0px 10px;
    font-size: 24px;
}

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

.nav a:hover {
    color: #a4929a ;
    font-size: 25px;
}

.sidebar-left {
    height: 500px;
    width: 175px;
    padding: 7px;
}

.main {
    padding: 7px;
    width: 875px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
}

.main p {
  text-align: justify;
  width: 500px;
}

.linked-sites {
    display: grid; 
    grid-template-columns: 88px 88px 88px 88px 88px;
}

.linked-sites a, img{
    display: block; 
}

/*===== CURRENT READ SECTION =====*/
.sidebar-right {
    height: 500px;
    width: 175px;
    padding: 7px;
}

.current-read {
    height: 250px;
    padding: 10px;
    margin-bottom: 10px;
}

.current-read-book {
    height: 180px;
    width: 120px;
    transform: rotate(17deg);
    margin-left: 33px;
}

.current-read-book:hover {
    animation:tilt 1s forwards;
}

@keyframes tilt {
  0%   {
    transform: rotate(17deg);
    height: 180px;
    width: 120px;
  }
  100% {
    transform: rotate(-5deg);
    height: 200px;
    width: 140px;
  }
}

/*===== MUSIC PLAYER SECTION =====*/
.music-player {
    height: 180px;
    padding: 10px;
}

.track-name {
    margin: 2px; 
    background-color: #4f3a54; 
    color: #a4929a;
}

.player-buttons {
    display: flex;
    flex-direction: row;
    gap: 5px; 
    font-size: 32px;
}

.player-buttons div {
    margin: 0px 10px;
    cursor: url(assets/MGStand.cur), pointer;
}

.player-buttons :hover{
    color: #a4929a;
}

.record {
    height: 180px;
    width: 180px;

}

.footer {
    height: 100px;
    font-size: 14px;
}

.lauren {
    height: 152px; 
    width: 173px;
    margin-top: -57px;
    background-size: contain;
    background-image: url(assets/lb.gif);
}