body{
   background:transparent;
   padding: 0px;
   margin: 0px;
}
#gradient
{
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.navbar {
  background:rgba(255,255,255,0.0125); 
   border-color: transparent;
}
.fill { 
    min-height: 100%;
    height: 100%;
}

.title-effect {
    text-shadow:rgba(0, 0, 0, 0.4) 0px 4px 5px;
    font-size: 14px;
    font-family:signika,sans-serif;
    color:white;
}

.screenshot {
    width:110px;
    height:110px;
    padding:1px;
    margins:5px;
}

.vertical-align {
    display: flex;
    align-items: center;
}
.front-panel {
    width:90%;
    margin-top:15px;
    background-color: rgba(255, 255, 255, 0.16)!important;
    font-size: 12px;
    font-family:signika,sans-serif;
}
.front-panel P {
    padding-left:10px;
    padding-right:10px;
}

.offset-navbar {
    padding-top: 13px; 
}

.active-menu-text {
    text-shadow:rgba(0, 0, 0, 0.4) 0px 4px 5px;
    color:black;
}

#open-popup {padding:20px}
.trans-popup {
  position: relative;
  background: transparent;
  padding: 40px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}

@media (min-width: 500px) {
    .title-effect {
	font-size: 24px;
    }
    .front-panel {
	margin-top:1px;
	width:80%;
    }
    .screenshot {
	width:150px;
	height:150px;
    }
}
@media (min-width: 768px) {
    .title-effect {
	font-size: 23px;
    }
    .front-panel {
	margin-top:5px;
	width:70%;
	font-size: 14px;
    }
    .screenshot {
	width:180px;
	height:180px;
    }
}
@media (min-width: 1280px) {
    .title-effect {
	font-size: 25px;
    }
    .front-panel {
	margin-top:10px;
	font-size: 15px;
    }
    .screenshot {
	width:200px;
	height:200px;

    }
}