/* This is the Web skills page which was validated from https://jigsaw.w3.org/css-validator/
on 29/05/23 by Toby Sriratanakoul */

* {
    letter-spacing: 1px;
    font-size: 12px;
    line-height: 20px
}

table {
	border-collapse: collapse;
	border: thin solid transparent;
	width: 90%;
    height: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 5%;
    margin-bottom: 5%;
}
tr {
    color: rgb(105,105,105);
    text-decoration: none;
    box-shadow:
    2px 2px 0.5em rgba(122, 122, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #4682B4;
}

th, td {
	border: thin solid white;
}

th {
    height: 100px;
    color: rgba(0, 0, 0, 0.72);
    text-decoration: none;
    font-weight: bold;
    box-shadow:
    2px 2px 0.5em rgba(122, 122, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #4682B4;
}

td {
	text-align: left;
}

td.a {
    border: 1px solid #4682B4;
    background-color: #FDB813;
    border-style: double;
    max-width: 300px;
    color: white;
    font-family: 'Courier New';
}

td.b{
    width: 50%;
}

.width1 {
	width: 20%;
}

.width2 {
	width: 80%;
}

.bg {
    height: 95%;
	width: 95%;
    background: linear-gradient(to top, rgba(24,54,85,1.00), transparent 15%);
}

body {
	height: 100%;
    width: 100%;
/*    overflow: auto;*/
    overflow-x: hidden; 
}

html {
	height: 100%;
    width: 100%;
    overflow: auto;
}

.h1 {
	font-family: 'Montserrat Alternates';
	color: black;
	background-color: transparent;
	font-weight: bold;
	font-style: normal;
	font-size: 500%;
	margin:auto;
	width:auto;
	height:auto;
	text-align: center;
	text-decoration: underline;
    background-color: transparent;
}

h2 {
    font-size: 120%;
    margin:auto;
    width:auto;
    height:auto;
    text-align: left;
    color: #0036B0;
}

.h3 {
	color: black;
	background-color: transparent;
	font-weight: bold;
	font-style: normal;
	font-size: 100%;
	margin:auto;
	width:auto;
	height:auto;
}

h4 {
    color: #145CFC;
}

h5 {
    color: #0d96e6;
}

nav {
    z-index: 1;
    position: relative;
	margin: auto;
	padding: 3%;
    height: auto;
	text-align: center;
    color: rgba(73, 45, 21, 0.72);
    text-decoration: none;
    font-weight: bold;
    box-shadow:
    2px 2px 0.5em rgba(122, 122, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #4682B4;
}

/* Tooltip container */
 .tooltip {
    position: relative;
    display: inline-block;
    color: rgb(8, 143, 143);
    text-decoration: none;
    font-weight: bold;
    box-shadow:
    2px 2px 0.5em rgba(122, 122, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #cacaca;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 100%;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 100%;
    position: absolute;
    bottom: 100%;
    font-weight: bold;
    color: rgba(45, 00, 0, 0.55);
    text-decoration: none;
    box-shadow:
    2px 2px 0.5em rgba(122, 122, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #4682B4;
    background-color: white;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* mouse over link */
a:hover {
    color: red;
}

button {
    border: 1px solid #4682B4;
    padding:2.5%;
    background-color:#ffffff;
    text-decoration:none;
    display:inline-block;
    font-size:75%;
    text-align:center;
    border-radius: 8px;
}

button:hover {  
    color:#f3f3f1;
    background-color: black;
}

p.a {
/*    font-family: Times, Arial, Helvetica, sans-serif;*/
}

p.b {
    background-color: yellow; 
    border: solid;
    padding: 1%;
} 

img {
	height: 100%; 
	width:100%;
}

img.a {
	height: 10%;
	width: 16%;
}

img.b {
	height: 1000px;
	width: 700px;
}

img.c1 {
    z-index: -1;
	padding:1%; 
    width:138px; 
    height:92px;
    color: #e9e9e9;
    text-decoration: none;
    font-weight: bold;
    text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b7b7b7;
    box-shadow:
    2px 2px 0.5em rgba(98, 73, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.75),
    inset -1px -1px 0 rgba(0, 0, 0, 0.34);
    border: 1px solid #cacaca;
    background:
    -o-linear-gradient(
    -185deg,
    #dedede 0%,
    #ffffff 16%,
    #dedede 21%,
    #ffffff 24%,
    #caa1de 27%,
    #dea1ca 30%,
    #dedede 38%,
    #ffffff 45%,
    #ffffff 60%,
    #dedede 72%,
    #ffffff 80%,
    #dedede 84%,
    #caa1de 93%,
    #dea1ca 100%);
  background:linear-gradient(
    -185deg,
    #dedede 0%,
    #ffffff 16%,
    #dedede 21%,
    #ffffff 24%,
    #caa1de 27%,
    #dea1ca 30%,
    #dedede 38%,
    #ffffff 45%,
    #ffffff 60%,
    #dedede 72%,
    #ffffff 80%,
    #dedede 84%,
    #caa1de 93%,
    #dea1ca 100%
    );
}

img.c2 {
	padding:1%; 
    width:138px; 
    height:92px;
    color: rgba(0, 0, 0, 0.72);
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 0 #ffffff;
    box-shadow:
    2px 2px 0.5em rgba(122, 122, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #cacade;
    background: -o-linear-gradient(
    -185deg,
    #dedeff 0%,
    #ffffff 16%,
    #dedeff 21%,
    #ffffff 24%,
    #555564 27%,
    #dedeff 36%,
    #ffffff 45%,
    #ffffff 60%,
    #dedeff 72%,
    #ffffff 80%,
    #dedeff 84%,
    #555564 100%
    );
    background: linear-gradient(
    -185deg,
    #dedeff 0%,
    #ffffff 16%,
    #dedeff 21%,
    #ffffff 24%,
    #555564 27%,
    #dedeff 36%,
    #ffffff 45%,
    #ffffff 60%,
    #dedeff 72%,
    #ffffff 80%,
    #dedeff 84%,
    #555564 100%
    );
}

img.c3 {
    z-index: -1;
	padding:1%; 
    width:138px; 
    height:92px;
    color: rgba(56, 13, 0, 0.64);
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 0 #ffffff;
    box-shadow:
    2px 2px 0.5em rgba(122, 98, 55, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #caa145;
    background: -o-linear-gradient(
    -185deg,
    #ffdeca 0%,
    #ffffff 16%,
    #ffdeca 21%,
    #ffffff 24%,
    #de7345 27%,
    #ffdeca 36%,
    #ffffff 45%,
    #ffffff 60%,
    #ffdeca 72%,
    #ffffff 80%,
    #ffdeca 84%,
    #de7345 100%
    );
    background: linear-gradient(
    -185deg,
    #ffdeca 0%,
    #ffffff 16%,
    #ffdeca 21%,
    #ffffff 24%,
    #de7345 27%,
    #ffdeca 36%,
    #ffffff 45%,
    #ffffff 60%,
    #ffdeca 72%,
    #ffffff 80%,
    #ffdeca 84%,
    #de7345 100%
    );
}

img.d {
    height: auto;
    width: auto;
    border: solid;
}

me {
    
}

.icon {
    height: auto;
    width: 20px;
    color: #185a7a;
}

.MyDiv {
    color: rgba(82, 82, 34, 0.72);
    text-decoration: none;
    font-weight: bold;
    box-shadow:
    2px 2px 0.5em rgba(122, 122, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #4682B4;
    text-align: center;
}

.abc:nth-child(even) {
    color: rgb(8, 143, 143);
    text-decoration: none;
    font-weight: bold;
    box-shadow:
    2px 2px 0.5em rgba(172,223,221, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.75),
    inset -1px -1px 0 rgba(0, 0, 0, 0.34);
    border: 1px solid #cacaca;
}

.floating1 {  
    animation-name: floating1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function:ease-in-out;   
}

@keyframes floating1 {
    from { transform: translate(0px,  0px); }
    25%  { transform: translate(50px, 0px); }
    50%  { transform: translate(50px, 50px); } 
    75%   { transform: translate(0px, 50px); } 
    to   { transform: translate(0px, 0px); } 
}

.floating2 {  
    animation-name: floating2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating2 {
    from { transform: translate(0,  200px); }
    33%  { transform: translate(50px, -50px); }
    66%  { transform: translate(-200px, -200px); }
    to   { transform: translate(0,  200px); }  
}

.floating3 {  
    animation-name: floating3;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes floating3 {
    from {
        transform: rotate(0deg) translate3d(150px, 0, 0) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translate3d(150px, 0, 0) rotate(-360deg);
    } 
}

#box1 {
    padding:5%;
    margin-top:5%;
    color: rgba(73, 45, 21, 0.72);
    text-decoration: none;
    font-weight: bold;
    box-shadow:
    2px 2px 0.5em rgba(122, 122, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #4682B4;
}
   
#box2 {
    padding:0% 5% 5% 5%;
    border-radius:1%;
    color: rgba(82, 82, 34, 0.72);
    text-decoration: none;
    font-weight: bold;
/*    text-shadow: 1px 1px 0 #ffdeca;*/
    box-shadow:
    2px 2px 0.5em rgba(122, 122, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #4682B4;
}

legend {
    font-weight: bold;
}

.bq {
    z-index: 1;
    position: relative;
    color: rgba(73, 45, 21, 0.72);
    text-decoration: none;
    font-weight: bold;
    box-shadow:
    2px 2px 0.5em rgba(122, 122, 122, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #4682B4;
    padding: 10px;
}

.carbon {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
    border: 1px solid #565656;
    box-shadow:
    2px 2px 0.5em rgba(0, 0, 0, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
    background: -o-repeating-linear-gradient(
    top, #565656, #131313 2px, #565656 1px
    );
    background: -webkit-repeating-linear-gradient(
    top, #565656, #131313 2px, #565656 1px
    );
    background: repeating-linear-gradient(
    top, #565656, #131313 2px, #565656 1px
    );
}

.box3{
    height: 98px;
    width: 145px;
    float: left;
    overflow: hidden;
    position:relative;
}

.box3:hover .image1{
    filter:blur(0);
    transform: scale(1.1);
    opacity: 0;
}

.box3:hover .image2{
    filter:blur(0);
    transform: scale(1);
    opacity: 1;
}

.wrapper {
    margin-left: 25%;
    margin-right: 25%;
}

.image1 {
    height: 100px;
    width: 100px;
    position: absolute;
    z-index: 2;
    transition: 1s;
    transform-origin: 50%, 50%;
}

.image2 {
    height: 100px;
    width: 100px;
    filter:blur(10px);
    transform: scale(1.1);
    opacity: 1;
    transition: 1s;
}

/*
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(/webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")
}
*/

footer {
	font-size: 75%;
	opacity: 0.7;
	margin: auto;
	text-align: center;
	color: black;
	padding: 1%;
    background-color: darkgrey;
    border: 1px solid #4682B4;
}

#swipe_box {
    overflow-x: hidden;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

.swipe_container{
    display: flex;
    align-items: center;
    overflow-y: hidden;
    height: 300px;
    width: 300px;
    max-height: 300px;
    width: calc(var(--n)*100%);  
    transform: translate(calc(var(--j, 0)/var(--n)*-100% + var(--tx, 0px)));
}

img.e {
    min-width: 10%;
    width: 50%;
    width: calc(100%/var(--n));
    pointer-events: none;
}

.smooth { 
    transition: transform .5s ease-out;
}