@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

h3 {
    font-size: 35px;
}


/* Menu 1 */
.menu1 ul {
    display: flex;
    height: 80px;
}

.menu1 a {
    text-decoration: none;
    padding: 20px;
    float: left;
    text-align: center;
    border: black;
    border-right-style: dotted;
}
.menu1 a:hover {
    color: black;
    background-color: rgb(235, 235, 235);
}

.menu1 li:last-child a {
    border-right-style: none;
}
/* Menu 2 */


.menu2 ul {
    display: flex;
    border-top: solid;
    border-top-color: grey;
    border-bottom: solid;
    border-bottom-color: grey;
}

.menu2 a {
    text-decoration: none;
    padding: 20px;
    float: left;
    text-align: center;
}

.menu2 a:hover {
    color: black;
}


/* Menu 3 */


.menu3 ul {
    background-color: green;
    padding: 20px;
    display: flex;
}

.menu3 a {
    text-decoration: none;
    padding: 19px;
    color: white;
    font-size: 18px;
}
.menu3 a:hover {
    background-color: rgb(84, 181, 84);
}

/* Menu 4 */

.menu4 ul {
    background-color: orange;
    padding: 20px;
    display: flex;
}

.menu4 a {
    text-decoration: none;
    padding: 19px;
    padding-top: 16px;
    color: white;
    font-size: 18px;
}

.menu4 .active a {
    background-color: white;
    color: black;
}


/* Menu 5 */

.menu5 ul {
    display: flex;
    border-bottom: solid 4px grey;
}

.menu5 a {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: block;
    padding: 10px;
    width: 80px;
    margin: 0 3px;
    text-decoration: none;
    background-color: #333;
    font-size: 17px;
    text-align: center;
    color: grey;
}

.menu5 .active a {
    background-color: grey;
    color: #333;
}

/* Menu 6 */

.menu6 ul {
    display: flex;
}

.menu6 a {
    border-radius: 20px;
    display: block;
    padding: 10px;
    width: 80px;
    margin: 7px;
    text-decoration: none;
    background-color: red;
    font-size: 17px;
    text-align: center;
    color: white;
}

.menu6 .active a {
    background-color: orange;
}


/* Menu 7 */

.menu7 ul {
    display: flex;
}

.menu7 a {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 80px;
    height: 80px;
    margin: 7px;
    text-decoration: none;
    background-color: red;
    font-size: 17px;
    text-align: center;
    color: white;
    
}

.menu7 .active a {
    background-color: orange;
}


/* Menu 8 */


.menu8 ul {
    background: linear-gradient(to bottom, #3eb83e, #008800);
    padding: 20px;
    display: flex;
}

.menu8 a {
    text-decoration: none;
    padding: 19px;
    color: white;
    font-size: 18px;
}
.menu8 .active a {
    background: linear-gradient(to bottom, #5fe05f, #3dbc3d);
}


/* Menu 9 */


.menu9 ul {
    background: linear-gradient(to bottom, #d45e5e 50%, #b63e3e 50%);
    padding: 20px;
    display: flex;
}

.menu9 a {
    text-decoration: none;
    padding: 19px;
    color: white;
    font-size: 18px;
}
.menu9 .active a {
    background: linear-gradient(to bottom, #d55454 50%, #ba3636 50%);
}


/* Menu 10 */


.menu10 ul {
    display: flex;
    height: 80px;
}

.menu10 a {
    text-decoration: none;
    width: 80px;
    padding: 18px;
    float: left;
    text-align: center;
    border: black;
    border-right-style: dotted;
}

.menu10 .active1 a {
    background-image: url(../materialer-til-menu-styling/icon_home.png);
    background-repeat: no-repeat;
    background-position: 14px;
}
.menu10 .active2 a {
    background-image: url(../materialer-til-menu-styling/icon_articles.png);
    background-repeat: no-repeat;
    background-position: 8px;
    color: black;
}
.menu10 .active3 a {
    background-image: url(../materialer-til-menu-styling/icon_about.png);
    background-repeat: no-repeat;
    background-position: 17px;
}
.menu10 .active4 a {
    background-image: url(../materialer-til-menu-styling/icon_contact.png);
    background-repeat: no-repeat;
    background-position: 7px;
}
.menu10 li:last-child a {
    border-right-style: none;
}

/* Menu 11 */


.menu11 ul {
    display: flex;
    height: 80px;
}

.menu11 a {
    text-decoration: none;
    width: 80px;
    padding: 18px;
    float: left;
    text-align: center;
    border: black;
    border-right-style: dotted;
}


.menu11 li:last-child a {
    border-right-style: none;
}