html {
    background-color: black;
    scroll-behavior: smooth;
}
  /* latin */
  @font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/robotocondensed/v24/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCQYb9lecyU.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inconsolata/v21/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WR32lw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.box {
    transition: 1s;
    background-color: white;
    filter:drop-shadow(5px 5px 5px gray);
    margin: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
	animation: fadein ease 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	overflow: hidden;
}

h1 {
    font-family: 'Inconsolata', monospace;
    font-size: 40px;
    margin: 5px;
    border-style: none none dotted none;
    padding-bottom: 5px;
}

.text {
    padding: 10px;
    width: 150%;
    margin: auto;
}

.title, .body, .title > h1, p, html, button {
    transition: 0.2s;
}

.body {
    margin: 10px;
    clear: both;
    display: flex;
}

.title:hover > h1 {
    padding-bottom: 7px;
    padding-top: 2px;
    cursor: pointer;
}

.noselect {
    user-select: none;
}

.title:hover,.body > p:hover {
    background-color: #ebebeb;
}

.title:active > h1,p:active {
    color: #696969;
}

.title:active,.body > p:active {
    background-color: white;
}

.box::after {
    content: "";
    clear: both;
    display: table;
}

@keyframes fadein {
	0% {
		opacity: 0.2;
	}
	100% {
		opacity: 1;
	}
}

.imageright {
    max-height: 80%;
    max-width: 80%;
    filter:drop-shadow(none);
    transition: 0.2s;
    border-width: 4px;
    border-style: solid;
    background-color: black;
    position: relative;
    left: 10%;
    transform: translateX(0%);
}

.imageright:hover {
    filter: brightness(130%);
    cursor: alias;
    transform: translateX(-41%);
    transform: scale(1.01)
}

.imageright:active {
    filter: brightness(100%);
    transform: scale(1)
}

p::selection {
    background: #c9c9c9;
}

p:hover {
    cursor: pointer;
}

p:active {
    cursor: text;
}

.rightside {
    border-style: none none none solid;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

button {
    border-radius: 3px;
    background-color: white;
    color: black;
    border-color: black;
    margin: 10px;
    position: relative;
    left: 11%;
    width: 80%;
    padding: 5px 10px 5px 10px;
    transform: translateX(0%);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
}

button:hover {
    background-color: black;
    color: white;
    border-color: white;
    cursor: pointer;
    border-radius: 8px;
    transform: scale(1.01)
}

.invert {
    border-radius: 3px;
    background-color: black;
    color: white;
    border-color: white;
    margin: 10px;
    position: relative;
    left: 11%;
    width: 80%;
    padding: 5px 10px 5px 10px;
    transform: translateX(0%);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
}

.invert:hover {
    background-color: white;
    color: black;
    border-color: black;
    cursor: pointer;
    border-radius: 12px;
    transform: scale(1.01)
}

button:active, .invert:active {
    transition: 0.01s;
    background-color: gray;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000;
  }
  
  ul.topnav li {float: left;}
  
  ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Verdana,sans-serif;
    transition: 0.4s
  }
  
  ul.topnav li a:hover:not(.active) {
      background-color: #111;
    }
  
  ul.topnav li a.active {background-color: #292929;}
  
  ul.topnav li.right {float: right;}

  ul.topnav li a.active:hover {
      background-color: #404040;
    }
  
  ul.topnav li.right {float: right;}
  
  @media screen and (max-width: 600px) {
    ul.topnav li.right, 
    ul.topnav li {float: none;}
  }
  p {
    font-family: Verdana,sans-serif;
  }

  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  /* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 70%;
    border-width: 2px;
    border-radius: 7px;
    border-color: white;
    border-style: solid;
    display: flex;
    justify-content: center
  }

  .imageflex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
  }

  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 60px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
  }

  a:link, a:visited {
    color: gray;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  code {
      font-size: 16px
  }

  .center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .bordered {
    filter:drop-shadow(none);
    transition: 0.2s;
    border-radius: 20px;
    background-color: black;
    margin: 10px;
    aspect-ratio: 2 / 1;
    width: 40%
}

.bordered:hover {
    filter: brightness(110%);
    cursor: alias;
    transform: translateX(-41%);
    transform: scale(1.01)
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.bordered-mobile {
  filter:drop-shadow(none);
  transition: 0.2s;
  border-radius: 20px;
  margin: 10px;
  aspect-ratio: 2 / 1;
  width: 100%
}

.bordered-mobile:hover {
  filter: brightness(110%);
  cursor: alias;
  transform: translateX(-41%);
  transform: scale(1.01)
}

.mobile {
  border-radius: 3px;
  position: relative;
  width: 90%;
  padding: 5px 10px 5px 10px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  left: 5%;
}

.mobile:hover {
  cursor: pointer;
  border-radius: 12px;
  transform: scale(1.01)
}