body{
    font-family:"Lucida Console", "Courier New", monospace;
    background-color: rgba(0, 0, 0, 0.874);
    /*height: 100vh; vh = viewing height...this is so that on a smaller screen, there is no white space*/
    display: grid; /* Use grid for the list as well */
    grid-template-areas:
    'header header'
    'main main'
    'footer footer';
    grid-gap: 5%;
    cursor: url('https://wits-digital-arts-interactive-media.github.io/WSOA3028A_2431951/WebsitePictures/cursor.png'), auto;

}

.container{
    grid-area:main;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1{
    background-color: rgba(240, 255, 255, 0);
    height:auto;
    font-size: 100px;
    border-radius: 50px ;
    border-width: 50px;
    justify-self: center;
    font-weight: bolder;
    position: relative;
    -webkit-text-stroke: 1.5vw rgba(240, 255, 255, 0);
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0);
}

h1::before {
    content: attr(data-text);
    position: absolute;
    top:0;
    left:0;
    width: 0;
    height: 100%;
    color: #7dbe15d7; 
    -webkit-text-stroke: 0vw azure;
    border-right: 4px solid  azure;
    overflow: hidden;
    animation: animate1 6s linear infinite;
    
}

@keyframes animate1 {


    0% ,10%,100%{
        width: 0;
    }
    70%,90%{
        width: 100%;
    }
}

.Summary{
    background-color: rgba(0, 0, 0, 0);
    width: 50vw;
    text-align: center;
    font-size: 4em;
    color: #83c715e5; 
    margin-left:50px;
    margin-right:50px;
    margin-top:10%;
    margin-bottom:10%;
    font-weight: bolder;
}

.item3 {
    background-color: rgba(0, 0, 0, 0);
    width: 50vw;
    height:100vh;
    border-radius: 30px;
    position: relative;
    
}

.draggable{
    border-radius: 100px;
    transform: scale(1.1); /* Increase size by 10% */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.616);
    
}

.draggable:active {
    cursor: grabbing; /* Cursor while mouse is clicked down */
    background-color: rgb(194, 194, 144);
}



.fa-solid fa-angles-right{
    font-family: "Font Awesome 5 Free"
}





  .sidenav{
    grid-area:header;
    background-color: azure;
    backdrop-filter: blur(5px);
    display: flex;
    height:20vh;

}

    .sidenav ul{
        list-style-type: none;
        margin:auto;
        
    }

    .sidenav ul li{
        display: inline-block;
        margin-left:20px;
        margin-right:20px;
        margin-top:10px;
        font-size: 2em;
        
}

    .active{
        text-decoration: none;
        background-color: #7dbe15d7; 
        color: black;
        border-radius:100px ;
        display: block;
        padding: 8px 16px;
        transition: font-size 0.8s ease-in;

}



    .not_active{
        display: block;
        padding: 8px 16px;
        background-color: #7dbe15d7; 
        text-decoration: none;
        transition: font-size 0.8s ease-in;
        border-radius:100px ;
        color: black;
    }

    .sidenav a:hover {
        background-color: #fbf0a1c8;
        transform: scale(1.2); /* Increase size by 10% */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        color: black;
    }
 



    /* Style buttons */
.btn {
    background-color: white;
    border: none; /* Remove borders */
    color: rgb(0, 0, 0); /* White text */
    padding: 12px 16px; /* Some padding */
    font-size: x-large;
    cursor: pointer; /* Mouse pointer on hover */
  }
  
  /* Darker background on mouse-over */
  .btn:hover {
    background-color: #fbf0a1c8;
  }


/* Basic styling for the footer */
footer {
    grid-area: footer;
    background-color: azure;
    padding: 2%;
    text-align: center;
  }
  
  /* Style the list items within the footer */
  footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  /* Add some spacing between list items */
  footer li {
    margin-bottom: 0.5%;
    padding: 0.2%;
  }
  
  /* Style the links within the list */
  footer a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
  }
  
  /* Change link color on hover */
  footer a:hover {
    color: #69a010d7;
    transform: scale(1.5);
  }



/* Hide the link that should open and close the topnav on small screens */
.sidenav .icon {
    display: none;
  
  }
  
  /* Responsive styles */
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  @media screen and (max-width: 600px) {
    .sidenav ul li:not(:first-child) {display: none;}
    .sidenav a.icon {
      float: left;
      display: block;
      font-size: 2em; /* Change this to the size you want */
      color: #333;
      padding-left:3%;
      padding-top:3%;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .sidenav.responsive {position: relative; height:auto;}
    .sidenav.responsive a.icon {
      position: absolute;
      left: 0;
      top: 0;
    }
    .sidenav.responsive ul li {
        float: none;
        display: block;
        text-align: left; 
      }
  }



/*

 border-radius: 30px;
    background-color: #b3ecde8d;

.sidenav a.active {
      color: #695d5d;
  }*/
  

/*.sidenav ul{
    list-style-type: none;
    text-align: center;
  }
  
.sidenav ul li{
      display: block;
      padding:3rem;
     
  }

.item3 .whiteboard{
    background-color: aliceblue;
    margin:3%;
}


  */