:root {
  --eyes-white: rgb(234, 234, 234);
  --navback: #044c58;
  /* --background: rgb(19, 22, 32); */
  --background: rgb(35, 35, 35);
  --second-blue: rgb(18, 78, 134);
  --darkvi: rgb(120, 8, 168);
  --navheight: 12vh;

  --quest1: #03444f;
  --quest2: #1d5d68;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: var(--background);
  color: var(--eyes-white);
}

button {
  outline: none;
  cursor: pointer;
}

nav {
  justify-content: space-around;
  align-items: center;
  align-content: center;
  height: var(--navheight);
  background-color: var(--navback);
  overflow: visible;
  font-family: "Roboto", sans-serif;
  width: 100%;
  display: flex;
  padding-left: 4vw;
  padding-right: 2vw;
  z-index: 100;
  position: fixed;
}

.fill-top {
  height: var(--navheight);
  width: 100%;
  background-color: var(--navback);
}

.logo {
  color: var(--eyes-white);
  font-weight: bold;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 1px;
  font-size: 1.4em;
  /*σε περίπτωση που δεν δουλέψει το από κάτω*/
  font-size: 1.9vmax;
}

.nav-menu {
  display: flex;
  width: 50%;
  justify-content: flex-end;
  list-style-type: none;

  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 0;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 0;
  margin-left: auto;
  box-sizing: border-box;
}

.nav-menu li {
  cursor: pointer;
  display: block;
  padding: 1vmin;
}

.nav-menu li a {
  color: var(--eyes-white);
  text-decoration: none;
  font-size: 1em;
  font-size: 1.3vmax;
  border: transparent solid 0.1vmax;
  padding: 0.3vmax;
  border-radius: 0.5vmax;

  box-sizing: border-box;
  position: relative;
  align-items: center;
  height: 100%;
}

.nav-menu li:hover a {
  color: var(--eyes-white);
  border: var(--eyes-white) solid 0.1vmax;
}

/* MOBILEEEEEEEEEEEEEEEEEEEEEEEEEEEEE */

.mobileMenuOpener {
  display: none;
  align-items: center;
  justify-content: center;
}

.mobileMenuOpener div {
  background-color: var(--eyes-white);
  width: 5vh;
  height: 0.5vh;
  margin: 1vh;
  max-width: 20vh;
  max-height: 2vh;
  transition: all 0.25s ease-in;
}

.mobile-menu-button {
  background-color: transparent;
  border: 0.1vmax solid;
  border-radius: 10%;
  border-color: var(--eyes-white);
  max-height: 10vh;
  height: auto;
}

.mobile-menu {
  position: relative;
  height: 88vh;
  width: 100%;
  background-color: var(--background);
  opacity: 80%;
  right: 0px;
  position: fixed;
  overflow-y: scroll;
  list-style-type: none;
  display: none;
}

.mobile-nav-menu {
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}

.mobile-nav-menu li {
  cursor: pointer;
  padding: 5vh;
  opacity: 0;
}

.mobile-nav-menu li a {
  font-size: 1em;
  font-size: 3vmax;
  overflow-wrap: anywhere;
  color: white;
}

.mobile-nav-menu li:active a {
  color: coral;
  border: var(--eyes-white) solid 2px;
  border-radius: 10px;
}

/* END MOBILE */

a:link {
  color: coral;
}

a:visited {
  color: cornflowerblue;
}

a:hover {
  color: cyan;
}

a:active {
  color: cyan;
}

img {
  width: 100%;
  height: auto;
}

video {
  width: 100%;
}

.main-button {
  border: solid var(--navback);
  color: var(--eyes-white);
  padding-top: 3%;
  padding-bottom: 3%;
  padding-left: 6%;
  padding-right: 6%;
  border-radius: 5%;
  background-color: transparent;
}

.main-button:link,
.main-button:hover,
.main-button:visited {
  color: aliceblue;
}

.main-button:active {
  color: coral;
}

.main-button:hover {
  background-color: var(--navback);
}

.button-size-med {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 5%;
  padding-bottom: 5%;
}

.fn-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.fn-flex-sc {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex: 1;
}

.fn-flex-sc-tocenter {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex: 1;
}

.fn-max {
  width: 100%;
  height: 100%;
}

.main-wrap,
.reverse-wrap,
.mobile-only-wrap {
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

.col-torow-tocol {
  flex-direction: column;
}

.m5 {
  margin: 5%;
}

.p5 {
  padding: 5%;
}

.mobile-p5 {
  padding: 0;
}

.ok-border {
  border: solid var(--eyes-white);
  border-radius: 1%;
}

.border-fnrad {
  border-radius: 2%;
}

.flex-col {
  flex-direction: column;
  width: 100%;
}

.later {
  flex: 1;
  text-align: center;
  width: 100%;
  height: 100%;
}

.startbox {
  flex: 1;
  text-align: center;
  align-items: center;
  padding: 2%;
}

.small-padding {
  padding: 1%;
}

.left-text {
  text-align: left;
}

.col-awesome {
  margin-bottom: 5%;
  margin-top: 10%;
}

.fullw-to70 {
  width: 100%;
}

.im40 {
  width: 40%;
}

.less-to90-to100 {
  width: 70%;
}

.reorder1 {
  flex-direction: inherit;
}

.reverse-color1 {
  background-color: var(--quest1);
}

.reverse-color2 {
  background-color: var(--quest2);
}

.quiz-top {
  background-color: var(--quest1);
}

.quiz-bottom {
  background-color: var(--quest2);
}

/* fn */

.alice {
  background-color: #366f79;
  border: solid var(--eyes-white);
  border-width: 0.1em;
}

.iro {
  background-color: var(--background);
  border: solid var(--eyes-white);
  border-width: 0.1em;
}

/* median */

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .mobileMenuOpener {
    display: flex;
  }

  .nav-menu {
    display: none;
  }

  .mobile-menu {
    display: flex;
    transform: translateX(100%);
    transition: transform 0.25s ease-in;
  }

  .mobile-nav-menu {
    display: flex;
  }

  .main-wrap {
    flex-direction: column;
  }

  .reverse-wrap {
    flex-direction: column-reverse;
  }

  .im40 {
    width: 80%;
  }

  .fullw-to70 {
    width: 70%;
  }

  .reorder1 {
    order: -1;
  }

  .less-to90-to100 {
    width: 90%;
  }

  .reverse-color1 {
    background-color: var(--quest2);
  }

  .reverse-color2 {
    background-color: var(--quest1);
  }

  .col-torow-tocol {
    flex-direction: row;
    justify-content: space-between;
  }

  .fn-flex-sc-tocenter {
    align-items: center;
  }

  .mobile-p5 {
    padding: 5%;
  }
}

@media screen and (max-width: 480px) {
  .less-to90-to100 {
    width: 100%;
  }

  .mobile-only-wrap {
    flex-direction: column;
  }

  .col-torow-tocol {
    flex-direction: column;
  }
}

.mobile-menu-on-screen {
  transform: translateX(0%);
  position: fixed;
}

@keyframes active-mobile-menu {
  from {
    opacity: 0.1;
    transform: translateY(3vh);
  }

  to {
    transform: translateY(0vh);
    display: flex;
    opacity: 1;
  }
}

.toggle .line1 {
  transform: rotate(45deg) translateX(22.5%) translateY(200%);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(-45deg) translateX(22.5%) translateY(-200%);
}

.h10 {
  height: 10vh;
  width: 100%;
}

.current-link {
  color: coral;
}