body {
background-color: #d4d6d6;
}

#content {
    background-color: #008080;
    max-width: 1200px;
    border: solid black;
    margin: auto;
}

header {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    background-color: #80ffff;
}

#logo-link {
    place-self: center;
    grid-area: 1/1/3/2;
    margin: 10px;
}

#page-title {
    place-self: end center;
}

#page-subtitle {
    grid-row: 2;
    place-self: start center;
}

#mountain-peak {
    grid-area: 3/1/4/4;
    display: grid;
    grid-template-rows: 1fr 1fr;
    background-color: white;
    clip-path: polygon(0 5%, 6% 0, 9% 2%, 12% 10%, 15% 30%, 18% 19%, 23% 8%, 27% 0, 31% 8%, 36% 0, 40% 10%, 43% 15%, 46% 20%, 49% 41%, 52% 25%,
    56% 12%, 59% 4%, 62% 0, 65% 8%, 67% 16%, 70% 13%, 72% 2%, 75% 0, 78% 4%, 81% 10%, 84% 4%, 86% 5%, 89% 0, 93% 5%, 95% 9%, 98% 15%, 100% 18%,
    100% 100%, 0 100%);
}

#home-nav, #wwr-nav, #ice-nav, #mario-nav {
    grid-row: 2/3;
    place-self: end center;
    text-decoration: none;
    color: black;
}

#home-nav:hover, #wwr-nav:hover, #ice-nav:hover, #mario-nav:hover {
    color: blue;
}

#snow-transition {
    height: 100px;
    background-color: white;
    clip-path: polygon(0% 0%, 0 54%, 4% 61%, 6% 70%, 8% 60%, 10% 51%, 12% 46%, 15% 52%, 17% 60%, 20% 71%, 25% 80%, 24% 69%, 24% 58%, 27% 60%,
    31% 67%, 33% 57%, 36% 50%, 38% 57%, 39% 68%, 41% 59%, 43% 49%, 45% 53%, 46% 63%, 48% 72%, 50% 61%, 54% 57%, 53% 66%, 56% 63%, 58% 59%,
    60% 53%, 62% 55%, 65% 52%, 64% 61%, 62% 72%, 66% 65%, 69% 69%, 71% 62%, 72% 57%, 74% 52%, 76% 54%, 77% 61%, 81% 65%, 84% 68%, 82% 56%,
    85% 47%, 87% 52%, 89% 58%, 92% 62%, 95% 64%, 96% 56%, 98% 55%, 100% 47%, 100% 0);
    grid-column: 1/11;
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

.ice-grid {
    display: grid;
}

main section, main a{
    text-align: center;
    text-decoration: none;
    color: black;
    
}

main section img, main a img{
    box-sizing: border-box;
}

#report_content {
    margin: auto;
    max-width: 80%;
}

.card-img {
    margin-top: 50px;
    border: 10px solid black;
    width: 100%;
    transition: transform .5s;
    box-shadow: 5px 5px 10px #6f7364;
}

.card-img:hover, .side-link:hover, .ice-tab:hover {
    opacity: .6;
    transform: scale(1.1);
}

.mario-link {
    cursor: url('images/high_five_cursor.png'), pointer;
    width: 100%;
    transition: transform .5s;
}

.wwr-card {
    grid-column: 2/4;
    grid-row: 2/3;
}


.ice-card {
    grid-column: 5/7;
    grid-row: 2/3;
}

.mario-card {
    grid-column: 8/10;
    grid-row: 2/3;
}

.side-card{
    grid-column: 2/5;
    grid-row: 2/3;
}

.side-desc {
    text-align: center;
    place-self: center;
    grid-column: 6/10;
    grid-row: 2/3;
}

.side-link {
    width: 100%;
    transition: transform .5s;
}

#ice-title {
    margin: 50px;
}

.ice-tab {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 3fr 1fr;
    grid-template-rows: 1fr 1fr;
    border: solid black;
    margin: 10px;
    margin-left: 60px;
    margin-right: 60px;
}

.ice-tab img, .poly-img {
    grid-column: 2/3;
    grid-row: 1/3;
    margin: 10px;
}

.ice-tab h2 {
    grid-column: 4/5;
    grid-row: 1/2;
    place-self: end center;
}

.ice-tab p {
    grid-column: 4/5;
    grid-row: 2/3;
}

 #celeste1 {
    grid-column: 1/4;
    grid-row: 1 / 2;
    background: skyblue;
}

#blanco {
    grid-column: 2/3;
    grid-row: 2 / 3;
    background: white;
}

#celeste2 {
    grid-column: 1/4;
    grid-row: 3 / 4;
    background: skyblue;
}

.sol {
    aspect-ratio: 1.25;
    background: yellow;
    clip-path: circle(25.0% at 50% 50%);
}

#flags-ice-tab-img {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    height: 200px;
    width: 300px;
    background: white;
}

#pos-ice-tab-img {
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-template-rows: repeat(5, 50px);
}
#red {
  width: 100px; 
  height: 100px; 
  background-color: red;
  grid-area: 1/1/3/3;
} 
#green { 
  width: 100px; 
  height: 100px; 
  background-color: green;
  grid-area: 2/2/4/4;
} 
#yellow {
  width: 100px; 
  height: 100px; 
  background-color: gold;
  grid-area: 3/3/5/5;
} 
#blue {
  width: 100px; 
  height: 100px; 
  background-color: blue; 
  grid-area: 4/4/6/6;
} 


#trees {
    height: 200px;
    background-color: rgb(44, 220, 44);
    clip-path: polygon(0 100%, 0 58%, 3% 9%, 6% 58%, 8% 23%, 9% 50%, 10% 37%, 12% 69%, 13% 53%, 15% 76%, 17% 46%, 19% 77%, 22% 56%, 25% 76%,
    27% 49%, 30% 80%, 32% 47%, 35% 81%, 37% 57%, 40% 81%, 43% 24%, 46% 82%, 49% 58%, 52% 82%, 53% 54%, 56% 81%, 58% 46%, 60% 82%, 61% 42%,
    66% 82%, 68% 53%, 72% 82%, 75% 46%, 78% 78%, 82% 41%, 86% 69%, 88% 33%, 90% 62%, 92% 23%, 94% 63%, 96% 14%, 100% 67%, 100% 100%);
    grid-column: 1/11;
    margin-bottom: -5px;
}

footer {
    background-color: rgb(44, 220, 44);
    display: grid;
    grid-template-rows: 1fr 1fr;
    place-content: center;
}

#sub-quote {
    text-align: end;
}

#fake-copyright {
    text-align: center;
}