header {
    background-color: burlywood;
    font-size:larger;
    color:black;
    font-family:monospace;
}
img {
    width:100%;
}

.container {
    position:relative;
    text-align:center;
    
}

.titlet {
    
    font-size:xx-large;;
    font-family:monospace;
    position:absolute;
    top:20%;
    left:25%;
    transform:translate(-50%,-50%)
}

.planet {
    
    font-size:xx-large;
    font-family:monospace;
    position:absolute;
    top:40%;
    left:50%;
    transform:translate(-50%,-50%)

}

.tempt {
    
    font-size:x-large;
    font-family:monospace;
    position:absolute;
    bottom:30%;
    left:10%;
    transform:translate(-10%,-30%)
}

.temp {
    
    font-size:x-large;
    font-family:monospace;
    position:absolute;
    bottom:25%;
    left:10%;
    transform:translate(-10%,-25%)
}

.feelst {
    
    font-size:x-large;
    font-family:monospace;
    position:absolute;
    bottom:30%;
    left:30%;
    transform:translate(-20%,-30%)
}

.feels {
    
    font-size:x-large;
    font-family:monospace;
    position:absolute;
    bottom:25%;
    left:30%;
    transform:translate(-20%,-25%)
}

.humdt {
    
    font-size:x-large;
    font-family:monospace;
    position:absolute;
    bottom:30%;
    left:50%;
    transform:translate(-30%,-30%)
}

.humd {
    
    font-size:x-large;
    font-family:monospace;
    position:absolute;
    bottom:25%;
    left:50%;
    transform:translate(-30%,-25%)
}

.current {
    
    font-size:x-large;
    font-family:monospace;
    position:absolute;
    bottom:30%;
    left:70%;
    transform:translate(-40%,-30%)
}

.clouds {
    
    font-size:x-large;
    font-family:monospace;
    position:absolute;
    bottom:25%;
    left:70%;
    transform:translate(-40%,-25%)
}

.explain {

    font-size:x-large;
    font-family:monospace;
    position:absolute;
    bottom:20%;
    left:90%;
    transform:translate(-20%,-90%)
    
}

footer {
    background-color:burlywood;
    font-size:large;
    color:black;
    font-family:monospace;
}