body {
  background-color: #d5ccff;
  color: #333eb5;
  font-family: "Courier New";
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px;
  background-image: url('bettysgraphics%20plaid.jpg');
  background-repeat: repeat;
}

h1 { color: #333eb5; }
h3 { color: #333eb5; text-align: right;}
p { color: #333eb5; }
a { color: #333eb5; }
ul { color: #333eb5; }

.layout {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.3);
  padding-right: 20px;
}

.main { flex: 1; }

.interests {
  width: 250px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.3);
  padding-left: 20px;
}


p.dotted {
  border-style: dotted;
    padding: 20px;
}


.dotted {
  border-style: dotted;
    padding: 20px;
}


.layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 900px;
}



div {
  background-color: #fffbf0; /* Sets a solid color for all boxes */
  border: 2px dotted #a7cefa; /* Optional: adds an outline to see the boxes clearly */

}




/*-----mediaplayer-------*/

#dock-container {
    position: relative;
}

.videobox {
    width: 312px; 
    height: 332px; 
    position: fixed;
    bottom: 30px; /*adjust the position on the page*/
    right: 20px; /*adjust the position on the page*/
    z-index: 9999;
}

.videobox iframe {
    position: absolute;
    width: 298px;
    height: 202px; 
    bottom: 70px; /*adjust the position on the page*/
    right: 8px; 
    z-index: 9999;
}

.videobox img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
}

/*--------end media player----------*/