html{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
:root{
  --fg: #11111b;
  --bg: #dce0e8;
  --accent: #1e66f5;
  }
  
  .dark-mode {
  --fg: #dce0e8;
  --bg: #11111b;
  --accent: #89b4fa;
  }
  #toggle {
  margin: 1%;
  padding: 1.5%;
  border: 0.1% solid;
  border-radius: 50%;
  background: var(--bg);
  position: fixed;
  right: 0%;
  top: 0%;
  }
  
  #toggle svg{
  fill: var(--fg);
  }
  
  body{
    background-color: var(--bg);
    color: var(--fg);
  }
  
  #toggle svg:last-child{
    display: none;
  }
  
  .dark-mode #toggle svg:first-child{
    display: none;
  }
  
  .dark-mode #toggle svg:last-child{
    display: block;
  }

body{
  margin: 0;
  padding: 0;
}

.cont{
  height: clamp(250px, 350px, 500px);
  width: clamp(250px, 350px, 500px);
  padding: 10px;
  border: 1.5px dashed;
  border-color: var(--accent);
  border-radius: 5%;
}

/* .span{
  display: flex;
}

.contact{
  align-items: center;
  padding: 4%;
  padding-left: 10%;
  padding-right: 10%;
} */

.cont{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(100%);
  transition: transform 1s ease;
}

.cont:hover{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(105%);
}

#credits{
  position: absolute;
  bottom: 0%;
  left: 15%;
  a{
    color: var(--accent);
  }
}