/* link styling! do whatever!! */
  a:link {
    text-decoration: none;
    color:white;
  }
    
    a:visited {
    text-decoration: none;
    color:white;
    }
    
    a:hover {
    text-decoration: none;
    font-style:italic;
    color:rgb(188, 91, 110);
    font-weight:bold;
    }
    
    a:active {
    text-decoration: none;
    color:black;
    }
    /* end of link styling */
    
    /* these are what you need. background color/image, font color and what font you want to use */
    body {
    font-family:helvetica;
    font-size:14px;
    color:#fff;
    background-color:black;
    background-image:url("");
    padding:10px;
    }
    
    /* this is the container. the mother grid. */
    .container {  
      display: grid;
      grid-template-columns: 0.9fr 0.6fr 1.4fr 0.8fr;
      grid-template-rows: 0.5fr 2.3fr 1fr 0.1fr;
      gap: 10px 10px;
      grid-auto-flow: row;
      grid-template-areas:
        "header header header header"
        "sidebar1 content content sidebar2"
        "sidebar1 content content sidebar2"
        "footer footer footer footer";
      margin:auto;
      border:1px dotted #fff;
      /* border-radius:20px; */
      width:925px;
      height:900px;
      padding:15px;
      background-color:black;
      position:relative;
    }
    
    /* the header */
    .header { 
    grid-area: header; 
    border:1px dotted #fff;
    /* background-image:url("imgs/r2m_banner.png");
    background-size: 799px 262px; */
    /* border-radius:10px 10px 0px 0px; */
    background-color:black;
    }
    
    /* the left sidebar! */
    .sidebar1 { 
    grid-area: sidebar1; 
    border:0px dotted #fff;
    /* border-radius:; */
    background-color:none;
    padding:0px;
    }
    
    /* the right sidebar! */
    .sidebar2 { 
    grid-area: sidebar2; 
    border:0px dotted #fff;
    background-color:none;
    padding:0px;
    }
    
    /* the middle div! */
    .content { 
    grid-area: content; 
    border:0px dotted #fff;
    background-color:none;
    padding:0px;
    }
    
    /* footer shit! */
    .footer { 
    grid-area: footer; 
    border:1px dotted #fff;
    /* border-radius:0px 0px 10px 10px; */
    background-color:black;
    text-align:center;
    justify-content: center;
    padding:2px;
    }
    
    /* this is used to tell what div it is for example; onsite, personal, offsite. */
    .title {
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(181,181,181,1) 9%, rgba(87,87,87,1) 24%, rgba(0,0,0,1) 38%, rgba(0,0,0,1) 55%, rgba(67,67,67,1) 70%, rgba(72,72,72,1) 71%, rgba(139,139,139,1) 84%, rgba(255,255,255,1) 100%);
    border-radius:15px;
    color: #000;
    font-weight:bold;
    padding:7px;
    text-align:center;
    text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
    }
    
    /* list! */
    ul {
    list-style:url("https://file.garden/ZgMuVg_U3BIqPawa/g01-icon-circle.gif");
    padding-left:20px; /* this is to move the list left or right. */
    }
    
    /* list class. you can remove this as this is just for link example! */
    .underline {
    text-decoration:underline;
    }
     /* list class but on hover */
    .underline:hover {
    text-decoration:underline;
    font-style:italic;
    font-weight:bold;
    cursor: pointer;
    }

    .color {
      color: #bc5b6e;
    }
    
    /* this div is for the update log and navigation */
    .box {
    border:1px dotted #fff;
    background-color:black;
    padding:10px;
    }
    
    /* used for content! */
    .info {
    border:1px dotted #fff;
    background-color:black;
    padding:10px;
    }

    /* animation button */
    #animationToggle {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
        padding: 10px;
        cursor: pointer;
        border:1px dotted #fff;
        background-color: black;
        color: white;
    }

    /* start of floating images! */
    #pic {
    position:absolute;
    right:-325px;
    top:-20px;
    z-index:1;
    }
    
    #heart {
    position:absolute;
    left:-300px;
    bottom:100px;
    z-index:-1;
    transform: rotate(-30deg);
    }
    
    #star {
    position:absolute;
    left:-150px;
    top:140px;
    z-index:1;
    }
    
    #ribbon {
    position:absolute;
    right:-300px;
    bottom:60px;
    z-index:-1;
    }
    /* end of floating images */