/*/Copyright 2024 Adrian J. Wazen/*/
/* Mobile Size */
@media only screen and (min-device-width: 200px) and (max-device-width: 1279px){
html,body {
position:relative;
top:0;
width:100%;
height:100%;
margin:0;
padding:0;
background: rgb(89,89,89);
background: linear-gradient(90deg, rgba(89,89,89,1) 0%, rgba(128,128,128,1) 50%, rgba(89,89,89,1) 100%);
color:white;
overflow: hidden !important;
display:block;
}
#load{
color:white;
width:100%;
height:100%;
display:block;
}
#load h1{
color:white;
position:relative;
top:0;
display:block;
}
#load img{
color:white;
position:relative;
top:0;
display:block;
width:50%;
height:50%;
background-size:50% 50%;
}
.popm {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.pop-content {
background-color: white;
background-repeat:no-repeat;
background-size:100% 100%;
color: black;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
height: auto;
text-align:center;
box-shadow: 0px 0px 10px black;
border:1px solid black;
opacity:0.9;
}
.pop-content h1{
color:black;
}
.pop-content p{
color:black;
text-align:left;
width:70%;
position:relative;
left:15%;
right:15%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#topbar {
position:relative;
top:0;
left:10%;
right:10%;
width:80%;
height:10%;
}
.btn {
position:relative;
left:0;
right:0;
top:2.5%;
bottom:2.5%;
width:25%;
height:5%;
float:left;
font-size:5pt;
color:white;
text-decoration:none;
}
#mainpage {
position:relative;
top:0;
left:8%;
right:10%;
width:80%;
height:80%;
color:white;
background: rgb(75,75,75);
background: linear-gradient(85deg, rgba(75,75,75,1) 0%, rgba(94,94,94,1) 50%, rgba(75,75,75,1) 100%);
-webkit-box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.75);
border:1px solid green;
}
.content {
position:relative;
top:25%;
left:10%;
right:10%;
height:50%;
width:80%;
border:1px solid green;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(65,65,65,1) 100%);
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(18,99,15,1);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(18,99,15,1);
box-shadow: inset 0px 0px 5px 0px rgba(18,99,15,1);
color:white;
overflow-y:scroll;
}
.content h1 {
position:relative;
top:0;
text-align:center;
}
.content p {
text-align: justify;
width:75%;
position:relative;
top:0;
left:12.5%;
right:12.5%;
}
footer {
position:absolute;
bottom:0;
left:0;
right:0;
text-align:center;
display:block;
}
}
/* Tablet Size */
@media only screen and (min-device-height: 200px) and (max-device-height: 719px){
html,body {
width:100%;
height:100%;
margin:0;
padding:0;
background: rgb(89,89,89);
background: linear-gradient(90deg, rgba(89,89,89,1) 0%, rgba(128,128,128,1) 50%, rgba(89,89,89,1) 100%);
color:white;
overflow: hidden !important;
display:block;
}
#load{
color:white;
width:100%;
height:100%;
display:block;
}
#load h1{
color:white;
position:relative;
top:0;
display:block;
}
#load img{
color:white;
position:relative;
top:0;
display:block;
width:50%;
height:50%;
background-size:50% 50%;
}
.popm {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.pop-content {
background-color: white;
background-repeat:no-repeat;
background-size:100% 100%;
color: black;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
height: auto;
text-align:center;
box-shadow: 0px 0px 10px black;
border:1px solid black;
opacity:0.9;
}
.pop-content h1{
color:black;
}
.pop-content p{
color:black;
text-align:left;
width:70%;
position:relative;
left:15%;
right:15%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#topbar {
position:relative;
top:0;
left:10%;
right:10%;
width:80%;
height:10%;
}
.btn {
position:relative;
left:10%;
right:10%;
top:2.5%;
bottom:2.5%;
width:20%;
height:5%;
float:left;
font-size:5pt;
color:white;
text-decoration:none;
}
#mainpage {
position:relative;
top:0;
left:10%;
right:10%;
width:80%;
height:80%;
color:white;
background: rgb(75,75,75);
background: linear-gradient(85deg, rgba(75,75,75,1) 0%, rgba(94,94,94,1) 50%, rgba(75,75,75,1) 100%);
-webkit-box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.75);
border:1px solid green;
}
.content {
position:relative;
top:25%;
left:10%;
right:10%;
height:50%;
width:80%;
border:1px solid green;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(65,65,65,1) 100%);
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(18,99,15,1);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(18,99,15,1);
box-shadow: inset 0px 0px 5px 0px rgba(18,99,15,1);
color:white;
overflow-y:scroll;
}
.content h1 {
position:relative;
top:0;
text-align:center;
}
.content p {
text-align: justify;
width:75%;
position:relative;
top:0;
left:12.5%;
right:12.5%;
}
footer {
position:relative;
top:-4%;
left:0;
right:0;
text-align:center;
display:block;
}
}
/* Desktop Size */
@media only screen and (min-device-width: 1280px) and (max-device-width: 8000px){
html,body {
position:relative;
top:0;
width:100%;
height:100%;
margin:0;
padding:0;
background: rgb(89,89,89);
background: linear-gradient(90deg, rgba(89,89,89,1) 0%, rgba(128,128,128,1) 50%, rgba(89,89,89,1) 100%);
color:white;
overflow: hidden !important;
display:block;
}
#load{
color:white;
width:100%;
height:100%;
display:block;
}
#load h1{
color:white;
position:relative;
top:0;
display:block;
}
#load img{
color:white;
position:relative;
top:0;
display:block;
width:15%;
height:15%;
background-size:15% 15%;
}
.popm {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.pop-content {
background-color: white;
background-repeat:no-repeat;
background-size:100% 100%;
color: black;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
height: auto;
text-align:center;
box-shadow: 0px 0px 10px black;
border:1px solid black;
opacity:0.9;
}
.pop-content h1{
color:black;
}
.pop-content p{
color:black;
text-align:left;
width:70%;
position:relative;
left:15%;
right:15%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#topbar {
position:relative;
top:0;
left:10%;
right:10%;
width:80%;
height:10%;
}
.btn {
position:relative;
left:10%;
right:10%;
top:2.5%;
bottom:2.5%;
width:23%;
height:5%;
float:left;
font-size:10pt;
color:white;
text-decoration:none;
}
#mainpage {
position:relative;
top:0;
left:10%;
right:10%;
width:80%;
height:80%;
color:white;
background: rgb(75,75,75);
background: linear-gradient(85deg, rgba(75,75,75,1) 0%, rgba(94,94,94,1) 50%, rgba(75,75,75,1) 100%);
-webkit-box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.75);
border:1px solid green;
}
.content {
position:relative;
top:25%;
left:25%;
right:25%;
height:50%;
width:50%;
border:1px solid green;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(65,65,65,1) 100%);
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(18,99,15,1);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(18,99,15,1);
box-shadow: inset 0px 0px 5px 0px rgba(18,99,15,1);
color:white;
overflow-y:scroll;
}
.content h1 {
position:relative;
top:0;
text-align:center;
}
.content p {
text-align: justify;
width:75%;
position:relative;
top:0;
left:12.5%;
right:12.5%;
}
footer {
position:absolute;
bottom:0;
left:0;
right:0;
text-align:center;
display:block;
}
}