@font-face {
  font-family: 'pixel';
  src: url('/web/snub.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  background-image: url('/resources/greek/img/pattern.jpg');
  color: white;
  font-family: 'pixel', Verdana, sans-serif;
  font-size:2em;
  background-color:black;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: black; 
}
 
::-webkit-scrollbar-thumb {
  background: white; 
  opacity:0.5;
}

::-webkit-scrollbar-thumb:hover {
  background: grey;
  opacity:0.5;
}

.subtext {
  margin-top:-30px;
  opacity:0.5;
  text-align:center;
}

.subtext a {
    background-color:black;
  color:white;
  text-decoration:none;
}

.subtext a:hover {
  text-decoration:underline;
}

    main {
      max-width:700px;
      margin-left:auto;
      margin-right:auto;
    }
    .flaot {
      background:linear-gradient(#001F43, #023166);;
      padding:10px;
      margin:10px;
      float:right;
      width:300px;
      border-top: 5px solid #00244d;
      border-left: 5px solid #00244d;
      border-bottom: 5px solid #00244d;
      border-right: 5px solid #001226;
      overflow:auto;
      height:300px;
    }
    .content {
      border-top: 5px solid #00244d;
      border-left: 5px solid #00244d;
      border-bottom: 5px solid #00244d;
      border-right: 5px solid #001226;
      padding:10px;
      margin:10px;
      background:linear-gradient(#023166, #001F43);;
      margin-bottom:10px;
    }
    .tab {
      writing-mode: vertical-rl;
text-orientation: mixed;
border-right: 5px solid #001226;
border-bottom: 5px solid #001226;
border-top: 5px solid #001226;
background-color:#023166;
float:right;
margin-right:-22px;
opacity:0.7;
    }
    .tab a {
      color:inherit;
      text-decoration:none;
    }
    @media only screen and (max-width: 878px) {
    .tab {
        writing-mode: initial;
        text-orientation: initial;
        padding: 10px;
        margin: 10px;
        border-top: 5px solid #00244d;
        border-left: 5px solid #00244d;
        border-right: 5px solid #001226;
        border-bottom: 5px solid #001226;
        background-color: #023166;
        margin: 0 auto;
        opacity: 1;
        position: static;
    }
    .flaot {
      width:90%;
    }
}
    .bounce {
      height: 50px;
      overflow:hidden;
            position: relative;
            padding:10px;
      margin:10px;
      border-top: 5px solid #00244d;
      border-left: 5px solid #00244d;
      border-right: 5px solid #001226;
      border-bottom: 5px solid #001226;
      background-color:#023166;
      font-size:2em;
      max-height:40px;
      padding-bottom:20px;
    }

.bounce p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            transform: translateX(50%);
            animation: bouncing-text 10s ease-in-out infinite alternate;
        }

        @keyframes bouncing-text {
            0% {
                transform: translateX(25%);
            }

            100% {
                transform: translateX(-28%);
            }
        }
        
li {
    margin: 0;
    list-style: none;
    padding: 0 0 3px 20px;
    background-image: url(/web/img/bullet.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto;
}

sup, .sup {
  color:#B9D0F2;
}

footer {
  text-align:center;
  border-top: 5px solid #00244d;
      border-left: 5px solid #00244d;
      border-right: 5px solid #001226;
      border-bottom: 5px solid #001226;
      background-color:#001F43;
      margin-bottom:40px;
}

@media only screen and (max-width: 1960px) {
    span {
      display:inline-block;
    }
}
a {
  text-decoration:underline;
  color:white;
}
a:hover {
  border:2px solid white;
  margin:10px;
}
.custom {
  border-top:2px white solid;
  max-width:400px;
  margin-bottom:20px;
}

emoji {
  vertical-align:middle;
}

.icon {
width:20px;
height:auto;
margin-right:5px;
}

::selection {
  background-color:white;
  color:#001f43;
}

table {
    height: 100%;
    background-color:#001F43;
    width: 100%;
    padding:5px;
}

th {
    background-color: #001226;
    font-weight: bold;
}
td, th {
  border: 2px solid #00244d;
  padding:10px;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  text-align:center;
}