<style>
body{
    position: static;
    height: 100%;
}

h1{
    font-size: 800%;
    color: black;
    font-family: cursive;
    margin: 0px;
}
h2 {
    font-family: cursive;
    font-size: 200%;
}
p{
    display: inline;
}


/*NAV*/
nav {
    text-align: center;
    text-decoration: none;
    margin: 0;
    padding: 0;
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #555;
    overflow: hidden;
    font-size:100%;
    box-shadow: 3px 3px 5px grey;
}
nav img{
    clear: none;
    margin-left: 2%;
    width: 5%;
}
nav ul a:hover{
    color:lightblue;
    background-color: black; 

}
nav ul a {
    margin: 0;
    color: black;
    padding: 5%;
    height: 10%
    font-family: cursive;

}
nav li {
    list-style-type: none;
    display: inline;
}


/*HEADER*/
header{
    padding-top: 7%;
    text-align: center;
    margin-bottom: 0px;
    padding-bottom: 0%;
}

header img{
    padding-bottom: .9%;
    padding-top: 0%;
    width: 20%;
    margin: 0px
}


/*TEXT*/
article{
    margin-left: 10%;
    margin-right: 10%;
    position: static;

}

leftimg{
    position: static;
    background-image: url('background.jpeg');
    background-repeat: no-repeat;
    background-size: 100%;
    color:rgba(0, 0, 0, 0);
    text-align: center;
    float: left;
    clear: both;
    margin: 4%;
    width: 30%;
    overflow-wrap: break-word;
    border-width: 5px;
    padding:5%;
    border-radius: 5px;
    transition: .5s;
    clear: none;
}
leftimg:hover {
    background-image: url('background0.png');
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    transition: .5s;
}
left {
    position: static;
    width: 45%;
    float: left;
    clear: none;
    text-align: center;
    overflow-wrap: break-word;

}
right  {
    position: static;
    clear: none;
    float: right;
    width: 45%;
    text-align: center;
    overflow-wrap: break-word;
}
rightimg {
    perspective: 100px;
      perspective-origin: left;

    background-size: 100%;
    position: static;
    background-image: url('background.jpeg');
    background-repeat: no-repeat;
    color:rgba(0, 0, 0, 0);
    text-align: center;
    float: right;
    clear: both;
    margin: 4%;
    width: 30%;
    overflow-wrap: break-word;
    border-width: 5px;
    padding:5%;
    border-radius: 5px;
    transition: .5s;
}
rightimg:hover {
    background-image: url('background0.png');
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    transition: .5s;
}


/*FOOTER*/
footer {
    width: 100%;
    color: white;
    background-color: black;
    text-align: center;
    padding-top: 1%;
    padding-bottom: 2%;
    clear: both;
    float: all;
    position: static;

}
</style>

