body {
  background: url(https://ebbajuliana.neocities.org/bilder/Ska%CC%88rmavbild%202025-10-15%20kl.%2021.11.40.png);
  background-size: cover;
  height: 600px;
  color: black;
  font-family: Verdana;
}

.container{
  display: grid;
  grid-gap: 10px;
  grid-template:
  "header header header"
  "main main right"
  "footer footer footer"
  /1fr 3fr 1fr;
  margin-top: 10px;
  margin-left:150px;
  margin-right:150px;
  }
  
  header { 
    grid-area: header; 
    margin-left:100px;
    }
  
  /*left { 
    grid-area: left;  
    color: #ff20b7;
    padding: 5px;
    border: 5px;
    border-style: dotted;
    border-color: #aa0976;
    }*/
   
  main { 
    grid-area: main;
    display: grid;
    grid-gap:20px;
    grid-template:
    "side intro intro"
    "side media media"
    "side posts posts"
    /1fr 2fr 2fr;
    background: url(https://ebbajuliana.neocities.org/bilder/Glass%202.jpg); 
    background-size: cover;
    color:#1e2ae4;
    padding: 10px;
    
    }


  .side{
    grid-area: side;
    height: auto;
    background-color: #51f9ff;
    color: #baf3b7;
    border: 2px;
    border-radius: 10px;
    border-style: solid;
    border-color: #187014;
    padding: 5px;
    margin-bottom: 5px;
  }
  .intro{
    grid-area: intro;
    background-color: #baf3b7;
    color:#123a10;
    border: 2px;
    border-radius: 10px;
    border-style: hidden;
    border-color: white;
    padding: 10px;
  }
    
  .media{
    grid-area: media;
    background: url(https://ebbajuliana.neocities.org/bilder/retro.jpg);
    background-size: cover;
    color: white;
    height: 500px;
    overflow-y: auto;
    border: 1px;
    border-radius: 10px;
    border-style: hidden;
    border-color: white;
    padding: 10px;
    }

  .mediatext{
    background-color:#cfffef;
    color:#123a10;
    border-style: dotted;
    border-color:#ff20b7;
    height: 290px;
    overflow-y: auto;
    padding:10px;
    margin-bottom: 30px;
    margin:50px;
    
  }

  .posts{
    grid-area: posts;
    display:flex;
    flex-wrap: wrap;
  }

    .posts div{
      width: 50%;
      margin: 5px;
      border: 5px solid;
      box-sizing: border-box;
      width: calc(50% - 10px);
      position:relative;
    }

    .posts div img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .posts div span{
      position: absolute;
      width:100%;
      left: 0;
      bottom: 0;
      box-sizing: border-box;
      background: white;
      color: black;
      text-align: left;
      padding: 5px 10px;
      opacity: 0;
      transition: transform 0.4s ease, opacity 0.5s ease;
    }
    .posts div:hover span {
      opacity: 1;
      transform: none;
      }
    
  right {
    grid-area: right;
    background-color: #24951d;
    color: #123a10;
    padding: 10px;
    }
  
   #dagbok {
    height: 300px;
    overflow-y: auto;
    background-color: #187014;
    color: #baf3b7;
    border: 2px;
    border-radius: 10px;
    border-style: solid;
    border-color: #187014;
    padding: 5px;
    margin-bottom: 5px;
    }
    
  #attgora{
    height: 300px;
    overflow-y: auto;
    background-color: #187014;
    color: #baf3b7;
    border: 2px;
    border-radius: 10px;
    border-style: solid;
    border-color: #187014;
    padding: 5px;
  }

  
  footer { 
    grid-area: footer; 
    
    }

  a{
  text-decoration: none;
  color: whitesmoke;
  }