:root {
    --mainFont : 'Lora', serif;
    --primary: #05bae6;
    --secondary : #db008d;
    --gray : #e5e5e5;
    --white : #ffffff;
    --black : #000000;
}

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
img {
    max-width: 100%;
}
p {
    line-height: 2;
}
body {
    font-family: var(--mainFont);
    font-size: 1.2rem;
}
.site-header {
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.site-header img {
    max-width: 80%;
}
.main-navigation {
    background-color: var(--primary);
    padding: 1rem 0;
}
.main-navigation ul {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    list-style: none;
}

/* para pantalla grande ab 768px en adelante que se pongan en linea*/
@media (min-width:768px){
    .main-navigation ul {
        flex-direction: row;
        justify-content: space-between;
    }
}

.main-navigation ul li {
    margin-bottom: 1rem;
    text-align: center;
}
@media (min-width:768px){
    .main-navigation ul li {
        margin-bottom: 0;
    }
}
.main-navigation ul li:last-of-type{
    margin-bottom: 0;
}
.main-navigation ul li a {
    color: var(--white);
    text-decoration: none;
    font-size: 1.4rem;
}

.content {
    display: flex;
    flex-wrap: wrap;
}
.sidebar, 
.main-content {
    flex: 0 0 100%;
}
@media (min-width:768px){
    .main-content{
        flex: 0 0 70%;
    }
    .sidebar{
        flex: 0 0 30%;
        /* flex-grow: 0;
        flex-shrink: 0;
        flex-basis:30%; */
        order: -1;
    }
}
.sidebar {
    background-color: var(--gray);
    padding: 2rem;
}
.sidebar ul {
    list-style: none;
}
.sidebar ul li {
    margin-bottom: .8rem;
}
.sidebar ul li:last-of-type {
    margin-bottom: 0;
}
.sidebar a {
    color: var(--black);
    text-decoration: none;
}
.sidebar a:hover {
    color: var(--secondary);
}
.main-content {
    padding: 2rem;
}

.site-footer{
    background-color: var(--secondary);
}
.site-footer p {
    margin: 0;
    padding: 1rem 0;
    text-align: center;
    color: var(--white);
}

/*-------------acciones--------*/
.controls button{
    padding: 11px 20px;
    font-size: 14px;
    border-radius: 3px;
    outline: none;
    color: #fff;
    cursor: pointer;
    background: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
  }
.controls .zeigeProgresion-1{
    margin-left: 5px;
    background: #5372F0;
    border: 1px solid #5372F0;
  }
  .controls .zeigeProgresion-2{
    background: #3a6386;
    border: 1px solid #3a6386;
  }
  .controls .zeigeProgresion-3{
    background: #284b6a;
    border: 1px solid #284b6a;
  }

  .controls .estilo-1{
    margin-left: 5px;
    background: #7be98a;
    border: 1px solid #7be98a;
  }
  .controls .estilo-2{
    background: #3a6386;
    border: 1px solid #3a6386;
  }
  .controls .estilo-3{
    background: #284b6a;
    border: 1px solid #c0d8ed;
  }


  /* ausgabefenster*/

  .wrapper .preview-img{
      flex-grow: 1;
      display: flex;
      overflow: hidden;
      margin-left: 20px;
      border-radius: 5px;
      align-items: center;
      justify-content: center;
    }
.preview-img img{
  max-width: 490px;
  max-height: 335px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.red{
    color: red;
}