header{
    background-image: url("https://media.cnn.com/api/v1/images/stellar/prod/140923183321-01-climate-change-impact-restricted.jpg?q=w_4200,h_2362,x_0,y_0,c_fill");
    background-size:100%;
    padding:130px;
    background-repeat:no-repeat;
}

header h1{
    color:white;
    font-weight:bold;
    font-size:60px;
    transition:1s;
    border-color:;
    border-style:solid;
    display:block;
    text-align:center;
    width:60%;
    margin-right:auto;
    margin-left:auto;
    background-color:black;
}

header h1:hover{
    background-color:red;
    transform:scale(1.2);
}

body{
    background-color:lightblue;
}

#table-of-contents{
    border-color:black;
    font-size:23px;
    background-color:white;
    color:black;
    border-width:5px;
    border-style:double;
    margin-top:6%;
    margin-left:7%;
    padding:10px;
    transition:1s;
}

#table-of-contents td{
    padding:10px;
}

a:link {text-decoration:none;} 
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}

#table-of-contents:hover{
    box-shadow:inset 300px 300px black;
    color:white;
    transform:rotate(5deg);
}

#table-of-contents td:hover{
    background-color:white;
}

#what-is-climate-change{
    background-color:black;
    color:white;
    border-color:black;
    border-style:solid;
    border-width:0.5px;
    width:70%;
    font-size:20px;
    margin-left:5%;
    margin-top:6%;
    padding:20px 20px 20px 20px;
    transition:1s;
}

#what-is-climate-change:hover{
    transform: translate(50px);
    background-color:#3e4145;
    color:white;
}

.what-is-climate-change-images img{
    width:400px;
    height:250px;
    display:inline-block;
    margin-left:12%;
    margin-bottom:6%;
}

#impacts{
    background-color:black;
    color:white;
    border-color:black;
    border-style:solid;
    border-width:0.5px;
    width:70%;
    font-size:20px;
    margin-left:5%;
    margin-top:6%;
    padding:20px 20px 20px 20px;
    transition:1s;
}

#impacts:hover{
    transform:translate(50px);
    background-color:#3e4145;
    color:white;
}

.impacts-img img{
    width:400px;
    height:250px;
    margin-right:auto;
    margin-left:auto;
    display:block;
    transition:1s;
}

.impacts-img img:hover{
    transform:scale(1.1);
}

#charts{
    background-color:black;
    border-color:black;
    border-style:solid;
    border-width:0.5px;
    width:73%;
    font-size:20px;
    margin-left:5%;
    margin-top:6%;
    padding-top:100px;
    padding-bottom:100px;
    transition:2s;
    display:inline-block;
}

#charts:hover{
    transform:translate(50px);
}

#charts h1{
    font-size:35px;
    color:red;
    text-align:center;
}

.red-arrow img{
    height:230px;
    width:215px;
    display:block;
    margin-right:auto;
    margin-left:auto;
}

.charts-link{
    border-color:white;
    border-style:solid;
    width:30%;
    text-align:center;
    background-color:red;
    color:white;
    display:block;
    margin-right:auto;
    margin-left:auto;
}

.charts-link:hover{
    background-color:white;
    border-color:red;
    color:red;
}

.charts-link:active{
    transform:scale(1.2);
}


footer{
    background-color:gray;
    padding:60px;
    margin-top:6%;
}

.learn-more{
    display:inline-block;
    margin-left:10%;
    padding:30px;
    background-color:lightgray;
    transition:1s;
}

.learn-more:hover{
    background-color:darkgray;
    color:white
}

.learn-more h3:hover{
    background-color:white;
}

.name-class-pd{
    display:inline-block;
    padding:30px;
    margin-left:12%;
    background-color:lightgray;
    transition:1s;
}

.name-class-pd:hover{
    background-color:darkgray;
    color:white;
}