/*Colours 
Snow White: #FFF6F8
Deep Purple: #6A165C
      Half purple: #B586AA
Mustard: #FED945
      Half mustard: #FFE89F
Electric Blue: #8EEDF0
      Half blue: #C7F2F4
*/




@import url('https://googleapis.com');

@import url('https://fonts.googleapis.com/css2?family=Geist+Pixel&family=Sixtyfour&display=swap');

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
  margin: 0;
  color: #241715;
background-image: url("/Assets/Decorations/SpaceBackgroundDark.png");
 background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
   font-family: "Geist Pixel", sans-serif;
   font-size: 19px;
   }
   

hr {
  border-color: #6A165C;
  }

h1 {
  text-align: center;
  }
  
.HGTitle
  {
font-family: "Sixtyfour", sans-serif;
  }
    
p a {
 color: blue;
 text-decoration: underline;
 font-weight: bold;
}

p a:hover {

color: #6A165C;
 text-decoration: none;

}

p b {
   color: #6A165C;
    text-shadow: 1px 1px #B586AA;
}
    
      .container
    {
      display: grid;
      border: solid 10px #AA1E64;
      grid-template-columns: auto;
      grid-template-rows: auto;
      width: 1000px;
      margin:auto;
      margin-top:50px;
box-shadow: -5px 5px #8EEDF0, -10px 10px #FED945;
background: #FFF6F8;
    
    }

    .dividebar
{
 background: #FFF6F8;
 height: 4px;
}

      .box-main
    {
    padding: 5px;
    margin: 0px;
    height: 600px;
    overflow: auto;
     box-sizing: border-box;
    }

details
{
  cursor:pointer;
}

.text {cursor: text;}
  
  .mediatitle
  {
   background:  #6A165C;
   color: #B586AA;
  }


     .navbar
{
    align-items: center; 
}

.navbar ul {
    display: flex;
    align-items: center;   /* Vertically centers everything */
    margin: 0;
    padding: 0;
    list-style: none;
    background: #6A165C;
}

.navbar li {
    display: flex;
    align-items: center;
}

.navbar ul li a {
  padding: 14px 16px;
  font-size: 19px;
  
}

.navbar ul li a:hover {
  background: #FED945;
}

.navbar img
{
 height:15px; 
}

.address {
    flex: 1;               /* Takes up all remaining space */
    padding: 0 10px;
}

.address input {
    width: 100%;
    box-sizing: border-box;
}

.right {
    margin-left: auto;
}

      
           .sidebar-layout {
    display: grid;
    grid-template-columns: 140px 1fr;
    height:600px;
}
      
   .sidebar {
    background: #6A165C;
    border-right: 1px solid #999;
    height:600px;
    color: white;
}

.sidebar-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}

.sidebar-menu li {
    float: none;       
}

.sidebar-menu a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: white;
    font-size:19px;
}

.sidebar-menu a:hover {
    background: #FED945;
    color: #6A165C;
}
         
         
         

.fit-content {
  width: 1%;
  white-space: nowrap;
}

.emailnavbar {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #3498db;
}

.emailnavbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.emailnavbar ul li {
  float: left;
}

.emailnavbar ul li a {
  display: block;
  text-align: left;
  padding: 2px 2px;
  text-decoration: none;
  font-size:12px;
  background-color: #3498db;
  color: #ffffff;
  border-top: 4px solid #5dade2;
  border-left: 4px solid #5dade2;
  border-right: 4px solid #2980b9;
  border-bottom: 4px solid #2980b9;
}

.emailnavbar ul li a img {
  
 height: 20px; 
}

.emailnavbar ul li a:hover {
  background-color: #AED6F1;
}

.emailnavbar ul li a:active {
  border-top: 4px solid #2980b9;
  border-left: 4px solid #2980b9;
  border-right: 4px solid #5dade2;
  border-bottom: 4px solid #5dade2;
}

.emailcontent {
  
  padding: 20px;
  line-height: 1.7;
}
         
         
         
         
         
      
/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #FED945 ; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background:#6A165C  ; 
   border-radius: 10px;
}

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