*{
    margin:0;
    padding:0;
    
    }
body {
    background-color: black;
}

header {
    background-color:black;
    color: white;
    text-align: center;
    width: 100%
    }


.boxed {
    display: inline-block;
    border: 1px solid white;
    margin: 5px;
    padding: 5px
}

.container {
    color: white;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    margin: auto;
    margin-top: 3%;
    border: 2px solid white;
    width: 90%;
    padding-bottom: 3%;
    
}
h3{
    text-align: center;
    
}
.content {
    margin: auto;
    background-color: black;
    width: 90%;

}

.text {
    margin: auto;
    width: 100%;
    resize: none;
    text-align: center;
    color: blue;
       
}

.range {
    margin: auto;
    width: 100%;
}

#length {
    text-align: center;
}

.nav {
    display: flex;
    justify-content:space-between;
    height: 5%;
}

.nav div {
    border: 1px solid white;
    padding: 1%;
}

.button {
    
    display: flex;
    justify-content:space-around;
}

button {
    background-color: black;
    color: white;
    line-height: 200%;
    width: 100%;

}

h1:hover, button:hover {
    background-color: white;
    color: black;
}