/* 

    ### NOTES ###

    This css has been made with the mobile-first approach, which means that the modifications for the desktop look is at the end of this document

*/

@font-face {
    font-family: Comfortaa;
    src: url(../fonts/Comfortaa-VariableFont_wght.ttf);
}

/*CSS RESET*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

html {
    scroll-behavior: smooth;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*

    ### DEFAULT STYLING ###

*/

html {
    --maxWidth: 1284px;
}

body {
    font-family: Comfortaa, Ubuntu, Arial, Helvetica, sans-serif;
    background-color: #000000;
    margin: 0px;
}

section {
    padding-bottom: 40px;
}

h1, h2, h3 {
    text-align: center;
}

h1 {
    line-height: 1.7;
    font-size: 280%;
    font-weight: bold;
}

h2 {
    line-height: 1.3;
    font-size: 220%;
    font-weight: bold;
    margin: 35px 20px 10px 20px;
}

h3 {
    line-height: 1.2;
    font-size: 160%;
    margin: 20px 20px 10px 20px;
}

h4 {
    line-height: 1.2;
    margin: 20px;
    font-weight: bold;
}

p {
    line-height: 1.5;
    margin: 10px 20px;
}

li {
    line-height: 1.3;
    padding: 5px 0px;
}

a {
    text-decoration: none;
    color: inherit;
}
.flexbox {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.flexbox .item {
    width: 80%;
}
.svg_center {
    display: block;
    width: 260px;
    margin: auto;
}

.grid .containter {
    display: grid;
    justify-content: center;
    /*Make the grid smaller than the container*/
    grid-gap: 5px;
    padding: 5px;
    font-weight: bold;
}

/*

    ### STYLING FOR EACH SECTION ###

*/

/*      
    ### NAVIGATION MENU BAR ###
*/

.navbar {
    background-color: #242424e5;
    font-weight: bold;
    font-size: 18px;
    width: 100%;
    z-index: 1;
    text-align: center;
}

.navbar a {
    /*in small screens "Αρχική Σελίδα" goes to the left instead of being in the middle*/
    float: left;
    border-style: solid;
    border-width: 8px 0px 0px 0px;
    padding: 10px;
}

/*This makes all the links dissapear except for the first one*/

.navbar a:not(:first-child) {
    display: none;
}

/*This is the humberger icon*/

.navbar .icon {
    color: #2ca5d9fc;
    padding: 15px 40px 15px 50px;
    border-style: none;
    float: right;
}

.navbar a.icon {
    /*This makes the humberger icon appear*/
    display: block;
}

/* The "responsive" class is added to the navigation menu with JavaScript when the user clicks on the icon. This class makes the menu look good on small screens by displaying the links vertically instead of horizontally. It is essentially the vertical menu the user sees when they click the humberger icon on small screens.*/

.navbar.responsive a {
    /*In the default menu for mobile you can only see the first link "ΑΡΧΙΚΗ ΣΕΛΙΔΑ" and the burger icon. This is achived by hiding the other links with the class (.navbar a:not(:first-child) {display: none;}). When the user clicks the burger icon the class "responsive" is added to the navbar which makes the links appear again. Then It changes the width of the items to 100% from 20% so that every link will have it's own row. When they click the humberger icon again the "responsive" class is removed and the navbar has it's default look again*/
    display: block;
    /*100% means each link will be one row*/
    width: 100%;
    /*Normaly this would be true: 
    width 100px + margin 10px + padding 10px = 120px.
    
    I used to include in my css the code:
    *{box-sizing: border-box;}

    This would make it so that when I gave a width to an element it would include the margin and the padding, so in the example above the answear would be 100px instead of 120px
    
    I included it because if I didn't the menu in small screens would bug out. I later found out that the problem was that:

        1.One or more of the sections accidentally became bigger than the screen. The menu followed suit because earlier I had made it have 100% width. I fixed that.

        2.The padding I was using for the menu-items made them become bigger than the screen (when each item is 100% width), pushing the center to the right. Normally I wouldn't notice, but when I included the burger menu icon I saw it wasn't aligned correctly and pushed to the right. Before I knew about the "box-sizing: border-box;" I tried to force it to align by adding padding. When I came around to fixing the root of the problem I decided the easiest solution was to remove the padding on the sides. I could't remove it in the navbar directly because the padding was needed everywhere else.
    */
    padding: 10px 0px;
}

.sticky {
    /*This makes the menu stick to the top*/
    position: fixed;
    top: 0;
    /*This makes the navbar be on top on the body and especialy the ".header .container". Without it the content gets on top of it, hiding it.*/
}

.anchor_container {
    /*This class is the container for .anchor*/
    position: relative;
}

/*This class acts like an anchor.*/

.anchor {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    /*The menu need to start a little bit higher or else it hides some content*/
    top: -48px;
    left: 0;
    visibility: hidden;
}

/* 
    - NAVIGATION DEFAULT COLORS -
*/

.navbar a.blue {
    border-color: #2ca5d9fc;
    color: #2ca5d9fc;
}

.navbar a.green {
    border-color: #01D572;
    color: #01D572;
}

.navbar a.orange {
    border-color: #ff883d;
    color: #ff883d;
}

.navbar a.pink {
    border-color: #ff66a6;
    color: #ff66a6;
}

.navbar a.purple {
    border-color: #E6A8FF;
    color: #E6A8FF;
}

/* 
    - NAVIGATION HOVER AND ACTIVE COLORS ("Hover" is for desktop users, "Active" is for mobile users so that they see what they are pressing) -
*/

.navbar a.blue:hover, .navbar a.blue:active {
    border-color: #81d3ff;
    color: #81d3ff;
}

.navbar a.orange:hover, .navbar a.orange:active {
    border-color: #ffa268;
    color: #ffa268;
}

.navbar a.pink:hover, .navbar a.pink:active {
    border-color: #ff81a9;
    color: #ff81a9;
}

.navbar a.purple:hover, .navbar a.purple:active {
    border-color: #d772ff;
    color: #d772ff;
}

.navbar a.green:hover, .navbar a.green:active {
    border-color: #33da8c;
    color: #33da8c;
}

/*
    ### HEADER ###
*/

.header {
    padding-top: 80px;
    text-align: center;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(56, 56, 56, 1) 100%);
}

.header .header_image {
    background-image: url(../img/svg/header_programmer_desk_small.svg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 25px;
    height: 400px;
    width: 100%;
    margin: auto;
}

/*This is for the logo*/

.header img {
    display: block;
    width: 100px;
    margin: auto;
}

.header h1, .header .text div {
    color: #8ed5cd;
}

.header .text div {
    display: inline-block;
    font-size: 120%;
    background-color: #313131;
    line-height: 1.8;
    font-weight: bold;
    padding: 8px 18px;
    margin: 10px 20px;
}

/*
    ### SERVICES ###
*/

.services {
    margin: auto;
    max-width: 960px;
    background-color: #f7f7f7;
    border-radius: 50px 50px 0px 0px;
    /*This stops the h2 margin from collapsing. It is 0.05 so that it won't show on the browser*/
    padding-top: 0.05px;
}
.services .container{
    display: grid;
    grid-template-columns: 90%;
    justify-content: center;
    grid-gap: 20px;

}
.services h3{
    font-size: 150%;
}
.services hr {
    border: 1px solid #dfdfdfe1;
}

.services ul{
    text-align: left;
}
/*
    ### PRODUCTS ###
*/

.products {
    color: #cecece;
}

.products .title, .products i {
    color: #ffffff;
    font-weight: bold;
}

.products {
    background-color: #34173f;
}

.products p {
    margin: 20px 0px 10px 0px;
}

.products .flexbox {
    margin-top: 30px;
}

.products .item {
    margin: 10px 20px;
}

.products .title {
    background: rgb(1, 125, 86);
    background: linear-gradient(28deg, rgba(1, 125, 86, 1) 0%, rgba(37, 118, 158, 1) 100%);
    border-radius: 50px;
    font-size: 150%;
    display: flex;
    justify-content: center;
}

.products .title {
    background: linear-gradient(223deg, #017d56, #287faa);
    background-size: 400% 400%;
    -webkit-animation: passive 7s ease infinite;
    -moz-animation: passive 7s ease infinite;
    -o-animation: passive 7s ease infinite;
    animation: passive 7s ease infinite;
}

@-webkit-keyframes passive {
    0% {
        background-position: 0% 92%
    }
    50% {
        background-position: 100% 9%
    }
    100% {
        background-position: 0% 92%
    }
}

@-moz-keyframes passive {
    0% {
        background-position: 0% 92%
    }
    50% {
        background-position: 100% 9%
    }
    100% {
        background-position: 0% 92%
    }
}

@-o-keyframes passive {
    0% {
        background-position: 0% 92%
    }
    50% {
        background-position: 100% 9%
    }
    100% {
        background-position: 0% 92%
    }
}

@keyframes passive {
    0% {
        background-position: 0% 92%
    }
    50% {
        background-position: 100% 9%
    }
    100% {
        background-position: 0% 92%
    }
}

.products .title:hover, .products .title:active {
    background: rgb(109, 16, 73);
}

.products i {
    font-size: 40px;
    padding: 10px;
}

.products .text {
    padding: 18px 0px;
}

/*
    ### SAAS ###
*/

.saas {
    background-color: #fcd86e;
    color: #431e52;
}

.saas h3 {
    margin-bottom: 20px;
}

.saas h4 {
    margin: 10px 20px;
}

.saas hr {
    border: 1px solid #431e52;
}

.saas .item{
    width: 100%;
    margin: 0px 20px;
}
.saas .item{
    margin-top: 20px;
}
.saas i {
    font-size: 60px;
    padding: 0px 10px 0px 10px;
}

/*
    ### CONTACT ###
*/

.contact {
    background-color: #495cb8;
}

.contact h2, .contact div, .contact a {
    color: #fcd86e;
}

.contact a {
    font-weight: bold;
}

.contact p {
    color: #cee4ee;
    font-size: 120%;
    text-align: center;
}

.contact a:hover {
    color: #cfa61e;
}

/*
    ### ABOUT ###
*/

.about {
    background-color: #0e1224;
    color: #8D9CE7;
}

/*
    ### FOOTER ###
*/

.footer {
    text-align: center;
    background-color: #05040f;
    padding: 30px 5px 20px 5px;
}

.footer a, .footer hr {
    color: #8D9CE7;
}

.footer a:hover {
    color: #ffffff;
}

.footer hr {
    border: 1px solid;
    width: 80%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.grid .terms {
    grid-template-columns: 100px 110px;
}

.grid .social {
    grid-template-columns: 50px 50px 50px;
    font-size: 40px;
}


/*min width σημαίνει ότι αυτά θα ισχύουν όσο x > 1000*/

/*max width σημαίνει ότι αυτά θα ισχύουν όσο x < 1000*/

@media all and (max-width: 460px) {
    h2 {
        font-size: 160%;
        margin-top: 40px;
    }
    h3 {
        font-size: 140%;
    }
    .header {
        padding-top: 60px;
    }
    .header img {
        width: 80px;
    }
    .header h1 {
        font-size: 230%;
    }
    .header .text div {
        padding: 5px 15px;
        margin: 5px 20px;
        /*The text will fold less*/
        font-size: 100%;
    }
    .header .header_image {
        background-position: right;
        background-position-x: -120px;
        background-position-y: 20px;
    }
    
    .products .container .title, .products .button {
        width: 90%;
    }
    .products .description {
        margin: 10px 0px;
    }
    .products p {
        margin: 0px;
    }
    .contact h2 {
        font-size: 200%;
    }
}
@media all and (min-width: 460px) {
    .services .container{
        grid-template-columns: 70%;
    }
}
@media all and (min-width: 750px) {
    .header .text {
        /*With this the text won't fold. It will stay where I want it to*/
        width: 520px;
        margin: auto;
    }
    .services .container{
        grid-template-columns: 40% 40%;
    }
    .services h3{
        width: 85%;
    }
    .services ul{
        width: 90%;
        margin: auto;
        padding-left: 20px;
    }
    .products .container .title, .products .button {
        width: 40%;
    }
    .flexbox .item {
        width: 42%;
    }
    .saas .item{
        width: 60%;
    }
}

@media all and (min-width: 820px) {
    .navbar {
        text-align: center;
        display: flex;
        background-color: #202020;
    }
    .navbar a {
        width: 20%;
        padding: 20px 5px;
    }
    .navbar a:not(:first-child) {
        display: block;
    }
    .navbar a.icon {
        display: none;
    }
    .anchor {
        /*The menu need to start a little bit higher or else it hides some content*/
        /*I channge it here because on the desktop view the bar is taller*/
        top: -65px;
    }
    .flexbox .item {
        width: 45%;
    }
    .services h3{
        font-size: 160%;
    }
    .saas .item{
        width: 40%;
    }
    .about p {
        width: 80%;
        margin: auto;
    }
    .footer hr {
        width: 40%;
    }
}

@media all and (min-width: 950px) {
    .header .container {
        width: 950px;
        height: 450px;
        background-image: url(../img/svg/header_programmer_desk_small.svg);
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: 45px;
        margin: auto;
    }
    .header .container div:nth-child(1) {
        float: left;
        position: relative;
        margin-top: 15px;
    }
    .header .container div:nth-child(2) {
        display: none;
    }
    .saas .container, .saas>div {
        width: 95%;
        margin: auto;
    }

}
@media all and (min-width: 1200px) {
    .products .flexbox {
        width: 70%;
        margin: auto;
    }
    .products .item {
        width: 45%;
    }
    .products .title {
        width: 65%;
        margin: auto;
    }
    .saas .item {
        padding: 20px;
        display: flex;
    }
    .saas .title{
        width: 40%;
    }
    .saas .description{
        width: 60%;
    }
}
@media all and (min-width: 1500px) {
    .saas .container, .saas>div {
        width: 70%;
        margin: auto;
    }
    .about p {
        width: 60%;
    }
    .footer hr {
        width: 30%;
    }
    .products .flexbox {
        width: 60%;
    }
}