@font-face {
    font-family: 'Rajdhani';
    src: url('../font/Rajdhani/Rajdhani-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('../font/Rajdhani/Rajdhani-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('../font/Rajdhani/Rajdhani-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('../font/Rajdhani/Rajdhani-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('../font/Rajdhani/Rajdhani-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* font-family: 'Rajdhani'; */
}

body {
  background-color: #e9e9e9;
  overflow-y: hidden;
}


@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.coin {
    width: 20rem;
    height: 20rem;
    /* border: .5rem dashed #fdfdfd; */
    border-radius: 50%;
    /* animation: spin 96s linear infinite; */
    transition: .4s ease-in-out;
    /* cursor: pointer; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.coin::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    border-radius: 50%;
    /* background-color: #fdfdfd; */
    z-index: 1;
}

/* .coin:hover {
    border: .2rem dashed #fdfdfd;
} */

.coin-container {
    /* pointer-events: none; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e9e9e9;
    /* background-color: #0000ff; */
    transition: .15s ease-in;
}

.hard-red {
    background-color: #ff0000;
}

.hard-blue {
    background-color: #0000ff;
}

.coin.blue::before {
    background-color: #2073E8;
}

.coin.red::before {
    background-color: #FC4120;
}

svg {
    z-index: 3;
    /* height: 400pt;
    width: 400pt; */
    height: 50vh;
    width: 50vh;
    cursor: pointer;
}

#Kron {
    margin-right: -200pt;
    margin-right: -25vh;
    transition: .2s ease-in-out;
}

#Mynt {
    margin-left: -200pt;
    margin-left: -25vh;
    transition: .2s ease-in-out;
}

#Mynt path {
    stroke: #2073E8;
}

#Kron path {
    stroke: #FC4120;
}

/* @keyframes draw1 {
    to {
        stroke-dashoffset: 0;
    }
} */

@keyframes draw2 {
    to {
        stroke-dashoffset: 550;
    }
}

.hidden {
    opacity: 0;
}

.connect {
    z-index: 4;
    position: absolute;
    top: 2rem;
    left: 2rem;
}

#SuperHeader {
    display: none;
    z-index: 4;
    position: absolute;
    
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: #555;
    transition: 0.4s;
    border-radius: 34px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px; width: 26px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
  }
  
  input:checked + .slider {
    background-color: #ddd;
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  
  .controls {
    display: none;
    width: 50vw;
    height: 20vh;
    z-index: 5;
    align-items: center;
    flex-direction: column;
  }

  .label-text {
    /* margin-top: 3rem;
    margin-bottom: 1rem; */
    /* font-weight: 600; */
    font-size: small;
    width: 7rem;
    display: flex;
    justify-content: center;
  }

  .switch-container {
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
    margin-top: 4rem;
    width: 20rem;
  }

  .connected-clients {
    width: 50vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    padding-top: 3rem;
    max-width: 20rem;
  }

td {
  /* border-bottom: 1px solid black; */
  border-collapse: collapse;
  padding: .5rem;
  padding-left: 1rem;
  /* background-color: #fdfdfd; */
  border-radius: .25rem;
}

  tr {
    border-bottom: 1px solid #000;
    position: relative;
    z-index: 10;
  }

  th {
    width: 20vw;
    padding-bottom: 2rem;
  }

  .collapsed-led {
    box-shadow: inset .125rem .125rem .125rem rgba(255, 255, 255, 0.25);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;

  }

  .ledB {
    box-shadow: inset -.25rem -.25rem 1.5rem #2073E8;
    background-color: #0000ff;
  }

  .ledW {
    box-shadow: inset -.25rem -.25rem 1.5rem #f1f1f1;
    background-color: #fff;
  }
  .ledR {
    box-shadow: inset -.25rem -.25rem 1.5rem #FC4120;
    background-color: #ff0000;
  }

  .led-td {
    display: flex;
    justify-content: center;
    height: 3rem;
    align-items: center;
  }

  button {
    padding: .25rem;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    border: none;
    border-bottom: 4px solid white;
    background-color: #e9e9e9;
    /* border-radius: 1.5rem; */
    transition: .2s cubic-bezier(0.075, 0.82, 0.165, 1);
    font-weight: 600;
    font-size: larger;
  }

  button:hover {
    border-bottom: 9px dashed white;
  }

  #reset-all {
    margin-top: 4rem;
  }
  #disconnect-all {
    margin-top: 2rem;
  }

  #reset-all:hover {
    border-bottom: 10px dashed white;
  }

  #connectButtonCtr {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    position: absolute;
    top: 80vh;
    left: -2rem;
  }

  .superControls {
    display: flex;
    justify-content: space-around;
    position: fixed;
    top: 20vh;
  }