html {
	--dark-main: #1e1e1e;
	--main: #2e2e2e;
	--seconday: #FF6600;
	--dark-secondary: #cc5200;
	--light-white: #e0e0e0;
}

body {
    background-color: var(--dark-main);
}

* {
    color: white;
}

h1{
    margin-top: 0px;
    size: 1.5em;
}

h2.red {
    border-radius: 4px;
    padding-left: 8px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #333333;
    -webkit-box-shadow: 0px 0px 0px 0px #000, -8px 0px 0px 0px rgb(255, 70, 66);
    box-shadow: 0px 0px 0px 0px #000, -8px 0px 0px 0px rgb(255, 70, 66);
}

h2.orange {
    border-radius: 4px;
    padding-left: 8px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #333333;
    -webkit-box-shadow: 0px 0px 0px 0px #000, -8px 0px 0px 0px #ff6600;
    box-shadow: 0px 0px 0px 0px #000, -8px 0px 0px 0px #ff6600;
}

h2.blue {
    border-radius: 4px;
    padding-left: 8px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #333333;
    -webkit-box-shadow: 0px 0px 0px 0px #000, -8px 0px 0px 0px rgb(56, 132, 255);
            box-shadow: 0px 0px 0px 0px #000, -8px 0px 0px 0px rgb(56, 132, 255);
}

h2.green {
    border-radius: 4px;
    padding-left: 8px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #333333;
    -webkit-box-shadow: 0px 0px 0px 0px #000, -8px 0px 0px 0px rgb(38, 203, 124);
            box-shadow: 0px 0px 0px 0px #000, -8px 0px 0px 0px rgb(38, 203, 124);
}

h2.command-title {
    letter-spacing: 5px;
    text-shadow: 2px 2px 0px #ff6600;
    -webkit-box-shadow: 0px 0px 0px 0px #000, -2px 1.7px 0px 1.5px #ff6600;
            box-shadow: 0px 0px 0px 0px #000, -2px 1.7px 0px 1.5px #ff6600;
}

code {
    background-color: var(--dark-main);
    padding: 3px;
    color: #ff6600;
    font-size: 125%;
}

code.copy {
    margin-left: 2px;
    -webkit-box-shadow: -0.3px 0.5px 0px 0.5px #ffffff;
            box-shadow: -0.3px 0.5px 0px 0.5px #ffffff;
}

code.copy:hover {
    cursor: pointer;
    background-color: #3d3d3d;
    -webkit-box-shadow: -0.3px 1.5px 0px 0.5px #ffffff;
            box-shadow: -0.3px 1.5px 0px 0.5px #ffffff;
}


div.infos {
    margin-top: 8vh;
    padding: 60px;
    padding-top: 0px;
    padding-bottom: 10px;
}


div.commands {
    background-color: #383838;
    display: flex;
    margin: 1vh;
}

div.buttons {
    margin: 1vw;
    margin-left: auto;
    width: 20vw;
    vertical-align: top;
    font-size: 1.5vw;
}


div.buttons h4 {
    margin: 1vh;
    margin-top: 2vh;

    border-radius: 5px;
    padding: 10px 20px;
    padding-right: 1px;
    color: white;
    background-color: black;

    font-weight: 400;
    -webkit-box-shadow: 0px 0px 0px 2px #000, 2px 2px 0px 2px #FF6600;
            box-shadow: 0px 0px 0px 2px #000, 2px 2px 0px 2px #FF6600;
    text-decoration: none;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

div.buttons h4:hover {
    background-color: #ff6600;
  -webkit-box-shadow: 0px 0px 0px 0px #000, 0px 0px 0px 2px #ff6600;
          box-shadow: 0px 0px 0px 0px #000, 0px 0px 0px 2px #ff6600;
}

@media screen and (max-width: 860px){

    div.commands {
        display: block;
        padding-bottom: 1vh;
    }

    div.commands div.buttons {
        margin-right: auto;
        width: 100%;
        font-size: 1rem;
    }

    div.commands div.buttons >*{
        width: 15vh;
        display: inline-block;
    }

    div.display {
        width: 93% !important;
        margin-left: auto !important;
        margin-bottom: 2vh;
    }
}


div.display {
    width: 70%;
    margin-left: 1vh;
    margin-right: auto;
    margin-top: 3vh;
    padding: 0px 1.5vh;
    margin-bottom: 2vh;
    background-color: var(--main);
    transition: all 0.3s;   
}

details {
    margin: 1.3rem 0;
    border-bottom: 1px solid #aaa;
    padding: 0.5rem;
    transition: all 0.3s ease;

  }
  
  details[open] {
    background-repeat: no-repeat;
    background-image:   linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%),
                        linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%),
                        linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%),
                        linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%);
    background-size:    100% 1px,
                        1px 100%,
                        100% 1px,
                        1px 100%;
    background-position:    0 0,
                            100% 0,
                            100% 100%,
                            0 100%;
    animation: bg 2s cubic-bezier(0.19, 1, 0.22, 1) 1;
    animation-play-state: running;
    margin: 1vh 0.5vw;
    box-shadow: 1px -1px 71px 7px rgba(0,0,0,0.4);
-webkit-box-shadow: 1px -1px 71px 7px rgba(0,0,0,0.4);
-moz-box-shadow: 1px -1px 71px 7px rgba(0,0,0,0.4);
  }
  
  

@keyframes bg {
    0% {
        background-size:    0 1px,
                            1px 0,
                            0 1px,
                            1px 0;
    }
    25% {
        background-size:    100% 1px,
                            1px 0,
                            0 1px,
                            1px 0;
    }
    50% {
        background-size:    100% 1px,
                            1px 100%,
                            0 1px,
                            1px 0;
    }
    75% {
        background-size:    100% 1px,
                            1px 100%,
                            100% 1px,
                            1px 0;
    }
    100% {
        background-size:    100% 1px,
                            1px 100%,
                            100% 1px,
                            1px 100%;
    }
}

/*
  details[open] summary ~ * {
    animation: sweep .5s ease-in-out;
  }


  @keyframes sweep {
    0%    {opacity: 0; transform: translateX(-10px)}
    100%  {opacity: 1; transform: translateX(0)}
  }*/
  
  details summary {
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 0.5em;
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
  }
  
  details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.8em;
  }

h5 {
    font-size: 1em;
}