@import url(https://fonts.googleapis.com/css2?family=Ubuntu&display=swap);

body {
  background-color: #161c2c;
  color: #ffffff;
  font-family: Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 2rem;
}

main {
  position: relative;
  max-width: 1200px;
  margin: auto;
  padding: 3.5rem 1.5rem;
  padding-left: 1.5rem;
}

.top-bar{
  position: fixed;
  width: 100%;
  height: 60px;
  top: 0;
  left: -10px;
  background: #161c2c;
  z-index: 9;
}

.github{
  position: absolute;
  width: 50px;
  top: 15px;
  right: 15px;
  z-index: 99;
}

.logo {
  width: 235px;
  position: relative;
  margin-top: -60px;
  z-index: 9;
}

aside {
  position: absolute;
  top: 2rem;
  left: 1.25rem;
  z-index: 99;
}

aside .aside-container {
  position: fixed;
  margin-top: -10px;
  margin-left: -20px;
  padding-top: 20px;
  padding-left: 20px;
  background-color: #161c2c;
}

#navigationToggle {
  display: none;
  visibility: hidden;
  width: 0px;
  height: 0px;
  opacity: 0;
}
#hamburgerIcon {
  display: block;
  float: right;
  height: 20px;
  width: 30px;
  margin-top: -20px;
  margin-right: -60px;
  cursor: pointer;
}
#hamburgerIcon:before, #hamburgerIcon:after {
  content:'';
  position: absolute;
  top: 0px;
  right: 10px;
  height: 20px;
  width: 2px;
  background-color: #fff;
}
#hamburgerIcon:before {
  transform: rotate(45deg);
}
#hamburgerIcon:after {
  transform: rotate(-45deg);
}
#navigationToggle:checked + #hamburgerIcon{
  margin-right: 0;
  border-bottom: 12px double #fff;
  border-top: 4px solid #fff;
}
#navigationToggle:checked + #hamburgerIcon::before, #navigationToggle:checked + #hamburgerIcon::after {
  display: none;
}
#navigationToggle:checked + #hamburgerIcon + .navigation{  
  display: none;
}
.navigation > h2{
  margin-top: -24px;
  margin-bottom: 5px;
}
aside ol {
  height: 100vh;
  padding: 1rem 2rem 1rem 1rem;
}

aside ol>li {
  padding: 0.2rem;
  list-style-type: none;
  margin-left: -20px;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
  color: #87ceeb;
}

h1 {
  margin: 0 auto 2rem;
  line-height: 2.5rem;
  font-size: 28px;
}

h1+ul {
  padding: 0.8rem 1rem
}

h2 {
  margin: 2rem auto 1rem;
}

.btn {
  background-color: #87ceeb;
  color: #ffffff;
}

.html-container {
  position: relative;
  margin: 2rem auto;
  border-radius: 0.3rem;
  box-shadow: 0 0 0.5rem 0.1rem #87ceeb;
  overflow: hidden;
}

.code-title {
  background: #202040;
  padding: 1rem;
  font-weight: bold;
  line-height: 1rem;
}

.clipboard-button {
  display: flex;
  position: absolute;
  width: 240px;
  top: 16px;
  right: -120px;
  border: none;
  background: none;
  color: #ffffff;
  cursor: pointer;
}

.clipboard-icon {
  position: absolute;
  top: -5px;
  margin-left: 80px;
}

.arrow-icon{
  position: absolute;
  width: 25px;
  height: 25px;
  right: 10px;
  bottom: 10px;
  animation: arrow 0.75s linear infinite
}

@keyframes arrow {
  from { scale: 0.8;}
  to { scale: 1.2;}
}

.html-code {
  display: block;
  padding: 1rem;
  background: #010101;
  line-height: 1.2rem;
  overflow: auto;
}

.toast {
  display: none;
  position: absolute;
  top: 12px;
  right: 140px;
  font-size: 12px;
}

.html-output {
  container-type: inline-size;
  container-name: html-output;
  max-width: 100%;
  padding: 1.5rem 1.5rem 3rem;
  background-color: #080c0c;
  overflow: hidden;
  resize: both;
}

.output-title {
  margin: 0.5rem auto 2rem;
  font-weight: bold;
  line-height: 1rem;
}

.class-style {
  font-size: 1rem;
  font-weight: bold;
  color: #44ac99;
}

@media screen and (min-width: 450px) {
  h1 {
    font-size: 32px;
  }
}

@media screen and (min-width: 900px) {
  main {
    padding-left: 220px;
  }
  #hamburgerIcon:before, #hamburgerIcon:after {
    right: -15px;
  }
}


@container html-output (min-width: 600px) {
  .box-t-1,
  .box-tablet-1 {
    max-width: 100%;
  }
  .box-skip-t-1,
  .box-skip-tablet-1 {
    margin-left: 100%;
  }
}
@container html-output (min-width: 600px) {
  .box-t-2,
  .box-tablet-2 {
    max-width: 50%;
  }
  .box-skip-t-2,
  .box-skip-tablet-2 {
    margin-left: 50%;
  }
}
@container html-output (min-width: 600px) {
  .box-t-3,
  .box-tablet-3 {
    max-width: 33.3333333333%;
  }
  .box-skip-t-3,
  .box-skip-tablet-3 {
    margin-left: 33.3333333333%;
  }
}
@container html-output (min-width: 600px) {
  .box-t-4,
  .box-tablet-4 {
    max-width: 25%;
  }
  .box-skip-t-4,
  .box-skip-tablet-4 {
    margin-left: 25%;
  }
}
@container html-output (min-width: 600px) {
  .box-t-5,
  .box-tablet-5 {
    max-width: 20%;
  }
  .box-skip-t-5,
  .box-skip-tablet-5 {
    margin-left: 20%;
  }
}
@container html-output (min-width: 600px) {
  .box-t-6,
  .box-tablet-6 {
    max-width: 16.6666666667%;
  }
  .box-skip-t-6,
  .box-skip-tablet-6 {
    margin-left: 16.6666666667%;
  }
}
@container html-output (min-width: 600px) {
  .box-t-7,
  .box-tablet-7 {
    max-width: 14.2857142857%;
  }
  .box-skip-t-7,
  .box-skip-tablet-7 {
    margin-left: 14.2857142857%;
  }
}
@container html-output (min-width: 600px) {
  .box-t-8,
  .box-tablet-8 {
    max-width: 12.5%;
  }
  .box-skip-t-8,
  .box-skip-tablet-8 {
    margin-left: 12.5%;
  }
}
@container html-output (min-width: 600px) {
  .menu .hamburger {
    display: none;
  }
  .menu .navbar > ul {
    display: block;
    position: static;
  }
  .menu .navbar > ul > li {
    display: inline-block;
    padding: 5px;
  }
  .popup-t,
  .popup-tablet {
    max-width: 780px;
  }
  .popup-d,
  .popup-desktop {
    max-width: 100%;
  }
}
@container html-output (min-width: 900px) {
  .box-d-1,
  .box-desktop-1 {
    max-width: 100%;
  }
  .box-skip-d-1,
  .box-skip-desktop-1 {
    margin-left: 100%;
  }
}
@container html-output (min-width: 900px) {
  .box-d-2,
  .box-desktop-2 {
    max-width: 50%;
  }
  .box-skip-d-2,
  .box-skip-desktop-2 {
    margin-left: 50%;
  }
}
@container html-output (min-width: 900px) {
  .box-d-3,
  .box-desktop-3 {
    max-width: 33.3333333333%;
  }
  .box-skip-d-3,
  .box-skip-desktop-3 {
    margin-left: 33.3333333333%;
  }
}
@container html-output (min-width: 900px) {
  .box-d-4,
  .box-desktop-4 {
    max-width: 25%;
  }
  .box-skip-d-4,
  .box-skip-desktop-4 {
    margin-left: 25%;
  }
}
@container html-output (min-width: 900px) {
  .box-d-5,
  .box-desktop-5 {
    max-width: 20%;
  }
  .box-skip-d-5,
  .box-skip-desktop-5 {
    margin-left: 20%;
  }
}
@container html-output (min-width: 900px) {
  .box-d-6,
  .box-desktop-6 {
    max-width: 16.6666666667%;
  }
  .box-skip-d-6,
  .box-skip-desktop-6 {
    margin-left: 16.6666666667%;
  }
}
@container html-output (min-width: 900px) {
  .box-d-7,
  .box-desktop-7 {
    max-width: 14.2857142857%;
  }
  .box-skip-d-7,
  .box-skip-desktop-7 {
    margin-left: 14.2857142857%;
  }
}
@container html-output (min-width: 900px) {
  .box-d-8,
  .box-desktop-8 {
    max-width: 12.5%;
  }
  .box-skip-d-8,
  .box-skip-desktop-8 {
    margin-left: 12.5%;
  }
}
@container html-output (min-width: 900px) {
  .menu-t .hamburger,
  .menu-tablet .hamburger {
    display: none;
  }
  .menu-t .navbar > ul,
  .menu-tablet .navbar > ul {
    display: block;
    position: static;
  }
  .menu-t .navbar > ul > li,
  .menu-tablet .navbar > ul > li {
    display: inline-block;
    padding: 5px;
  }
  .popup-d,
  .popup-desktop {
    max-width: 1080px;
  }
}

@container html-output (max-width: 599px){

  .menu,
  .menu-t,
  .menu-tablet,
  .menu-d,
  .menu-desktop {
      position: relative;
      background-color: #ffffff;
      padding: 10px 0px;
  }

  .hamburger {
      display: block !important;
      height: 20px;
      width: 30px;
      margin: 0px 10px 0px 10px;
      border-bottom: 12px double #333333;
      border-top: 4px solid #333333;
      text-decoration: none;
      cursor: pointer;
  }

  .hamburger + input {
      display: none !important;
      visibility: hidden;
      width: 0px;
      height: 0px;
      opacity: 0;
  }

  .hamburger + input:checked + .navbar > ul {
      display: block !important;
  }
  
  .hamburger + input:not(:checked) + .navbar > ul {
    display: none !important;
  }
  
  .menu .navbar > ul > li,
  .menu-t .navbar > ul > li,
  .menu-tablet .navbar > ul > li,
  .menu-d .navbar > ul > li,
  .menu-desktop .navbar > ul > li {
      display: block;
      padding: 5px 0px;
      background-color: #ffffff;
      border-radius: 4px;
  }

  .navbar > ul {
      display: none;
      position: absolute;
      width: 100%;
      padding: 0px;
      background-color: #ffffff;
  }

  .navbar > ul a {
      display: block;
      padding: 10px;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
  }

  .navbar > ul li:hover {
      background-color: #cccccc;
      border-radius: 4px;
      cursor: pointer;
  }

  .navbar > ul > .dropdown {
      position: relative;
  }

  .navbar > ul > .dropdown::after {
      content: "";
      position: absolute;
      top: 43%;
      left: 86%;
      border-top: 8px solid #333333;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
  }

  .navbar > ul > .dropdown:hover::after {
      content: "";
      position: absolute;
      top: 35%;
      left: 86%;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
      border-bottom: 8px solid #333333;
  }

  .navbar > ul > .dropdown > ul {
      display: none;
      position: absolute;
      left: 0px;
      margin-top: 5px;
      padding: 0px;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
      background-color: #ffffff;
  }

  .navbar > ul > .dropdown:hover > ul {
      display: block;
  }

  .navbar > ul > .dropdown > ul > li {
      display: block;
  }

  .card, .card-landscape {
      width: 15.625rem;
      height: 21.875rem;
      border-radius: 4px;
      box-shadow: 2px 2px 4px 2px #cccccc;
  }
  .card-landscape {
      width: 21.875rem;
      height: 15.625rem;
  }

  .input-linear, .input-block {
      display: inline-block;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
  }

  .input-block {
      display: block;
      width: 100%;
  }

  .btn, .btn-block {
      display: inline-block;
      padding: 0.625rem 1.25rem;
      border-radius: 4px;
      border: none;
      text-decoration: none;
      cursor: pointer;
  }
  .btn-block {
      display: block;
  }

  .popup,
  .popup-t,
  .popup-tablet,
  .popup-d,
  .popup-desktop {
      display: none;
      position: fixed;
      top: 30%;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 95%;
      max-width: 480px;
      padding: 1.875rem 0.938rem;
      background-color: #ffffff;
      border: 2px solid #cccccc;
      border-radius: 4px;
  }

  .popup:target,
  .popup-t:target:target,
  .popup-tablet:target,
  .popup-d:target,
  .popup-desktop:target {
      display: block;
  }

  .popup .close,
  .popup-t .close,
  .popup-tablet .close,
  .popup-d .close,
  .popup-desktop .close {
      position: absolute;
      top: 0px;
      right: 8px;
      font-size: 30px;
      text-decoration: none;
  }

  .center-box,
  .center-btn,
  .center-img {
      display: block;
      margin: auto;
  }

  .left-float {
      float: left;
  }

  .center-float {
      float: center;
  }

  .right-float {
      float: right;
  }

  .left-text {
      text-align: left;
  }

  .center-text {
      text-align: center;
  }

  .right-text {
      text-align: right;
  }

  .box {
      width: 100%;
      max-width: 1200px;
      margin: auto;
  }

  .box-full {
      width: 100%;
      max-width: 100%;
      margin: auto;
  }

  .box-1 {
      float: left;
      width: 100%;
      max-width: 100%;
  }

  .box-skip-1 {
      margin-left: 100%;
  }

  .box-2 {
      float: left;
      width: 100%;
      max-width: 50%;
  }

  .box-skip-2 {
      margin-left: 50%;
  }

  .box-3 {
      float: left;
      width: 100%;
      max-width: 33.3333333333%;
  }

  .box-skip-3 {
      margin-left: 33.3333333333%;
  }

  .box-4 {
      float: left;
      width: 100%;
      max-width: 25%;
  }

  .box-skip-4 {
      margin-left: 25%;
  }

  .box-5 {
      float: left;
      width: 100%;
      max-width: 20%;
  }

  .box-skip-5 {
      margin-left: 20%;
  }

  .box-6 {
      float: left;
      width: 100%;
      max-width: 16.6666666667%;
  }

  .box-skip-6 {
      margin-left: 16.6666666667%;
  }

  .box-7 {
      float: left;
      width: 100%;
      max-width: 14.2857142857%;
  }

  .box-skip-7 {
      margin-left: 14.2857142857%;
  }

  .box-8 {
      float: left;
      width: 100%;
      max-width: 12.5%;
  }

  .box-skip-8 {
      margin-left: 12.5%;
  }
  .dark {
    background-color: #161c2c;
    color: #ffffff;
  }
  
  .dark .menu,
  .dark .navbar > ul,
  .dark .navbar > ul li,
  .dark .navbar > ul li a {
    background-color: #000000;
    color: #ffffff;
  }
  
  .dark .navbar > ul li:hover,
  .dark .navbar > ul li:hover > a {
    background-color: #0082aa;
    color: #ffffff;
  }
}
a.close.no-decoration:visited{
  color: #888;
}