/* https://coolors.co/daaa00-aed1e6-e7ecef-e6e1cf-2c4251 */

@font-face {
  font-family: "Apercu ";
  src: local("Apercu  Medium"), local("Apercu--Medium"),
    url("ApercuPro-Medium.woff2") format("woff2"),
    url("ApercuPro-Medium.woff") format("woff"),
    url("ApercuPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

body {
  margin: 0;
  /*night*/
  /* background-image: linear-gradient(to top, #3d5a80, #727f9e, #a3a7bd, #d2d2dd, #ffffff);  */
  /* neutral */
  background-image: linear-gradient(
    to right bottom,
    #e7ecef,
    #eef1f3,
    #f4f5f7,
    #fafafb,
    #ffffff
  );
  background-repeat: no-repeat;
}

body > header {
  height: 100px;
}

#topBar {
  height: 100%;
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: stretch;
  background-color: #dfe3ee;
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2);
  border-bottom: 2px solid gray;
}

#title_div {
  width: 55%;
  margin: 0.5%;
  text-align: center;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

#title {
  margin: 0;
  /* font-family: Helvetica; */
  /*night*/
  /* color: #252323;  */
  /*neutral*/
  /* color: #2C4251;  */
  max-width: 200px;
  max-height: 250px;
}

#date_div {
  display: flex;
  flex-direction: column;
  width: 80%;
  font-size: 2vw;
  /* margin-top: 2%; */
  text-align: center;
  margin: 2%;
  margin-top: 0.5%;
  white-space: nowrap;
  justify-content: space-around;
  margin: 0 0 0 2%;
}

#date_div > span > span {
  color: #0e0e0e; /*this worked*/
}

#date_clock {
  color: #000000;
  font-family: "Apercu ";
  font-weight: bold;
  /* font-weight: 125; */
  line-height: normal;
  /* float: right; */
  /* padding-top: 30px; */
}

#date_date {
  color: #0d0d0d;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

#icare_logo {
  width: 200px;
}

#tabs_div {
  width: 45%;
  display: flex;
  justify-content: space-around;
}

.date-time{
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
}

.timetext {
  /* padding-left: 20px; */
  color: #f6fffc;
  font-size: 1.5rem;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
}


.clock-wrapper {
    display: inline-flex;
    margin-left: 6rem;
}

.clock-here {
  display: inline-block;
}



.clock-outer-case {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 1rem;
    margin-left: 1rem;
}

.clock-inner-case {
  border: 0.35rem solid rgb(0, 0, 0);
  border-radius:1rem;
  text-align: center;
}

.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 9rem;
  border: 0.1rem solid rgb(255, 255, 255);
  padding: 0.5rem;
  border-radius: 0.625rem;
  background-color: rgb(52, 53, 52);
}

.clock-feets {
  display: flex;
  justify-content: space-between;
  padding-inline: 1rem;
  width: 100%;
}


.right-feet {
  border: 0.02rem solid rgb(0, 0, 0);
  height: 0.3rem;
  width: 1rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  background-color: black;
}

.left-feet {
  border: 0.02rem solid rgb(0, 0, 0);
  height: 0.3rem;
  width: 1rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  background-color: black;
}




.tabBox,
.currTabBox {
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  white-space: nowrap;

  /* height: 100%; */
  width: 16.67%;
  cursor: pointer;
}

.currTabBox {
  border: 4px solid #006BA6;
}

.tabBox {
  /* neutral */
  /* background-color: #AED1E6; */
  border: none;
  width: 16.67%;
  /*border-style: outset;*/
}

.tabImg {
  /*FIXME: They're only 40x40, which is rather small
	 * I can do pixel interpolation to make them bigger,
	 * but idk if we want that
	 */
   width: 40px;
}

/*Text under the image in each tab*/
.tabText {
  /*Unsure why @font-face fails to cover this*/
  font-family: "Apercu ", "Arial";
  font-size: 1rem;
  color: #000000;
}

.left_box {
  border-top-left-radius: 20%;
  border-bottom-left-radius: 20%;
}

.right_box {
  border-top-right-radius: 20%;
  border-bottom-right-radius: 20%;
}

.tabBox:hover {
  /* background-color: transparent; */
  /*background-color: #d7d4d4;*/
  border: 4px solid gray;
}

#sign-out {
  font-family: "Apercu ";
  font-weight: bold;
  /*border-style: outset;*/
  border-left: solid;
  /*border-left-width: thick;*/
}

@font-face {
  font-family: "Apercu ";
  src: local("Apercu  Medium"), local("Apercu--Medium"),
    url("ApercuPro-Medium.woff2") format("woff2"),
    url("ApercuPro-Medium.woff") format("woff"),
    url("ApercuPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

/*Note that media queries require the "and" statements in specific order*/
@media only screen and (orientation: portrait) and (max-width: 815px) {
  #icare_logo {
    width: 150px;
  }

  #date_div {
    margin: 0.5%;
    word-break: break-all;
  }

  .tabText {
    display: none;
  }

  #sign-out {
    word-break: break-word;
    white-space: normal;
  }

  .tabImg {
    height: 35px;
    width: 35px;
  }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (orientation: portrait) and (max-width: 600px) {
  body > header {
    height: 100px;
  }

  #icare_logo {
    width: 100px;
  }

  #topBar {
    height: 100%;
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: stretch;
    background-color: #dfe3ee;
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2);
    border-bottom: 2px solid gray;
  }

  #title_div {
    width: 100%;
    height: 34%;
    margin: 0.5%;
    text-align: center;

    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  #title {
    /* margin: 0; */
    /* height: 100%; */
    /* width: 33%; */
    /* font-family: Helvetica; */
    /*night*/
    /* color: #252323;  */
    /*neutral*/
    /* color: #2C4251;  */
    /* max-width: 200px; */
    /* max-height: 250px; */
  }

  #date_div {
    width: 100%;
    /*margin-top: 2%;*/
    text-align: center;
    font-size: 3.7vw;
    margin-top: 0.5%;
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 0%;

    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
  }

  #date {
    font-family: "Apercu ";
    font-size: 85%;
    height: 25px;
    /* font-weight: 125; */
    line-height: normal;
    /* float: right; */
    /* padding-top: 30px; */
  }

  #tabs_div {
    width: 100%;
    display: flex;
    justify-content: space-around;
    /* padding: 0.5% 0%; */
    /* padding-right: 0.5%; */
    /* padding: 20px 0px; */
    /* padding: 2% 0px; */
    padding-right: 0.25%;
  }

  .tabText {
    display: none;
  }
}

/* tablets portrait */
/*FIXME: This did nothing as the "and" statements were in the wrong order.*/
/*@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation : portrait) { 
    .tabText {
        font-family: 'Apercu ', 'Arial';
        font-size: 100%;
    }
}*/