/*Global Values*/

:root {
    --orange: #FFA500;
    --light-color: #ffffff;
    --gray: #4D4D4D;
}

a:link,
a:visited {
    text-decoration: none; 
    color: inherit;
}

a:hover,
a:active {
    color: var(--light-color);
}

body {
    font-family: Urbanist, Verdana, Geneva, Tahoma, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0px;
    text-transform: uppercase;
}

body p  {
    color: var(--light-color);
    text-transform: none;
}

ul {
    list-style-type: none;
}

footer {
	background-color: var(--orange);
	display: flex;
	justify-content: space-around;
	padding: 10px;
	margin-top: auto;
}

h1,
h2 {
    background-color: var(--orange);
    border-radius: 15px;
	padding: 5px;
    text-align: center;
}


h1 {
    position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
}


header {
	display: grid;
	grid-template-columns: repeat(5,1fr);
	padding: 10px;
    background-color: var(--gray);
}

main {
	max-width: 70em;
	margin: 0 auto;
}


.main-index {
	display: flex;
	justify-content: center;
}

.logo {
    width: 90px;
}

a.logo {
	grid-column: 5;
	justify-self: end;
}

footer p {
    color:black;
}

nav {
    position: absolute;
    background-color: var(--gray);
    color: var(--orange);
}

nav ul {
    padding: 0px;
    color: var(--orange);
}

nav li {
    padding: 10px;
}

nav li a {
	text-transform: uppercase;
	font-weight: 700;
}

nav,
#menu-checkbox {
  display: none;
}

#menu-checkbox:checked ~ nav {
	display: block;
	top: 67px;
	left: 4px;
	z-index: 1;
	border-radius: 10px;
	opacity: 0.9;
	box-shadow: 0px 0px 5px 1px #616161;
}

.hamburger-icon {
    font-size: 35px;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    color: var(--orange);
}

.h2-tab {
    position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
    width: 242px;
	margin-top: -17px;
}

.h2-tab-txt {
	text-transform: uppercase;
	position: absolute;
    font-size: 15px;
}

.h2-tab-txt:hover,
.h2-tab-txt:active {
    color:white;
}

.news-main,
.visit-main {
    display: grid;
    background-color: var(--gray);
    border-radius: 20px;
    background-image: url(/images/Vector.svg);
    margin: 30px 0px;
}


.shaped-card-imgr {
    clip-path: url(#clippy);
}

.shaped-card-imgl {
    clip-path: url(#clippz);
}

.shaped-card-imgl, 
.shaped-card-imgr {
	height: 250px;
	object-fit: cover;
	width: 250px;
	margin: 5px 0px;
}

/*index-page*/

.index-cards {
	margin: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.index-cardr,
.index-cardl {
    position: relative;
    display: grid;
}

.h2-index {
	position: absolute;
	color: var(--light-color);
	text-transform: uppercase;
	align-self: flex-end;
	background: none;
}

.h2-indexl {
	margin-left: 65px;
	margin-bottom: 5px;
}

.h2-indexr {
	margin-left: 54px;
	margin-bottom: 5px;
}

/*visit*/

.map {
	width: 100%;
	max-width: 400px;
	border-radius: 15px;
}

.visit-main div {
    margin: 20px;
}

table {
	background-color: var(--orange);
	padding: 50px;
	border-radius: 15px;
	width: 100%;
	font-size: 20px;
	font-weight: 600;
    border-spacing: 0px;
}

td {
    border-bottom: solid 2px;
}

/*exhibitions*/

.exhibition-main {
	display: grid;
	grid-template-rows: 1fr auto auto auto auto;
}

.link-card {
	display: grid;
	justify-items: center;
	border-radius: 25px;
	margin: 10px 0px 40px;
	background-color: var(--gray);
	padding: 15px;
    background-image: url(/images/Vector.svg);
}

.link-card p  {
    padding: 0px 15px 50px;
}

/*News*/

.news-main {
	justify-items: center;
	grid-template-rows: auto 1fr;
}

.visit-main {
	padding: 15px;
}


.news-card {
	display: grid;
	padding: 15px;
}

.shaped-card-imgt {
	clip-path: url(#clippy);
	height: 240px;
	object-fit: cover;
	width: 250px;
}

/*Get involved*/

.getinv-main {
    display: grid;
}

.getinv-card {
	padding: 20px;
	display: grid;
	justify-items: center;
	grid-template-rows: auto 1fr;
	border-radius: 10px;
	margin: 5px;
	background-color: var(--bright-blue);
}

/*media queries*/

@media (min-width: 600px) {

    .index-cards {
        margin: 10px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        justify-items: center;
    }

    .index-cardr.bottom {
        right: 40px;
    }
    
    .index-cardl.bottom {
        left: 40px;
    }

    header {
        display: flex;
        justify-content: space-between;
    }

    .hamburger-icon {
        display: none;
    }

    nav, 
    nav ul {
        display: flex;
    }

    nav {
        position: static;
        grid-row: 1;
        align-items: center;
        font-size: 20px;
    }

    nav li {
        padding: 0px 10px;
    }

    .news-card  {
        grid-template-rows: auto 1fr;
    }

    .news-card div {
        grid-row: 1/3;
    }

    .news-card p {
        grid-column: 2;
    }

    .shaped-card-imgt {
        height: 290px;
        width: 330px;
    }
}

@media (min-width: 900px) {

    nav {
        font-size: 25px;
    }

    .shaped-card-imgl, .shaped-card-imgr {
        height: 300px;
        width: 300px;
        grid-row: 1/3;
        align-self: center;
    }

    .h2-tab {
        width: 291px;
        margin-top: -12px;
        grid-column: 2;
        grid-row: 2;
    }

    .link-card p {
        grid-column: 2;
        grid-row: 1;
    }

    .link-card {
        grid-template-rows: auto 0px auto auto;
    }

    .h2-tab-txt {
        font-size: 20px;
    }

    .index-cardr.bottom {
        right: 48px;
    }
    
    .index-cardl.bottom {
        left: 48px;
    }

    .h2-indexl {
        margin: 10px 80px;
    }
    
    .h2-indexr {
        margin-left: 88px;
        margin-bottom: 10px;
    }

    .visit-main {
        grid-template-columns: 1fr 1fr;
    }
}