*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    display: grid;
    grid-template-columns: minmax(auto, 1090px);
    justify-content: center;
    margin: 0 10px;
    background-color: #D4A5A5;
}

.wrapper {
    background-color: #f3efee;
   
}

h1, h2 {
    padding: 5px;
}

nav,
footer {
    display: flex;
    gap: 10px;
}

nav a,
footer a {
    line-height: 2;
    padding: 0 1em;
    background: lightgray;
}

nav :first-child,
footer :first-child {
    margin-right: auto;
}

p,
li {
    max-width: 70ch;
    line-height: 1.8;
}

.button-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  
}

button{
    padding: 5px;
    margin: 5px;
    font-size: 20px;
}

aside {
    height: 5%;
}

#markdown-output{
    width: 75%;
    padding: 5px;
}

.skewX {
    font-size: 40px;
     transform: skewX(35deg);
 }
 
 .dropShadow{
     filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));
 }
 .triangle {
    width: 200px;
    height: 200px;
    background-color: rgb(3, 20, 107);
    clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
  }

  .hue-rotate{
    filter: hue-rotate(3.142rad);
  }


@media screen and (min-width: 768px) {
 

    header,
    nav,
    footer {
        grid-column: span 6;
    }

    header{
        background-image: linear-gradient(to right, #f3548c, #ffc9ed);
    }

    main {
        grid-column: span 4;
    }

    aside {
        grid-column: span 2;
    }

    .flex-container{
        display: flex;
       
    }
}