/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html{
  cursor: url("images/Arrow.png"), default;
}

body {
  
  color: white;
  font-family: OpenSans;
  font-size: 115%;
  text-shadow: 0 0 2px white;
}

@font-face {
    font-family: 'OpenSans'; /*a name to be used later*/
    src: url('/fonts/OpenSans.ttf'); /*URL to font*/
}

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

a:hover, a:active {
  color:white;
  text-decoration: underline;
}

big {
  font-size: 150%; 
}

.bigcontainer {
  margin: 0 auto;
  margin-top: 5%;
  width:70%;
  height:500px;
}

.button {
  color: white;
  font-family: OpenSans;
  background: none;
  border: none;
  font-size: 100%;
  text-shadow: 0 0 2px white;
}

.button:hover {
  background-color: rgba(255, 255, 255, .2);
  text-decoration: underline;
}

.navbar {
  background-image: linear-gradient(to bottom, #ccc, #858585, black, black);
  padding: 0 6px 0 6px;
  margin:1px;
  font-size: 125%;
  border-radius: 6px;
  display: flex;
  justify-content: space-evenly;
  
}

.sidebar {
  margin-top: 10px;
  margin-left: 10px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  display:  flex;
  justify-content: space-between;
  align-items: center;
  width: 1fr;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 0;
}

.scrollbox {
  overflow: scroll;
  height: 600px;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.main {
  padding: 20px;
}

.nav {
  display: flex;
  flex-direction: row-reverse;
}

.navcontainer {
  display: flex;
  aspect-ratio: 1/1;
  margin: 10px;
  padding: 10px;
  align-items: center;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
  padding-top:15px;
}

.container {
  display: flex;
  padding: 10px;
  width: fit-content;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.title {
  font-size: 150%;
  display: flex;
  align-items: center;
}

.bigrounded {
  border-radius: 32px; 
}

.rounded {
  border-radius: 16px; 
}

.smallrounded {
  border-radius: 8px; 
}

.fitheight {
  height: fit-content; 
}

.twocolumnone {
  display: grid;
  grid-template-columns: 4.5fr 5.5fr;
  column-gap: 10px;
  row-gap: 10px;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.twocolumntwo {
  display: grid;
  grid-template-columns: 1fr 4fr;
  column-gap: 10px;
}

.twocolumnmain {
  display: grid;
  grid-template-columns: 2fr 5fr;
  column-gap: 10px;
}

.threecolumnone {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr;
  column-gap: 10px;
  padding: 10px;
}

.blackbar {
  border-radius: 8px 8px 0 0;
  background-image: linear-gradient(to bottom, #ccc, #858585, black, black);
  padding: 0 6px 0 6px;
  margin: 1px;
}

.topbar {
  border-radius: 8px 8px 0 0;
  background-image: linear-gradient(to bottom, #ccc, #858585, black, black);
  padding: 0 6px 0 6px;
  margin: 1px;
}

.scroll {
  overflow: scroll; 
}

.bigbox {
  margin-top: 10px;
  margin-bottom: 10px;
}

hr {
  border-top: 1px dashed white;
  border-bottom: 0px;
  text-shadow: 0 0 5px white;
}



.greenbody {
  background-image: linear-gradient(to bottom, #CDE1BC, #97CA8F); 
  box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.6) inset;
}

.bluebody {
  background-image: linear-gradient(to bottom, #DAF1F7, #85CEEE); 
  box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.6) inset;
}

.orangebody {
  background-image: linear-gradient(to bottom, #FFD388, #E09F39); 
  box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.6) inset;
}

.frosted {
  /* Translucent background (alpha channel controls transparency) */
  background: rgba(240, 240, 240, 0.2); 
  
  /* The magic ingredient: blurs whatever is behind the element */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Required for Safari support */
  
  /* Optional styling to make it look like premium glass */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.6) inset;
  
}


/*scrollbar*/
/* width */
::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0);
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity:1; }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity:0; }
}

.start-fade-in {
    animation-name: fade-in;
    animation-duration: 1.5s;
}

.invisible {
  opacity:0; 
}

.start-fade-out {
    animation-name: fade-out;
    animation-duration: 1.5s;
}