html {
    background-color: rgb(0, 3, 3);
    color: white;
    overflow: hidden;
    user-select: none;
    -webkit-user-drag: none;
}
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    justify-content: center;
}
#head {
    display: flex;
    justify-content: center;
    font-size: 10vh;
}
#middle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 10vh;
    margin-bottom: 20vh;
}
#calculator {
    border-radius: min(3vh, 3vw);
    border-color: white;
    border: solid min(1vh, 1vw);
    display: flex;
    flex-direction: column;
    padding: 3vh 1.5vw;
    gap: 1vh;
    
}
#screen {
    font-family: 'Josefin Sans', sans-serif;
    padding: 1vh 0.5vw;
    height: 7vh;
    border-radius: min(1vh, 1vw);
    border-color: white;
    border: solid min(0.5vh, 0.5vw);
    margin-bottom: 2vh;
    font-size: min(4vh,4vw);
    font-weight: bold;
    box-sizing: border-box;
}
.row {
    display: flex;
    flex-direction: row;
    gap: 1vw;
}
button {
    font-family: 'Josefin Sans', sans-serif;
    height: 4vh;
    width: 5vw;
    background: transparent;
    color: white;
    border-radius: 1vh;
    border-color: white;
    border: solid 0.5vh;
    font-size: min(2vh,2vw);
    font-weight: bold;
    transition: transform 0.1s ease;
}
button:active:hover {
  transform: scale(0.95); 
}
button:hover {
    transform: scale(1.05);
    cursor: pointer;
}
#zero {
    flex-grow: 2;
}
#footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
    gap: 1vw;
    font-size: 3vh;
    color: white;
}

#created {
    margin-top: 0;
    align-self: center;    
}
a {
  color: white;
  text-decoration: none;
}
a:visited {
  color: white;
}
a:hover {
  color: #ccc;
}