@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

@keyframes myAnim {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

html {
    scroll-behavior: smooth;
}

body {
    margin: auto;
    font-size: 98%;
    font-family: "Ubuntu", sans-serif;
	line-height:25px;
	background-color:#F1F4F9;
}

/* HEADER */
header {
    padding-top: 200px;
}

/* NAVIGATION */
nav 
{
	
}

ul {
    list-style: none;
    background-color: #19323C;
    padding: 1em;
    margin: 0;
    z-index: 100;
    
    position: fixed;
    top: 0;
    width: 100%;
	
	display:grid;
	grid-template-columns: 1fr ;
	justify-items: center;
}

li {
    margin: 0.5em;
}

a {
    text-decoration: none;
    color: white;
    font-size: 1.3em;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

a::before {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: #E5446D;
    bottom: -5px;
    left: 50%;
    transition: all 0.3s ease-in-out;
}

a:hover::before, a:focus::before {
    width: 100%;
    left: 0;
}

/* MAIN */
main {
    margin: auto;
    width: 85%;
}

h1 {
    color: white; 
    text-align: center;
    background-color: #19323C;
    font-size: 2em;
    box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 10px;
    border-radius: 50px;
	width:70%;
	margin:auto;
}

main p {
    padding: 20px;
    text-align: ;
	font-size:1.1em;
}

article:not(.images) {
    
	background-color:white;
	border-radius: 25px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.images {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    grid-area: img;
}

img {
    width: 100%;
    height: auto;
}

#featured {
    grid-area: feat;
}

#news h1{
    animation: myAnim 2s both infinite;
	
}

#about {
    grid-area: about;
}

#location{
    grid-area: loca;
	
	
	background-image:url("../img/mountain.jpg");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	
	
}
#location p
{
	color:white;
	
}

span
{
		color:#5479B6;
		font-weight:bold;
		
}
span:hover, span:focus
{
		color:#E5446D;
		
		
}

/* FOOTER */
footer {
    background-color: #19323C; /
    color: white; 
    padding: 3em;
    text-align: center;
}

footer p
{
	color:white;
}



/* --responsive-- */
@media screen and (min-width: 729px) {
	body
	{
		font-size:100%;
	}
	header 
	{
    padding-top: 100px;
	}
	
	
    .images {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
	
	ul
	{
		grid-template-columns: repeat(4, 1fr);
		justify-items: center;
	}
}

@media screen and (min-width: 990px) {
    main
	{
		max-width:65%;
		
	}
	
	section:nth-of-type(1) {
		
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-areas: 
            "feat img";
		
    }
    .images {
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr;
    }
	
	
    section:nth-of-type(2) {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        grid-template-areas: 
            "about loca";
    }
}

@media print {
  
  .images, footer, header {
    display: none;
  }
  
  body
  {
	  color:black;
  }
}