/** Other styling rules can be found in individual components, the Vuetify framework or perhaps in src/styles/settings.scss 

  Note that we only use "rem" and "px" units.
  rem are similar to em, but use the root size of em.
  In other words, it uses the font size of the HTML element.
  By using rem we don't end up in situations where an adjusted font size in a component
  messes up the surrounding layout.
*/


/** Top bar styling */
nav {
    display: flex;
    place-items: center;
  
    /* To make sure the navigation does not take all horizontal space. */
    display: inline-block;
    /* Make sure the navigation items stay on one line. */
    flex-shrink:0;
  
    /* Aligning the text */
    text-align: center;
}
nav > a {
    padding: 1rem;
}
  
#header-logo {
    position: relative;
    top: 0.2rem;
    left: 0.2rem;
    width: 10rem;
    z-index: 10;
}
.logo-background > img {
    rotate: -5deg;
}
/** ABOVE THIS LINE Top bar styling. **/
  
  
  
/** Layout styling */
@media only screen and (min-width: 1280px) {
    .outer-container {
        /* Aliging the content */
        margin: auto;
    
        /* Margin auto needs a min or max width, without it
            the margin can't be determined automatically. */
        max-width: 80vw;
    }
}

.wide-container {
    width: 100%;
    line-height: 1 !important;
    padding-left: 1rem;
    padding-right: 1rem;
}
.left {
    float: left;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.right {
    float: right;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.rowWrapper {
    align-items: center;
    contain: layout;
    display: flex;
    flex: 1 0;
    position: relative;
  }
/** ABOVE THIS LINE Layout styling. **/

.decoratedLinkListing {
    display: flex;
    flex-wrap: wrap;
    place-items: center;
}
.decoratedLinkListing > a {
    padding: 1rem;
}

.glass-border {
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45);
    border-radius: 10px;
}

a {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
}

.for-v-icon-on-mobile {
    padding-left: 2rem;
    padding-right: 1rem;
    /* width: 6rem; */
}

.simulateColWrapper {
    margin-left: 12px; 
    margin-right: 12px;
}

.verticalSpaced {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.markdown ul {
    margin-left: 1rem;
}
.markdown ol {
    margin-left: 1.5rem;
}

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px rgb(var(--v-theme-offwhite)) inset !important;
    transition: background-color 5000s ease-in-out 0s;
  }
  input:autofill, input:autofill:focus, input:-internal-autofill-selected {
    -moz-autofill-background: rgb(var(--v-theme-offwhite)) !important;
    box-shadow: 0 0 0px 1000px rgb(var(--v-theme-offwhite)) inset !important;
    transition: background-color 5000s ease-in-out 0s;
  }