/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
  font-family: 'ITCAvantGardeGothicCEBook';
  src: url('/fonts/ITCAvantGardeStd-Bk.ttf') format('truetype');
}
@font-face {
  font-family: 'Karina';
  src: url('/fonts/Karina.ttf') format('truetype');
}

@font-face {
  font-family: 'Quicksand';
  src: url('/fonts/Quicksand_Bold.otf') format('opentype');
}

body {
  background-color: #EFEFEF;
  color: #53443F;
  font-family: 'ITCAvantGardeGothicCEBook';
  cursor: url('/images/wbcurs.png'), auto;
}
p {
  margin-top: 2px;
  margin-bottom: 5px;
  font-size: 14px;
}
a {
  color: #53443F;
  text-decoration: none;
  text-decoration-line: none;
  cursor: url('/images/wbcurs.png'), auto;
}
.Main {
    align-content: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
    max-width: 723px;
}

.Welcome{
  display: block;
  align-self: start;
}

.Content{
  min-block-size: 520px;
      display: flex;
    flex-direction: row;
    min-width: 720px;
        max-width: 720px;
}



.WelcomeMessage {
  font-family: 'Quicksand';
  margin-bottom: 1px;
    font-size: 30px;
}

.WelcomeParagraph {
  margin-top: 4px;
  font-size: 16px;
}

.Title {
  font-family: 'Quicksand';
  font-size: 30px;
}

.Header {
  font-family: 'Quicksand';
  font-size: 23px;
}

.Sidebar {
  display: grid;
        align-content: space-between;

      
}
.Directory {
  padding: 10px;
  min-width: 164px;
  background-color: #A28F89;
  box-shadow: 5px 5px 0px #53443F;
  max-height: 240px;
  text-align: justify;
      height: 240px;
}

.UpdateLog {
  padding: 10px;
  min-width: 164px;
  background-color: #A28F89;
  box-shadow: 5px 5px 0px #53443F;
      min-height: 131px;
          overflow-y: auto;
          overflow-x: hidden;
    height: 228px;
    scrollbar-color: #d2bdc3 #d2bdc3;
    text-align: justify;
}

    .ImgFloat {
  position: absolute;
      
    transform: translate(-33px, 452px) rotate(3deg);
    width: 100px;
}
.FloatEye{
  position: absolute;
        /* Adjust these values to position the image as desired */
       
    transform: translate(650px, -40px) rotate(3deg);
    width: 100px;
}

.Info {
  margin-left: 10px;
  background-color: #dedadb;
      min-width: 500px;
      box-shadow: 5px 5px 0px #53443F;
      padding: 10px;
      max-width: 500px;
      display: flex;
      align-items: start;
  flex-wrap: wrap;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-color: #dedadb #dedadb;
  text-align: justify;
      max-height: 500px;
      scrollbar-width: thin;
}
.InfoText{
  display: flex;
    align-items: baseline;
    gap: 17px;
}
.Boxes {
  width: 240px;
      max-width: 240px;
}
.Halves {
      text-align: justify;
}
.BlogText{
    font-size: 16px;
}

.Artwork {
      width: 250px;
}

.Ending {
  text-align: end;
      margin-top: 10px;
      align-self: end;
      font-size: 16px;
}