@font-face {
    font-family: 'CoralPixels';
    src: url(Tipografías/CoralPixels-Regular.ttf);
}

html {
    background-color: #ABC4FF;
}

.box {
    max-width: 1300px;
    margin: 70px auto;
    display: grid;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
    grid-template-columns: 350px minmax(0,1fr);
}

header {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    text-align: center;
    font-family: 'CoralPixels', Georgia, serif;
}

h1 {
    font-size: 25px;
    margin: 0px;
}

h2 {
    font-size: 40px;
    letter-spacing: 5px;
    margin: 5px;
}

aside {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
    border: #EDF2FB 10px solid;
    border-radius: 30px;
    background: #EDF2FB;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    font-family: 'CoralPixels', Georgia, serif;
}

h3 {
    font-size: 25px;
    margin-top: 10px;
}

.HARUHI {
    width: 170px;
    margin-top: -5px;
}

.p1 {
    font-size: 17px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.Flag {
    width: 50px;
    margin-bottom: 20px;
    margin-top: 10px;
}

section {
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    height: max-content;
    border: #F18701 10px solid;
    border-radius: 30px;
    background: #F18701;
    text-align: center;
    padding: 10px;
    font-family: 'CoralPixels', Georgia, serif;
}

h4 {
    font-size: 30px;
    margin: 0px;
    letter-spacing: 5px;
}

h5 {
    font-size: 20px;
    margin: -5px;
}

.Portadas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: normal;
    column-gap: 20px;
    grid-row-gap: 10px;
    align-items: baseline;
    margin-top: 30px;
    margin-bottom: 40px;
    padding: 30px;
}

.Portada6 {
    display: inline-block;
    cursor: pointer;
}

.Portada6 .Descripción {
    width: 190px;
    padding: 3px;
    text-align: center;
}

.Portada6 img {
    width: 190px;
    border-radius: 10px;
    border: 5px #ABC4FF solid;
}

.Portada6 img:hover {
    border: 5px #EDF2FB solid;
}

.Portada5 {
    display: inline-block;
    cursor: pointer;
}

.Portada5 .Descripción {
    width: 190px;
    padding: 3px;
    text-align: center;
}

.Portada5 img {
    width: 190px;
    border-radius: 10px;
    border: 5px #ABC4FF solid;
}

.Portada5 img:hover {
    border: 5px #EDF2FB solid;
}

.Portada4 {
    display: inline-block;
    cursor: pointer;
}

.Portada4 .Descripción {
    width: 190px;
    padding: 3px;
    text-align: center;
}

.Portada4 img {
    width: 190px;
    border-radius: 10px;
    border: 5px #ABC4FF solid;
}

.Portada4 img:hover {
    border: 5px #EDF2FB solid;
}

.Portada3 {
    display: inline-block;
    cursor: pointer;
}

.Portada3 .Descripción {
    width: 190px;
    padding: 3px;
    text-align: center;
}

.Portada3 img {
    width: 190px;
    border-radius: 10px;
    border: 5px #ABC4FF solid;
}

.Portada3 img:hover {
    border: 5px #EDF2FB solid;
}

.Portada2 {
    display: inline-block;
    cursor: pointer;
}

.Portada2 .Descripción {
    width: 190px;
    padding: 3px;
    text-align: center;
}

.Portada2 img {
    width: 190px;
    border-radius: 10px;
    border: 5px #ABC4FF solid;
}

.Portada2 img:hover {
    border: 5px #EDF2FB solid;
}

.Portada1 {
    display: inline-block;
    cursor: pointer;
}

.Portada1 .Descripción {
    width: 190px;
    padding: 3px;
    text-align: center;
}

.Portada1 img {
    width: 190px;
    border-radius: 10px;
    border: 5px #ABC4FF solid;
}

.Portada1 img:hover {
    border: 5px #EDF2FB solid;
}

article {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    height: max-content;
    border: #EDF2FB 10px solid;
    border-radius: 30px;
    background: #EDF2FB;
    text-align: center;
    padding: 10px;
    font-family: 'CoralPixels', Georgia, serif;
}

h6 {
    font-size: 25px;
    margin-top: 10px;
}

.Piojo {
    width: 230px;
    margin-top: -40px;
}

.p2 {
    font-size: 17px;
    margin-top: 20px;
    margin-bottom: 20px;
}