/*
  General properties
*/
:root {
  --back-col: #282a36;
  --font-pri: #f8f8f2;
  --font-sec: #6272a4;
  --font-hov: #f8f8f2;
  --font-tri: #44475a;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/SourceCodePro.ttf) format('truetype');
}

body {
  background-color: var(--back-col);
  font-family: 'Source Code Pro';
}

/*
  Link properties
*/

a:link, a:visited {
  color: var(--font-sec);
  text-decoration: none;
}

a:hover {
  color: var(--font-hov);
  text-decoration: none;
}

a:active {
  color: var(--font-pri);
  text-decoration: none;
}

/*
  Logo properties
*/

#wrapper {
  align-items: flex;
  text-align: center;
  width: 100%;
}

#logo {
  margin: 1vh 0vh;
  margin-top: 3vh;
  display: inline-block;
  height: 350px;
  width: auto;
  outline: solid 0vh var(--font-pri);

  /* No blurring for Pixel Art */
  image-rendering: -moz-crisp-edges;         /* Firefox */
  image-rendering:   -o-crisp-edges;         /* Opera */
  image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

#next {
  margin: 1vh 0vh;
  display: block;
  color: var(--font-sec);
  margin: auto;
  visibility: hidden;
}


/*
  Classes
*/

.wrapper .header {
  position: absolute;
  right: 0px;
  top: 0px;
}

.header {
  color: var(--font-pri);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  list-style-type: none;
  // border: 1px solid black;
  padding: 5px;
  text-align: center;
  width: 12%;
}
.header .currentTime {
  color: var(--font-sec);
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 0px;
  padding-left: 0px;
  text-align: left;
}
.header .currentDate {
  color: var(--font-sec);
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 0px;
  padding-left: 0px;
  text-align: left;
}
.header .city {
  color: var(--font-sec);
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 0px;
  padding-left: 0px;
  text-align: left;
  text-transform: lowercase;
}
.header .temp {
  color: var(--font-sec);
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 0px;
  padding-left: 0px;
  text-align: left;
}
.header .forecast {
  color: var(--font-sec);
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 0px;
  padding-left: 0px;
  text-align: left;
  text-transform: lowercase;
}
.header ul {
  list-style-type: none;
  margin: 0px;
  padding: 10px;
}

.tables {
  width: 35rem;
  margin:auto;
  white-space: nowrap;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex-basis: 100%;
  flex: 1;

  color: var(--font-pri);
  display: inline-block;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 2px;
  list-style-type: none;
  text-align: center;
}

.links {
  text-align: left;
  line-height: 28px;
  letter-spacing: 0px;
  font-size: 16px;
  font-weight: 100;
  padding-left: 35px;
}

.i a {
  color:inherit
}