body {
  background-image: linear-gradient(#7FD7FD, #042FF8);
  min-height: 100vh;
  font-family: arial;
}


.container {
  display: grid;
  grid-template-areas:
    "header header"
    "nav content"
    "bottom bottom";
  grid-template-columns: 1fr 4fr;
  gap: 10px;
  padding: 10px;
}

.container > div {
  padding: 10px;
}

.header {
  grid-area: header;
  text-align: right;
  font-size: 40px;
  padding: 0; 
}

.menu {
  grid-area: nav;
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: rgb(14, 31, 127, 0.6);

}

.content {
  grid-area: content;
  grid-row-start: 2;
  grid-row-end: 4;
  display: flex;
  overflow: auto;
  overflow-x: hidden;
  background-color: rgb(14, 31, 127, 0.6);
}

/* dumb fix for blog page issues LOL */
#collumnflex { 
  flex-direction: column;
  align-items: center;
}


.container > div.content > .box {
  background-color: #0D1B7D;
  margin: 5px;
  padding: 5px;
  height: auto;
}


.collumn-flex {
  flex-direction: column;
}



/* Links */

a {
  text-decoration: none;
}

a:hover{ 
  text-decoration: underline;
}


/* Navigation bar */

.navlink {
  padding: 1%;
  margin: 1%;
  display: block;
  color: cyan;
  font-weight: bold;
  font-size: 30px;
  transition: transform .5s;
}

.navlink:hover {
    transform: translate(15px, 0px);
    color: white;
}



/* Headings */

h1 {
  color: white;
  text-align: right;
  text-transform: uppercase;
  font-style: italic;
}

h3 {
  color: white;
  text-transform: uppercase;
  font-size: 35px;
  margin: 0%;
}

/* Collapsible */

.collapsible {
    width: 100%;
    background-color: #0D1B7D;

    padding: 5px; 
    padding-left: 10px;
    margin-bottom: 5px;
    border: none;
    
    
    text-align: left;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold; 
    color: white;
    overflow: auto;
    
    cursor: pointer;

}

.active, .collapsible:hover {
    border-left: 5px solid cyan; 
}

.blog {
    padding: 0 18px;
    overflow: hidden;
    background: #f0f0f0;
    display: block;

}

.blog-text {
    color: #000;
    width: 100%;

}

.length {
    color: rgb(0, 0, 0, 0);
}





p {
  color: white;
  padding: 5px;
  text-align: left;
}

.update-heading { 
  font-weight: bold;
  color: cyan;
}

li {
  color: white;
  font-style: italic;  
}

.lastupdates {
    background-color: #0D1B7D;
    overflow: auto;
    height: 70%;
    scrollbar-color: #394ed4 #0D1B7D;
    scrollbar-width: thin;
}

/* scrollbar stylization */ 

::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background-image: linear-gradient(#7FD7FD, #042FF8)
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: white;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #AAA;
}