sparse.css

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

h1{
    font-family: 'Noto Serif Display', serif;
    font-size: 5vw;
    font-weight:200;
    text-align: left;
    position: relative;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-left: 8%;
    padding-bottom: 1%;
}

h2 {
    font-family: 'Noto Serif Display', serif;
    font-size: 2vw;
    font-weight: 200;
    text-align: center;
}

.nav {
    position: relative;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nav a {
    text-decoration: none !important;
}

.nav a:hover {
    color: #F1EDE9 !important;
}

h3 {
    font-family: 'Noto Serif Display', serif;
    font-size: 1.9vw;
    font-weight:200;
    text-align: left;
    margin-bottom: 10px;
}

h4 {
    font-family: 'Noto Serif Display', serif;
    font-size: 1.5vw;
    font-weight: 200;
    text-align: left;
}

h5 {
    font-family: 'Noto Serif Display', serif;
    font-size: 2vw;
    font-weight: 600;
    text-align: left;
    padding-left: 2vw;
    padding-right: 1vw;
}


span {
    font-style: italic;
 
}

.emp1 {
    color: orangered;
    font-weight: 400;
} 

.emp2 {
    color:royalblue;
    font-weight: 400;
}

.under {
    text-decoration: underline;
    text-underline-position: below;
    font-style:normal !important;
}

.small {
    text-align: right !important;
    margin-top: .2vh;
    font-size: .9vw !important;
}

.medium {
    font-size: 1.2vw !important;
    padding: 1.2vw 2vw !important;
    position: relative !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
.text {
    position: relative !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 1.2vw 2vw;
}

ol, ul {
    position: relative !important;
    padding-left: 3vw;
    padding-right: 1vw;
}

ol li, ul li{
    text-align: justify;
    font-size: 1.4vw;
}

.text p {
    text-align: justify;
    font-size: 1.4vw;
}

.margin {
    margin-bottom: 4vh;
}

body {
    background-color: #F1EDE9;
    color: #1e1e1e;
    place-content: center;
    font-family: 'Sono', sans-serif;
    font-size: .8vw;
    font-weight: 200;
    text-align: left;
    overflow: auto;
}

a {
    text-decoration: underline solid 1px #1e1e1e;
    text-underline-position: below !important;
    color: #1e1e1e;
}

a:hover {
    font-style: italic;
}

.alt_a a{
    text-decoration: underline !important;
    color: #1e1e1e;
}

.alt_a:hover a{
    font-style: italic !important;
    color: #1e1e1e !important;
}

section {
    display: grid;
    grid-auto-columns: 1fr;
    margin-inline: auto;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(28, 1fr);
    text-align: justify;
}

article {
    display: inline-block;
    place-content: center;
}

article:first-child:hover,  article:nth-child(16):hover,  article:nth-child(18):hover {
    background-color: #1e1e1e;
}

article:nth-child(9):hover, article:nth-child(10):hover, article:nth-child(11):hover, article:nth-child(12):hover {
    background-color: #1e1e1e;
    color: #F1EDE9 !important;
}

article:nth-child(9):hover a, article:nth-child(10):hover a,
article:nth-child(11):hover a, article:nth-child(12):hover a {
    color: #F1EDE9 !important;
    font-style: italic;
}

article:nth-child(2) {
    background-image: url("./img/window1.png");
    background-size: 6vw;
    background-repeat:no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

article:nth-child(3) {
    background-image: url("./img/window4.png");
    background-size: 6vw;
    background-repeat:no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

article:nth-child(4) {
    background-image: url("./img/window6.png");
    background-size: 6vw;
    background-repeat:no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

/*

article:nth-child(7) {
    background-image: url("./img/bricks1.png");
    background-size: 12vw;
    background-repeat: repeat-x;
    background-position-x: 50%;
    background-position-y: 50%;
}
*/

article:nth-child(5) {
    background-image: url("./img/window5.png");
    background-size: 6vw;
    background-repeat:no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}
article:nth-child(6) {
    background-image: url("./img/window2.png");
    background-size: 6vw;
    background-repeat:no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}


article:nth-child(13) {
    background-image: url("./img/window7.png");
    background-size: 6vw;
    background-repeat:no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}
article:nth-child(14) {
    background-image: url("./img/window8.png");
    background-size: 6vw;
    background-repeat:no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
}

article:nth-child(19) {
    background-image: url("./img/staircase.png");
    background-size: 20vw;
    background-repeat:repeat-y;
    background-position-x: 50%;
    grid-column-end: span 4; 
    grid-row-end: span 25;
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
    align-content: center;
}


article:nth-child(28){
    grid-column-end: span 11; 
    grid-row-end: span 4;
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}
article:nth-child(24) {
    grid-column-end: span 11; 
    grid-row-end: span 2;
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}

article:nth-child(38) {
    grid-column-end: span 11; 
    grid-row-end: span 7;
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}

article:nth-child(58){
    grid-column-end: span 11; 
    grid-row-end: span 3;
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}


article:nth-child(25) li {
    font-size: 1.4vw;
    margin-left: 1vw;
}


article:first-child {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
    border: solid 1px #1e1e1e;
}

article:first-child:hover #logo, article:nth-child(18):hover #arrow, article:nth-child(16):hover #arrow2 {
    filter: invert(1);
}

#logo {
    width: 11vw;
    height: auto;
    position: relative;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#github, #unibo, #door {
    width: 6vw;
    height: auto;
    position: relative;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#arrow {
    width: 2vw;
    height: auto;
    position: relative;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#arrow2 {
    width: 2vw;
    height: auto;
    position: relative;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
}

article:nth-child(2), article:nth-child(3), article:nth-child(4), article:nth-child(5), article:nth-child(6),
article:nth-child(9), article:nth-child(10), article:nth-child(11), article:nth-child(12), article:nth-child(13), 
article:nth-child(14), article:nth-child(15), article:nth-child(16), article:nth-child(18), article:nth-child(22),  
article:nth-child(25),  article:nth-child(27), article:nth-child(30),  article:nth-child(32), article:nth-child(34),
article:nth-child(36), article:nth-child(39), article:nth-child(41), article:nth-child(43), article:nth-child(45),article:nth-child(47),
article:nth-child(49),article:nth-child(51), article:nth-child(52),  article:nth-child(54), article:nth-child(56),article:nth-child(59), 
 article:nth-child(61),  article:nth-child(63), article:nth-child(66), article:nth-child(69), article:nth-child(70),
 article:nth-child(73),  article:nth-child(76), article:nth-child(77) {
    grid-column-end: span 2; 
    border-right: solid 1px #1e1e1e;
    border-bottom: solid 1px #1e1e1e;
}



article:nth-child(23), article:nth-child(26), article:nth-child(29), article:nth-child(31), 
article:nth-child(33), article:nth-child(35),article:nth-child(37),article:nth-child(40),
article:nth-child(42), article:nth-child(44), article:nth-child(46),
 article:nth-child(48),  article:nth-child(50),  article:nth-child(53), article:nth-child(55),  
 article:nth-child(57),article:nth-child(60),  article:nth-child(62), 
 article:nth-child(65), article:nth-child(71), article:nth-child(75){
    grid-column-end: span 3; 
    border-right: solid 1px #1e1e1e;
    border-bottom: solid 1px #1e1e1e;
}

article:nth-child(2), article:nth-child(3), article:nth-child(4), article:nth-child(5), article:nth-child(6),  article:nth-child(7) {
    border-top: solid 1px #1e1e1e;
}

article:nth-child(7) {
    grid-column-end: span 6; 
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}
article:nth-child(67) {
    grid-column-end: span 7; 
    grid-row-end: span 2;
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}

article:nth-child(68) {
    grid-column-end: span 7; 
    grid-row-end: span 2;
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}


article:nth-child(17){
    grid-column-end: span 10; 
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}

article:nth-child(28),  article:nth-child(64), article:nth-child(72), article:nth-child(74){
    grid-column-end: span 11; 
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}

article:nth-child(52) {
    grid-column-end: span 11; 
    grid-row-end: span 2;
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}


article:nth-child(21) {
    grid-column-end: span 14; 
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}

article:nth-child(8),article:nth-child(78), article:nth-child(81) {
    grid-column-end: span 4; 
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}



article:nth-child(15), article:nth-child(20), article:nth-child(22), 
article:nth-child(25), article:nth-child(27),  article:nth-child(30),
article:nth-child(32),  article:nth-child(34),  article:nth-child(36),
article:nth-child(39),  article:nth-child(41),  article:nth-child(43),  
article:nth-child(45), article:nth-child(47),  article:nth-child(49),
article:nth-child(51),  article:nth-child(54),  article:nth-child(56),
article:nth-child(59),  article:nth-child(61),  article:nth-child(63), 
 article:nth-child(66), article:nth-child(69),  article:nth-child(70),
 article:nth-child(73),  article:nth-child(76) {
    border-left: solid 1px #1e1e1e;
}



article:nth-child(15), article:nth-child(33), article:nth-child(35), article:nth-child(38), article:nth-child(39), article:nth-child(42), article:nth-child(43), 
article:nth-child(44), article:nth-child(45), article:nth-child(46),  article:nth-child(47),  article:nth-child(48),  article:nth-child(49),  article:nth-child(50),  article:nth-child(51),  
article:nth-child(52),  article:nth-child(53), article:nth-child(54), article:nth-child(55), article:nth-child(56), article:nth-child(57), article:nth-child(58), 
article:nth-child(59), article:nth-child(60), article:nth-child(61),  article:nth-child(75), article:nth-child(76),article:nth-child(77), article:nth-child(78), article:nth-child(79), article:nth-child(80),  
article:nth-child(81), article:nth-child(82),  article:nth-child(82), article:nth-child(83),  article:nth-child(84), article:nth-child(85), article:nth-child(86) , article:nth-child(87)   {
    border-right: solid 1px #1e1e1e;
    border-bottom: solid 1px #1e1e1e;
} 



article:nth-child(20) {
    grid-column-end: span 2; 
    border-bottom: solid 1px #1e1e1e;
    border-right: solid 1px #1e1e1e;
}

#cdc {
    width: 30vw;
    height: auto;
    position: relative;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: 0.3s;
}

#cdc2{
    width: 30vw;
    height: auto;
    position: relative;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: 0.3s;
}

#cdc:hover, #cdc2:hover {
    opacity: 0.7;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 1000px;
}

/* Caption of Modal Image */
#caption, #caption2 {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption, #caption2 {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* The Close Button */
.close2 {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close2:hover,
.close2:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}