html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Nunito", monospace;
    color: deeppink;
    background: pink;
    text-align: center;
}

h1 {
    text-wrap: balance;
}

canvas {
    display: block;
    text-align: center;
}

main {
    text-align: left;
    width: min(90vw, 900px);
    margin: 5% auto;
    background:white;
}

div#izquierda {
    width: 36%;
    margin: 2%;
    float: left;
}

div#derecha {
    width: 56%;
    margin: 2%;
    float: left;
}

div#portafolio{
        width: 96%;
        margin: 2%;
        clear:both;
    }

@media (orientation: portrait) {
    div#izquierda,
    div#derecha {
        width: 96%;
        margin: 2%;
        float: none;
    }
}

canvas {
    border-radius: 10px;
}

span {
    text-decoration: underline;
}

div#otredad div {
    padding: 0.3rem;
    width: 3rem;
    float: left;
}

div#otredad div img {
    transition: all ease 0.25s;
    width: 100%;
    height: 100%;
    border-radius: 50% 50%;
    filter: grayscale(1);
}



div#otredad div img:hover {
    transition: all ease 0.25s;
    transform: scale(1.1);
    filter: grayscale(0);
}

div#portafolio div{
    padding: 0.5rem;
    width: calc(50% - 1rem);
    float:left;
}

div#portafolio div img{
    width: 100%;
}

div#final{
    clear:both;
    text-align:center;
    padding:1rem
}