body {
    height: 100vh;
    margin: 0;
}

::-moz-selection {
  background: violet;
}

::selection {
  background: violet;
}

.header{
  font-family: "NHaas-Reg";
  font-size: 15pt;
}

.one{
    color: #877A6C;
}

.two{
    color: #A71FDD;
}

.three{
    color: #EDA0C5;
}

.four{
    color: #CCC505;
}

.five{
    color: #236DFF;
}

.footer{
    position: fixed;
    bottom: 20px;
    color: #BABABA;
    font-family: "NHaas-Reg";
    font-size: 10pt;
    padding-left: 20px;
}

.content a{
    text-decoration: none;
}

#one{
    color: #877A6C;
}

#two{
    color: #A71FDD;
}

#SI{
     color: #BABABA;
}

#home{
    color: black;
    text-decoration: none;
}

.content{
    z-index: 100;
    position: relative;
    font-family: "NHaas-Reg";
    font-size: 15pt;
    padding: 20px;
}

.clock {
    width: 100vh;
    height: 100vh;
    border: 1px solid black;
    border-radius: 50%;
    position: fixed;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -100;

}

.hand {
    width: 50%;
    background: black;
    position: absolute;
    top: 50%;
    transform-origin: 100%;
    transform: rotate(90deg);
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hour-hand {
    height: 1px;
}

.minute-hand {
    height: 1px;
}

.second-hand {
    height: 1px;
    background: red;
}

@font-face {
  font-family: "NHaas-Reg";
  src: url('NHaasGroteskDSStd-55Rg.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NHaas-LT";
  src: url('NHaasGroteskDSStd-45Lt.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}