@charset "utf-8";
/* CSS Document */
article {
    font-family: 'Poppins', sans-serif;

}

#multimedia {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

}

.vertical {
    padding: 3px;
    border: 1px solid black;
    background-color:white;
    width: 400px;
    height: 500px;
    margin-right: 10px;

}

.horizontal {
    border: 1px solid white;
    background-color: white;
    width: 400px;
    height: 246px;

}

.menu ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 3px;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.menu li {
    border: solid 1px grey;
    
}

.menu li a {
	display: block;
	padding: 1em;
	color: black;
	text-decoration: none;
	text-align: center;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
}

.menu li a:hover {
	color: white;
    background-color: gray;

}

footer {
    margin-top: 10px;
    padding: 1em;
    background-color: lightgrey;

}

@media (orientation: portrait) {
    #multimedia {
        display: block;
    }

    .vertical {
        width: 800px;
        height: 900px;
        margin-top: 10px;
    
    }
    
    .horizontal {
        width: 800px;
        height: 446px;
    
    }
    
    .menu ul {
        grid-template-columns: 1fr;
        
    }

}