:root {
    --bg-header: rgb(81, 43, 212);
    --sombra-inset: rgba(120, 98, 201, 0.473);
}

.main__contLayout {
    width: 90%;
    height: 100vh;
    display: grid;
    grid-template: repeat(7,1fr) / repeat(5,1fr) 8%;
    gap: 8px;
    align-items: center;
    justify-items: center;
    box-shadow: 20px 15px 25px 10px var(--sombra-inset);
    padding: 2%;
    border-radius: 25px;
    border-right: 2px var(--bg-header) solid;
    border-bottom: 2px var(--bg-header) solid;
    margin: 5%;
}

.main__IaL {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18pt;
    text-align: center;
    text-decoration: none;
    color: var(--bg-header);
    font-weight: bold;
    border-radius: 25px;border: 1px var(--bg-header) solid;
    border-right: 2px var(--bg-header) solid;
    border-bottom: 2px var(--bg-header) solid;
}

.main__IaL:hover {
    box-shadow: inset -10px -8px 6px 6px var(--sombra-inset);
    
}

.cls {
    grid-row: 2;
    grid-column: 1/6;
}

.main__Iunion {
    width: 100%;
    height: 100%;
    grid-row: 3;
    grid-column: 1/6;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}

.ado {
    grid-row: 4;
    grid-column: 1/6;
}

.bClassLib {
    grid-row: 5;
    grid-column: 1/6;
}

.clr {
    grid-row: 6;
    grid-column: 1/6;
}

.os {
    grid-row: 7;
    grid-column: 1/6;
}

.vsVertical {
    grid-row: 1/8;
    grid-column: 6;
    writing-mode: vertical-lr;
    font-size: 24pt;
}