/* 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." */
/* you can put your default colours in here */

:root[data-color-mode="light"] {
  --main-bg: #FFEA63;
  --main-text: #000;
  --purple: #5920b9;
  --circle-bg: #e4a046;  /* Light orange circle */
  --link-unv: #e39125;
  --link-vis: #f3a033;
  --mo-link #4b18cd;
  --cl-link #e4a046;
}

/* dark mode */

:root[data-color-mode="dark"] {
  --main-bg: #000;
  --main-text: #FFF;
  --purple: #a37ce3;
  --circle-bg: #3c4043;  /* Dark gray circle */
  --link-unv: #fad863;
  --link-vis: #f3c933;
  --mo-link #e4a046;
  --cl-link #e4a046;
}
   
                                                      /* site elements */
   
main {
  background-color: var(--main-bg);
  color: var(--main-text);
}  

body {
  font-family: Verdana;  
  padding: 25px;
  background-color: var(--main-bg);
  color: var(--main-text);
}

header {
  text-align: center;
  padding: 10px;
  background-color: var(--main-bg);
  color: var(--main-text);
}
        /* Unvisited Link */
        a:link {
            color: var(--link-unv);
        }
        /* Visited Link */
        a:visited {
            color: var(--link-vis);
        }
        /* Mouse Over Link */
        a:hover {
            color: var(--mo-link);
            text-decoration: underline;
        }
        /* Click on Link */
        a:active {
            color: var(---cl-link);
        }
        
.rounded {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
                                                                    /*div - flex main content container*/
div.flex-container {
  display: flex;
  /* Show the flex items horizontally */
  flex-direction: row;
}

div.flex-container > div {
  margin: 10px;
}

/* Use media query and show the flex items vertically if screen width is less than 600px */
@media screen and (max-width:600px) {
  div.flex-container {
    flex-direction: column;
  }
}

                                                                /*left sidebar */
.left-sidebar {
  height: 200px;
  width: 150px;
  position: fixed;
  left: 1500;
  top: 0;
  padding-left: 200px;
  padding-top: 200px;
  background-color: var(--main-bg);
  color: var(--main-text);
  text-align: center;
}
.left-sidebar div {
  padding: 8px;
  font-size: 22px;
  display: block;
  background-color: var(--main-bg);
  color: var(--main-text);
}
.body-text {
  margin-left: 150px;
  font-size: 18px;
  color: var(--main-text);
}
                                                            /*left sidebar end */
                                                            
                                                            /* Style the content */
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  padding: 10px;
  background-color: var(--main-bg);
  color: var(--main-text);
}
.menu {
  float: left;
  width: 20%;
  text-align: center;
  background-color: var(--main-bg);
  color: var(--main-text);
}
.smol {
  font-size: 15px;
  }

                                                            /* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.box-right {
  position: relative;
  float: right;
}
.right {
  position: absolute;
  float: right;
  width: 20%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
  bottom: 50px;
  right: 50px;
}
                                                              /* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}
@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}

                                                              /* DARK MODE STUFF*/

:root[data-color-mode="light"] .hidden_in_light_mode {
  display: none;
}

:root[data-color-mode="dark"] .hidden_in_dark_mode {
  display: none;
}

.color_mode_button {
  display: flex;
  align-items: right;
  justify-content: right;
  padding: 5px;
  margin: 0 auto 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: #FFEA63;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50px;
  background-color: var(--circle-bg, #e0e0e0);  /* Light mode default */
  border-radius: 50%;  /* Makes it a circle */
  width: 40px;  /* Set fixed width */
  height: 40px;  /* Set fixed height */
  padding: 8px;  /* Space around the icon */
}

.color_mode_button svg {
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: #FFEA63;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px;
}

.color_mode_button#enable_dark_mode:hover svg,
.color_mode_button#enable_dark_mode:focus svg {
  outline: none;
  fill: blue;
}

.color_mode_button#enable_light_mode:hover svg,
.color_mode_button#enable_light_mode:focus svg {
  outline: none;
  fill: yellow;
}