:root {

    --dark-bg-color: #000000;
    --text-light-color: #e0e0e0;
    --main-font: 'Open sans', sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

body {

    font-family: var(--main-font);
    line-height: 1.6;
    color: var(--text-light-color);
    background-color: var(--dark-bg-color);
    overflow: hidden;
}

.frame {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: start;
    padding-top: 20px;
    box-sizing: border-box; 

}

.hackthebox-button{

    position: absolute;
    top: 21.5%;
    left: 50.5%; 
    transform: translate(-50%, -50%);
    padding: 38px 100px;
    font-weight: bold;
    font-size: 1.5rem;
    color: white;
    background-color: #9fef01;
    text-decoration: none;
    border-radius: 40px;
}

.hackthebox-image{

        width: 100px;
        height: 112px;
        position: absolute;
        top: 14.3%;
        left: 39%;

}


.vulnhub-image{

    width: 200px;
    height: 203px;
    position: absolute;
    top: 36.8%;
    left: 37%;

}

.vulnhub-button {

    position: absolute;
    top: 50.5%;
    left: 49.5%; 
    transform: translate(-50%, -50%);
    padding: 38px 100px;
    font-weight: bold;
    font-size: 1.5rem;
    color: black;
    background-color: white;
    text-decoration: none;
    border-radius: 40px;
}

.tryhackme-image {

    width: 150px;
    height: 100px;
    position: absolute;
    top: 72.5%;
    left: 41%;    

}
.tryhackme-button {

    position: absolute;
    top: 80.5%;
    left: 55.5%;
    transform: translate(-50%, -50%);
    padding: 30px 100px;
    font-weight: bold;
    font-size: 1.5rem;
    color: white;
    background-color: black;
    text-decoration: none;
    border-radius: 40px;

}