body {
    background-color:black;
    overflow:hidden;
}

.name-position {
    color:red;
    position: absolute;
    top:8px;
    left:40px;
}

.content {
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    flex-direction:column;
}

.h1 {
    color:white;
}

.h-colors {
    color:red;
}

.buttons {
    position:absolute;
    top:8px;
    right:16px;
}

.profile {
    position:relative;
    border-radius:50%;
}

.profile-position {
    position:absolute;
    margin-right:550px;
}

.button-customize {
    position:absolute;
    top:20px;
    right:16px;

    background-color:black;
    color:white;

    border:1px solid black;
    border-radius:5px;

    width:150px;
    height:50px;
    
    cursor:pointer;
    font-size:20px;
    transition-duration:500ms;
}

.button-customize:hover {
    color:red;
    border-bottom:1px solid red;
}

.troll-button {
    position:absolute;
    bottom:8px;
    right:16px;
    
    background-color:black;
    color:white;

    border:1px solid black;
    border-radius:5px;

    width:150px;
    height:50px;
    
    cursor:pointer;
    font-size:20px;
    transition-duration:500ms;
}

.troll-button:hover {
    color:red;
    border-bottom:1px solid red;
}

.clock-position {
    position: absolute;
    top:50%;
    width:100%;
    font-size:35px;
    color:red;
}

@media (max-width:500px) {
    .profile-position {
        margin:auto;
    }
}

@media (max-width:500px) {
    .clock-position {
        display:flex;
        justify-content:center;
        align-items:center;
        height:70vh;
    }
}

@media (max-width:500px) {
    .h1 {
        display:flex;
        justify-content:center;
        align-items:center;
        height:55vh;
    }
}