.container{
        width:40%;
        margin:0 auto;
    }
    
       header{
        background: white;
     }
    
    .logo{
    
     text-align:center; /*stays in the middle*/
     width:300px;
    }
    
    
    header::after{
        content:'';
        display:table;
        clear:both;
    }
    
    nav ul{
        margin:0;
        padding:0;
        list-style: none;
    }
    
    nav li{
        display: inline-block;
        padding-top:23px;
        padding-bottom: 23px;
        position:relative;
    }
    
    nav a{
        color: black;
        text-decoration: none; /*no more decorations*/
        text-transform: uppercase;
        font-size:30px;
    }
    
    nav a:hover{
        color: #444;
    }
    
    nav a:before{
        content:'';
        display:block;
        height:5px;
        width:0%;
        background-color: black;
        position: absolute;
        top:0;
        transition: all ease-in-out 250ms; /*animation duration*/
    }
    
    nav a:hover::before{
        width:100%;
    }
    
    body{
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
       text-align:center;
    }
    
    h1{
     color:white;
     Font-size: 500%;
     font-style: italic;
    }
    
     #box{
        border: black 1px solid;
        background-color: rgba(0,0,0,0.5);
        padding:20px;
        margin:30px;
        border-radius:15px; /*rounded*/
    }
    
     p{
        color:white;
        font-size:120%;
    }
    
     h2{
        font-size:200%;
        color:white;
        padding-bottom:60px;
    }
    
     .fsize{
        font-size:300%;
    }
    
    iframe{
     border-width:0px;
    }