/* 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." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>journal theme</title>
    
    <!-- header font Raleway -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap" rel="stylesheet">
    
    <!-- body font Karla -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400&display=swap" rel="stylesheet">

    <!--
      in style...
      body: main content on page
      sidebg: flourish next to left sidebar
      side: content on left sidebar
      avatar: qualities of gif at top of left sidebar
      desc: padding of paragraph in sidebar
      sideheaders: sidebar menu header
      side ul: padding of list in sidebar
      side li: style of items in sidebar list
      container: defines page space for main content
      headerwrapper: placement of title
      title: style of title text
      headerimg: style of image at top of main content
      boxgap: spacing between content boxes
      box: style of content boxes
      left: style of left end of content boxes
      icon: style of icon within left ends of content boxes
      right: padding within (right side of) main content boxes
      a: style of links in sidebar
      webkit-scrollbar: not sure
      credit: copyright style
      media: not sure
    -->
    
    <!--
      Blue: 3385e5
      Light sand: f9e6b9
      Dark sand: e1b577
      Dark slate: 676d7b
      Light slate: 909ab5
    -->
    
    <style>
    
      *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      
      body{
        background-image: url(styles/waves.png);
        background-color: #ffffff;
        margin: 7%;
        font-family: 'Karla', sans-serif;
        font-size: 16px;
        color: #000000;
      }
      
      .sidebg{
        background-image: url(styles/f-migi.gif);
        background-repeat: repeat-y;
        background-position: top right;
        width: 190px;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
      }
      
      .side{
        background-color: #ffffff;
        width: 176px;
        height: 100%;
        padding: 1rem 0.5rem 1rem 1rem;
        text-align: justify;
        font-size: 15px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      .avatar{
        width: 100%;
        opacity: 0.9;
      }
      
      .desc{
        padding: 0.5rem;
      }
      
      .sideheaders{
        font-family: 'Raleway', serif;
        font-weight: normal;
        font-size: 28px;
      }
      
      .side ul{
        padding-left: 2.5rem;
      }
      
      .side li{
        list-style-image: url(red_arrow.gif);
        font-size: 16px;
      }
      
      .container{
        display: flex;
        flex-direction: column;
        margin-left: 200px;
      }
      
      .headerwrapper{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      
      .title{
        font-family: 'Raleway', serif;
        font-weight: normal;
        color: #000000;
        font-size: 46px;
        align-self: end;
        margin-left: -1rem;
      }
      
      .headerimg{
        width: 285px;
        align-self: end;
        margin-right: -1rem;
        margin-bottom: -1rem;
        position: relative;
        z-index: 1;
      }
      
      .boxgap{
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      .box {
      margin:1em 0; /* 中央寄せは0をautoに変更 */
      width:100% /* 幅 */
      }
      .u01 {
      background:url(styles/f-ue.gif) repeat-x;
      height:18px;
      margin:0 18px 0 19px
      }
      .s01 {
      background:url(styles/f-sita.gif) repeat-x;
      height:19px;
      margin:0 18px 0 19px
      }
      .box-top {
      background-image:url(styles/f-kado1.gif), url(styles/f-kado2.gif);
      background-position:top left, top right;
      background-repeat:no-repeat, no-repeat;
      height:18px
      }
      .box-center {
      background-image:url(styles/f-migi.gif), url(styles/f-hidari.gif);
      background-position:top right, top left;
      background-repeat:repeat-y, repeat-y
      }
      .box-inner {
      background:#fff;
      margin:0 18px 0 19px;
      display: flex;
      flex-direction: row;
      }
      .box-bottom {
      background-image:url(styles/f-kado3.gif), url(styles/f-kado4.gif);
      background-position:top left, top right;
      background-repeat:no-repeat, no-repeat;
      height:19px
      }
      
      .left{
        /* border-right: 3px solid #676d7b; */
        padding: 0.7rem;
        text-align: center;
      }
      
      .icon{
      }
      
      .right{
        padding: 1rem;
      }
      
      a{
        color: #3385e5;
        text-decoration: none;
      }
      
      a:visited{
        color: #3385e5;
      }
      
      a:hover{
        font-weight: bold;
      }
      
      a:active{
        font-style: italic;
        font-weight: normal;
      }
      
      ::-webkit-scrollbar{
        width: 8px; 
      }
          
      ::-webkit-scrollbar-track{
        background-color: transparent;
      }
      
      ::-webkit-scrollbar-thumb{
        background-color: #967e68;
      }
      
      #credit{
        font-size: 12px;
        position: fixed;
        bottom: 0;
        right: 0;
      }
      
      @media(max-width:760px){
        body{
          margin: 0;
          padding: 1rem;
        }
        .sidebg{
          background-image: none;
          position: relative;
          top: 0;
          margin-bottom: 1rem;
          width: 100%;
          height: auto;
        }
        .side{
          height: auto;
          width: 100%;
          text-align: center;
          padding: 1rem;
        }
        .desc{
          font-size: 16px;
        }
        .side ul{
          padding: 0;
        }
        .side li{
          display: inline;
          margin-left: 4px;
        }
        .avatar{
          width: 50%;
          margin: 0 auto;
        }
        .container{
          margin: 0;
        }
        .headerimg{
          width: 180px;
        }
        .title{
          font-size: 36px;
          margin: 0;
        }
      }
    
    </style>
  
  </head>