:root{
    --base-color: #6e6a4b;
    --base-variant: #452632;
    --text-color: #f8b91a;
    --secondary-text: #AE9750;
    --primary-color: #edb528;
    --accent-color: #E4844A;
    --wine-grape: #91204D;
}
.darkmode{
  --base-color: #0e0c13;
  --base-variant: #8f89a0;
  --text-color: #8f89a0;
  --secondary-text: #514376;
  --primary-color: #8f89a0;
  --accent-color: #5D3C80;
}

body {
    font-family: "DM Mono", monospace;
    font-weight: 400;
    font-style: normal;
    background-color:var(--base-color);
    color:var(--text-color);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*height: 50vh;*/
    overflow: auto; /*Enables scrolling for whatever reason*/
    margin: 0;

    h1 {
        margin: 15px;
    }

    blockquote {
        font-family: "Aleo", serif;
        font-optical-sizing: auto;
        /*font-weight: <weight>;*/
        font-style: italic;
        margin: 10px;
    }

    img {
        border-radius: 10px; 
        object-fit: cover;
    }

    .apps-div {
        padding-top: 20vh;
        padding-left: 16px;
    }

    .app-icon {
        cursor: pointer;
    }

    .selected-app-icon {
        border: solid;
        border-radius: 10px;
        backdrop-filter: blur(4px); 
        background-color: #6e6a4b8c; 
        color: var(--text-color);
        padding: 5px;
    }

    .window {
        background-color:var(--base-color);
        border-radius: 15px;
        padding: 15px;
        border: solid;
        width: 70vw;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .top-bar {
        background-color:var(--base-color);
        border: solid;
        border-radius: 15px;
        padding: 15px;
        /*transform: translate(0%, 0%);*/
        display : flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 15px;
        height: 30px;
        padding: 2px;
        margin: -1px;
    }

    .close-button {
        border: solid;
        padding: 15px;
        cursor: pointer;
        border-radius: 15px;
        border: solid;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 25px;
        width: 25px;
        margin-left: -12.5px;
        border-color: var(--accent-color);
        color: var(--base-variant);
        background-color: var(--accent-color);
    }

    .norm-button {
      border: solid;
        padding: 15px;
        cursor: pointer;
        border-radius: 15px;
        border: solid;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 15%;
        margin: 10%;
        border-color: var(--accent-color);
        color: var(--base-variant);
        background-color: var(--accent-color);
    }
    
    #topDiv {
        border: solid;
        border-radius: 15px;
        padding: 15px;
        display : flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        /*transform: translate(0%, 0%);*/
        top: 0vh;
        height: 7vh;
        width: 100vw; 
        backdrop-filter: blur(4px); 
        background-color: #6e6a4b8c; 
        color: var(--text-color);
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      font-family: "Shadows Into Light", cursive;
      font-weight: 800;
      background-color: var(--base-color);
      color: var(--text-color);
      border: 2px solid var(--primary-color);
      cursor: pointer;
      border-radius: 5px;
      margin-top: 10px;
  }

  button:hover {
      background-color: var(--text-color);
      color: var(--base-color);
      border: 2px solid var(--primary-color)

  }

  a{ /*for links*/
    color: var(--secondary-text);
  }
  ::selection {
  background-color: var(--accent-color);
  color: var(--base-variant); /*was white btw*/
  border-radius: 9999px; /* fully rounded */
  padding: 0.2em 0.08em;
  }
}



/*    
.dm-mono-light {
  font-family: "DM Mono", monospace;
  font-weight: 300;
  font-style: normal;
}

.dm-mono-regular {
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.dm-mono-medium {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: normal;
}

.dm-mono-light-italic {
  font-family: "DM Mono", monospace;
  font-weight: 300;
  font-style: italic;
}

.dm-mono-regular-italic {
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.dm-mono-medium-italic {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: italic;
}

*/