:root {
    --bg-color: #2e2e2e;
    --green: #39FF14;
    --red: #FF0000;
  }  

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color);
}

.text-green {
    color: var(--green);
}

.text-red {
    color: var(--red);
}

button {
    background-color: var(--green);
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    color: #000;
    font-size: 16px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 15px 12px;
}

.cam{
    aspect-ratio: 1/1;
    width: 25vh;
    border-radius: 5%;
}
.cam-div {
    aspect-ratio: 1/1;
    width: 26vh;
    border-radius: 5%;
    background-color: gray;
    padding: 10px;
    box-shadow: #000 10px 10px 50px 12px;
}

.box
{
    background-color: gray;
    aspect-ratio: 1/1;
    width: 26vh;
    border-radius: 10%;
    box-shadow: #000 10px 10px 50px 12px;
}

input[type=text] {
    width: 90%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 15px 12px;
}

input[type=password] {
    width: 90%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 15px 12px;
}

.img{
    aspect-ratio: 1/1;
    width: 25vh;
    border-radius: 5%;
    box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 15px 12px;
}

.img-div {
    aspect-ratio: 1/1;
    width: 78vh;
    border-radius: 5%;
    background-color: gray;
    padding: 10px;
    box-shadow: #000 10px 10px 50px 12px;
}