* {
    box-sizing: border-box; 
    margin: 0px;
    margin-top: 0px;
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;

  }

  body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
     background-color: #252525;
     padding: 20px;
  }

  html {
    scroll-behavior: smooth;
    position: relative;
    min-height: 100%;
  }

  #wrapper {
    padding-left: 5%;
    padding-right: 5%;
  }

  #navigacija {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  #navigacija a {
    text-decoration: none;
    margin-right: 20px;
    background: linear-gradient(#F6D365, #FDA085);
    padding: 10px 30px;
    border-radius: 10px;
    cursor: pointer;
    color:black;
    margin-bottom: 10px;
    padding: 20px;
    font-size: 16pt;
  }
#navigacija a:focus {
  font-weight: bold;
  background: linear-gradient(#F6D365, #FDA085);
    outline: none;
  -webkit-box-shadow: inset 0px 0px 7px black;
     -moz-box-shadow: inset 0px 0px 7px black;
          box-shadow: inset 0px 0px 7px black;
}

.link:active {
  font-weight: bold;
  background: linear-gradient(#F6D365, #FDA085);
    outline: none;
  -webkit-box-shadow: inset 0px 0px 7px black;
     -moz-box-shadow: inset 0px 0px 7px black;
          box-shadow: inset 0px 0px 7px black;
}
#swift_prostor {
  margin: 0 auto;
  text-align: center;
  display: block;
  height: 30px;
  margin: 20px;
  margin-top: 20px;
}
#motion-demo {
  animation: myfirst_mobile 5s infinite;
 -webkit-animation: myfirst_mobile 5s infinite;
  position: relative;
  background-image: url(images/swift2.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
  display:inline-block;
  margin:0 auto;
  width: 100px;
  height: 100px; 
}

@keyframes myfirst {
  0%   {left: 0px;}
  25%  {left: 300px; }
  50% { -webkit-transform: rotateY(180deg) ;} 
  75%  {left: -300px;}
  100% {left: 0px; top: 0px ;}
}

@-webkit-keyframes myfirst {
  0%   {left: 0px; }
  25%  {left: 300px;}
  50% { -webkit-transform: rotateY(180deg); } 
  75%  {left: -300px; }
  100% {left: 0px; top: 0px;}
}

@keyframes myfirst_mobile {
  0%   {left: 0px; } 
  25%  {left: 180px; }
  50% { -webkit-transform: rotateY(170deg); } 
  75%  {left: -180px;}
  100% {left: 0px; top: 0px;}
}

@-webkit-keyframes myfirst_mobile  {
  0%   {left: 0px; }
  25%  {left: 180px ;}
  50% { -webkit-transform: rotateY(180deg) ;} 
  75%  {left: -180px;}
  100% {left: 0px; }
}

#phone{
  display: flex;
  background: url(images/wallpaper.jpeg);
  border-style: solid;
  border-color: rgb(190, 190, 190);  border-width: 30px 10px;
  border-radius: 20px;
  padding: 10px;
  width: 300px;
  height: 500px;
  margin: 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  overflow-y: scroll;
  /* box-shadow: 10px 30px 45px 4px grey; */
  box-shadow: rgba(73, 114, 117, 0.473) 0px 3px 6px, rgba(27, 119, 138, 0.5) 2px 7px 6px;
  margin-bottom:20px;
  scrollbar-width: thin;
  margin-left: 30px; 
}

#about_section {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 50px;
  margin-top: 50px;
}

#prozor1, #prozor2 {
  
  margin:0 auto;
  margin-top: 50px;
}


.fakeButtons {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  position: relative;
  top: 6px;
  left: 6px;
  background-color: #ff3b47;
  border-color: #9d252b;
  display: inline-block;
  
}

.fakeMinimize {
  left: 11px;
  background-color: #ffc100;
  border-color: #9d802c;
}

.fakeZoom {
  left: 16px;
  background-color: #00d742;
  border-color: #049931;
}

.fakeMenu {
  width: auto;
  box-sizing: border-box;
  height: 25px;
  background-color: rgb(234, 234, 234);
  margin: 0 auto;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-items: start;
}

.fakeScreen {
  display: flex;
  flex-direction: column;
  background-color: #002636;
  box-sizing: border-box;
  width: auto;
  margin: 0 auto;
  padding: 30px;
  margin-bottom: 30px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 6px, rgba(0, 0, 0, 0.5) 2px 7px 6px;
  height: auto; 
  color: white;
}

p {
  position: relative;
  text-align: left;
  font-size: 16pt;
  font-family: monospace;
  /* white-space: nowrap; */
  /* overflow: hidden; */
  /* width: 0; */
}

span {
  color: #fff;
  font-weight: bold;
}


#phone-preview{
display: flex;
background-color: black;
background: url(images/placeholder.png);
background-position: center;
background-size: contain;
border-style: solid;
border-color: rgb(190, 190, 190);
border-width: 30px 10px;
border-radius: 20px;
padding: 10px;
width: 220px;
height: 490px;
margin: 0 auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
box-shadow: rgba(88, 115, 119, 0.585) 0px 3px 6px, rgba(33, 108, 111, 0.5) 2px 7px 6px;
/* box-shadow: 10px 30px 45px 4px grey; */
margin-bottom:20px;
margin-left: 30px; 
}

#clock {
background: rgba(25, 25, 25, .5);
color: white;
width: 100%;
text-align: left;
vertical-align: middle;
height:100px;
font-size: 16px;
border-radius: 10px;
line-height: 40px;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
padding:7px;
padding-left: 20px;
margin: 10px;
margin-bottom: 4px;
}

#blue {
  background-color: rgb(11, 65, 95);
  width: 80px;
  height: 80px;
  border-style: solid;
  border-radius: 10px;
  border-width: 1px;
  border-color: black;
  margin: 5px;
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 75px;
  box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.2);
  transition: transform .6s ease-in-out;
}
#blue:hover {
cursor: pointer;
transform: scale(1.1); 
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.0);
}
#red {
  background-color: rgb(198, 72, 53);
  width: 80px;
  height: 80px;
  border-style: solid;
  border-radius: 10px;
  margin: 5px;
}

#main {
  display: flex;
  flex-direction: row;
  margin: 80px;
  margin-top: 70px;

}
#main > article {
  flex: 2; 
}

article {
  margin-left: 30px;
  background-color: transparent;
  flex-basis:  3;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-content: space-between;
}

article > * {
  margin-bottom: 15px;
}

article h3 {
  color: rgb(17, 42, 89);
  margin: 10px;
}
article #tehnologije {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#tehnologije #teh_item {
  padding: 10px;
  /* border: 1px solid rgb(255, 149, 0); */
  /* background-color: rgb(189, 224, 254); */
  background: linear-gradient(#6A85B6, #BAC8E0);
  color:rgb(0, 0, 0);
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 4px 0px inset;    
  border-radius: 10px;
  margin: 10px;
}
#main > aside {
  flex: 0 0 20vw;
  flex-basis: 1;

}
#main > nav {
  order: -1;
}

#naglasen_tekst {
  font-size: 25px;
  font-weight: bold;
  background: -webkit-linear-gradient(#24F598, #009EFD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#naglasen_tekst_sadrzaj {
  font-size: 25px;
  font-weight: bold;
  background: -webkit-linear-gradient(#77d8ff, #d8a2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#naglasen_tekst_kontakt {
  font-size: 25px;
  font-weight: bold;
  background: -webkit-linear-gradient(#f7bf47, #f67a32);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.scroll-container {
  position: absolute;
  top: 0;
  right:0;
  height: 100%;
}

/* // to hide the button when page first loaded */
.scroll-container:before {
  content: '';
  display: block;
  height: 100vh;
  pointer-events: none;
}

/* // fixed to right bottom of page */
.scroll-container a {
  position: sticky;
  top: 88vh;
  cursor: pointer;
  font-size: 20px;
  z-index: 100;
}
#contact_info {
  display: flex; flex-direction:row; justify-content: space-around;
}


.oddboxinner{
  /* transform: rotate(-2deg); */
  padding: 20px;
}

#gh_link {
  
  /* Create the gradient. */
  color:#5cedf5;
  font-size:50px;
}
#ld_link {
  color:#5cedf5;
  font-size:50px;
}

.box3{
  border-width: 5px 3px 3px 5px;
  border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
  transform: rotate(2deg);
  margin: 0 auto;
  width: auto;

}

.box{
  margin:25px;
  width:auto;
  height:auto;
  margin: 0 auto;
  margin-top: 50px;
  text-align: center;
  background: transparent;
  border: 4px solid #f37a3a;
  border-color: #f37a3a;
  color:rgb(8, 70, 127);
  margin-left: 25%;
  margin-right: 25%;
  word-wrap: break-word;
}

#contact_info {
  display: flex; flex-direction:row; justify-content: space-around;
}

/* #contact_part {
  margin-bottom: 70px
} */
/* responsive */
@media screen and (max-width: 600px) {
  #wrapper {
    padding-left: 5%;
    padding-right: 5%;
  }
  #navigacija {
    flex-direction: column;
   
  }
  #navigacija a{
    width: 100%;
    text-align: center;
  }
  article {
    margin-left: 0px;
  }
#phone, #phone-preview{
  margin: 0 auto;
  margin-bottom:30px;
}

#main {
  flex-direction: column;
  padding: 0px;
  margin: 50px;
  
}
#contact_part {
  margin-bottom: 50px
}
}

@media screen and (min-width: 300px) and (max-width: 599px){

  #contact_info {
    display: flex; flex-direction:column; justify-content: space-around;
  }  

    #phone, #phone-preview{
      margin: 0 auto;
      padding: 0px;
      margin-bottom:30px;
     
    }
    #phone {
      margin-top:40px;
    }
    #main {
      flex-direction: column;
      padding: 0px;
      margin: 0 auto;
      
    }
    #about_section {
      text-align: center;
      display: flex;
      flex-direction: column;
  }

  #contact {
    margin-bottom: 10px;
  }

  #navigacija {
    margin: 20px;
    padding-left: 0%;
    padding-right: 0%;

  }

  .item {
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    width: auto;
    margin: 20px;
  }

  .box{

    margin-left: 5%;
    margin-right: 5%;

  }

  #motion-demo {
    animation: myfirst_mobile 5s infinite;
    -webkit-animation: myfirst_mobile 5s infinite;
    display:inline-block;
    position: relative;
    background-image: url(images/swift2.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    margin:0 auto;
    width: 130px;
    height: 130px; 
  }

  }



  @media screen and (max-width: 1000px) and (min-width: 601px) {

    #motion-demo {
      animation: myfirst_mobile 5s infinite;
      -webkit-animation: myfirst_mobile 5s infinite;
      display:inline-block;
      position: relative;
      background-image: url(images/swift2.png);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center; 
      margin:0 auto;
      width: 130px;
      height: 130px; 
    }

    #phone {
      margin: 0 auto;
      margin-bottom: 50px;
      margin-top:40px;
    }
    #phone-preview {
      margin: 0 auto;
      margin-bottom:80px;

    }

    #main {
      flex-direction: column;
      padding: 0px;
      margin: 0 auto;      
    }
    #about_section {
      text-align: center;
      display: flex;
      flex-direction: column;
  }

}
  
  @media screen and (min-width: 1001px) {

    #main {
        flex-direction: row;
        margin-left: 40px;
        margin-right: 40px;
        margin-bottom: 40px;

    }
    #phone, #phone-preview{
      margin: 0 auto;
    }
    #prozorcici {
      text-align: center;
      display: flex;
      flex-direction: row;
  }
  #prviRed {
    display: flex;
    flex-direction: row;
  }
  }