*{margin: 0; padding: 0;}

body{
    background-color: hsl(51, 68%, 80%);
}

#wrapper{
    width: 960px;
    margin: 20px auto;
    
}

#header{
    background-color: hsl(0, 0%, 0%);
    padding: 15px;
    border-radius: 8px;
    border-bottom: 3px solid white
    
    
}
#header h2{
    color: white;
    font-variant: small-caps;
    font-family: arial;
    margin-left: 365px;
    cursor: default;
}
#header p{
    font-family: georgia;
    font-style: oblique;
    font-weight: bold;
    margin-left: 348px;
    cursor: default;
    color: #f0ff05;
}
/** header ends **/

#nav{
    background-color: black;
    border-bottom: 3px solid white;
    border-radius: 7px;
    
    
    
}

#nav ul{
    background-color: black;
    list-style-type: none;
    height: 37.5px;
    margin-left: 171px;
    margin-right: 29px;
    z-index: 10;
}

#nav ul li{
    float: left;
    border-right: 1.7px solid #eeeeee49;
    
}
#nav ul li:last-child{
    border: none;
}

#nav ul li a{
    text-decoration: none;
    color: #ff0000e0;
    display: block;
    padding: 10px 20px;
    background-color: #363434a4;
    font-family: arial;
    
    transition: all 0.5s ease;
    
}

#nav ul li a:hover{
    color: white;
    background-color: #ff0000c4;
    font-style: italic;
    
}
/**** DropDown List below****/

#nav ul li{ position: relative;}


#nav ul li ul{
    position: absolute;
    left: -9999999px;
    background-color:black ;
    margin-left: 0;
    
}
#nav ul li:hover ul{left: 0;}

#nav ul li ul li{
    float: none;
    border-right: none;
    background-color: black;
    width: 160px;
    border-bottom: 1.7px solid #eeeeee49;
    
}


#nav ul li ul li:first-child{
    border-top: 2.5px solid white;
}
/*** section starts ******/


#content_wrapper{
    background-color: white;
    margin-top: 3px;
    padding: 10px;
    overflow: hidden;
}
#content{
    width: 620px;
    margin-left: 10px;
    float:left
}
#content h2{
    font-family: Arial;
    margin-bottom: 6px;
    font-variant: small-caps;
    color: hsl(105, 29%, 97%);
    margin-top: 10px;
    margin-left: 280px;
    padding: 2px 0px;
    

    animation-name: h2ani;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-direction: alternate;
    width: 325px;
    padding-left: 4px;
    border-radius: 5px;
    text-align: center;
    
}
@keyframes h2ani{
    from{background-color: black;}
    to{background-color: #af0606;}
    
    
}
#content p{
    font-size: 22px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-left: 280px;
}

#sidebar{
    width: 290px;
    float: left;
    margin-left: 20px;
    cursor: default;

}
#sidebar ul{
    list-style-type: circle;
}
#sidebar h2{
    color: #ffffff;
    font-size: 18px;
    font-family: arial;
    
    animation-name: sidebarh2ani;
    animation-iteration-count: infinite;
    animation-duration: 2.5s;
    animation-direction: alternate;
    padding: 6px;
    width: 168px;
    border-radius: 5px;
    text-align: center;
}
@keyframes sidebarh2ani{
    0%{background-color: #a80707;}
    25%{background-color: #008000b6;}
    50%{background-color: #0000ffa9;}
    75%{background-color: rgba(23, 85, 135, 0.671);}
    100%{background-color: #a10d0d;}
    

}

#sidebar ul li{
    margin-left: 18px;
    
}
#sidebar ul li a{
    display: block;
    padding: 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: default;
    
}
.note{
    list-style-type: none;
    border-top: 1px solid #ac0b41;
    text-decoration: underline;
    cursor: default;
    color: #0d2f8d;
    
    
}
.note:last-child{
    border-top: 0;
    text-decoration: none;
    padding: 5px;
}

/********* footer starts **************/

#footer{
    background-color: #000000;
    padding: 7px;
    margin-top: 5px;
    border-radius: 4px;
}

#footer p{
    text-align: center;
    color: #ffffff;
    cursor: default;
}


/******inside page starts*****/

#content img{
    width: 550px;
    
    
}
#content figure{
    width: 550px;
    display: block;
    margin-left: 175px;
    padding: 8px;
    border-radius: 4.4px;
    background-color: black;
}
#content figcaption{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    color: red;
    font-weight: bold;
    margin-top: 4px;
}