body {
    margin: 0;
    padding: 0;
    background-image: url(../seals/nerpakiss1.jpg);
    font-family: "Verdana", "Tahoma", sans-serif;
    color: #cdd2c8;
}

#screen {
    width: 95%;
    max-width: 1000px;   
    margin: 10px auto;
    background: #445856; /* seal blue */ 
    
    border-width: 2px;
    border-style: solid;
    border-top-color: gray;
    border-left-color:gray;
    border-right-color: #000;
    border-bottom-color: #000;
    
    padding: 0;
}

/* HEADER ------------------------------------------------------- */

header {
    padding: 18px;
    background: #2c3938; /* dark seal blue*/ 
    border-radius: 10px 10px 0px 0px; /*used to curl top left&right corners*/
    border-bottom: 3px solid #3c4145;

    margin:10px 10px 0px 10px; /*order is top, right, bottom, left*/
}

header h1 {
    margin: 0;
    font-size: 22px;
    color: #efefef;
}

.sub {
    margin: 3px 0 0;
    font-size: 12px;
    color: #54a1c5;
}

/* NAVIGATION --------------------------------------------------- */

nav {
    background: #10181b;
    border-bottom: 2px solid #445856;

    border-radius: 0px 0px 10px 10px; /*used to curl bottom left&right corners*/
    margin:0px 10px 10px 10px; /*order is top, right, bottom, left*/
}

nav ul {
    margin: 0;
    padding: 10px;
    list-style: none;
    font-size:14px;

    display: flex; /*make it centered*/
    justify-content: center;
    gap: 20px;       
}

nav li {
    display: inline-block;
}

nav a {
    display: inline-block;
    padding: 10px 14px;
    color: #d2d2d2;
    text-decoration: none;
}

nav a:hover {
    background: #0d1417;
    color: #54a1c5;
}

/* ACTIVE TAB (folder tab style) */
nav a.active {
    color: #54a1c5;
}

/* Make inactive tabs look clearly separate */
nav a {
    border-bottom: 2px solid #0d130d;
}

/* MAIN --------------------------------------------------------- */

main {
    padding: 20px 20px 30px;
}

main h2 {
    margin: 0 0 15px;
    font-size: 14px;
    padding-bottom: 4px;
    border-bottom: 2px solid #e0e0e0;
    color: #e0e0e0;
}

/* BLOCK PANELS ------------------------------------------------- */


.darkbox {
    background: #2c3938;
    color: #cdd2c8;

    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 22px;

    border-width: 2px;
    border-style: solid;
    border-top-color: #000;
    border-left-color:#000;
    border-right-color: gray;
    border-bottom-color: gray;
}

.lightbox{
    background: #445856;
    color: #cdd2c8;

    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 22px;

    
    
    border-width: 2px;
    border-style: solid;
    border-top-color: gray;
    border-left-color:gray;
    border-right-color: #000;
    border-bottom-color: #000;
}

.whitebox{/*whereas the dark/light boxes are the sharp, 3d looking boxes you would see in menus, white/yellow boxes are softer, more natural containers. Yellowbox is like a stickynote*/
    background: #f7f7f7;
    color:#4d4d4d;

    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 22px;

    border:#000 solid 1px;
}

.whitebox h2 {
    border-bottom: 2px solid #4d4d4d;
    color: #4d4d4d;
}

.yellowbox{
    background:#c4c38a;
    color:#4d4d4d;

    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 22px;

    border:#000 solid 2px;
    
    box-shadow: 0px 0px 10px #3a3a3a;/*yellow box is meant to look like a sticky note, it has a shadow because of that.*/
}

.block {
    background: #2c3938;
    
    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 22px;
}

.block h3 {
    margin: 0 0 10px;
    font-size: 13px;
    color: #e9e9df;
    padding-bottom: 4px;
    border-bottom: 1px solid #000;
}

/* MULTI MEDIA BLOCK --------------------------------------------- */
/*
using flexbox for multiple things side by side, first time using it so im going to write stuff down before i forget. 
flex: x; where x is a number makes the element take up that much space (if 3 elements each have flex:1; space will be divided in 3rds)
*/
.media{ 
    display: flex;
    /*
    flex-direction: row-reverse; <- instead of align-items for right->left
    
    align-items: center;  <- centers image
    */
    
    gap: 20px;             

}

/* COLOR ACCENTS */
.block-tag-orange { border-left: 6px solid #5fbbe6; }
.block-tag-red { border-left: 6px solid #8d2b2b; }
.block-tag-light { border-left: 6px solid #4c5844; }
.block-tag-dark { border-left: 6px solid #3e4637; }
/* LINKS AND IMAGES ---------------------------------------------- */
img {
    image-rendering: contain;
    max-width: 100%;
    height: auto;
}

a {
    color: #5fbbe6;
    text-decoration: none;
}

a:hover {
    color: #54a1c5;
    text-decoration: underline;
}

.block a {
    color: #5fbbe6;
    text-decoration: none;
    font-size: 12px;
}

.block a:hover {
    color: #54a1c5;
    text-decoration: underline;
}

footer a{
    color: #939793;
    text-decoration: none;
}
footer a:hover{
    color: #939793;
    text-decoration: underline;
}

/* FONTS --------------------------------------------------------- */
@font-face{
    font-family: "halflife2";
    src: url(../misc/halflife2.ttf)
}

/* FOOTER -------------------------------------------------------- */
footer {
    background: #0c120c;
    color: #6f766f;
    padding: 10px;
    font-size: 10px;
    border-top: 2px solid #000;
    text-align: center;
}

/* DEVICE PROOFING ---------------------------------------------- */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }

    header h1 {
        font-size: 16px;
    }

    nav a {
        padding: 8px 10px;
        font-size: 10px;
    }

    main {
        padding: 15px;
    }

    .block {
        padding: 10px;
    }

    footer {
        font-size: 9px;
    }

    nav a.active {
        top: 0;
        padding-bottom: 10px;
    }
}

@keyframes myAnimation{
    from{text-size: 14px}
    to{text-size: 20px}
}

/*SEAL CUBE*/
#wrapD3Cube {
    width: 250px;
    height: 213px;
    margin: 20px auto;
}
#D3Cube {
    width: 112px;
    height: 112px;
    top: 50px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 112px;
    height: 112px;
    float: left;
    overflow: hidden;
    opacity: 0.85;
}
#side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-image: url(../seals/seal1.jpg);
    background-size: cover;
    border:#000000 solid 2px

}
#side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-image: url(../seals/seal2.jpg);
    background-size: cover;
    border:#000000 solid 2px
}
#side3 {
    transform: translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
    background-image: url(../seals/seal3.jpg);
    background-size: cover;
    border:#000000 solid 2px
}
#side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-image: url(../seals/seal4.jpg);
    background-size: cover;
    border:#000000 solid 2px
}
#side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    background-image: url(../seals/seal5.jpg);
    background-size: cover;
    border:#000000 solid 2px
}
#side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    background-image: url(../seals/seal6.jpg);
    background-size: cover;
    border:#000000 solid 2px
}

#D3Cube {
    -webkit-animation: cubeRotation 5s infinite; /* Safari 4.0 - 8.0 */
    animation: cubeRotation 5s infinite;
}
@-webkit-keyframes cubeRotation {
    0%   {  -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);   }
    50%   { -webkit-transform: rotateX(-22deg) rotateY(-128deg) rotateZ(0deg);  }
    100%   {    -webkit-transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);  }
}
@keyframes cubeRotation {
    0%   {  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);   }
    50%   { transform: rotateX(-22deg) rotateY(-238deg) rotateZ(0deg);  }
    100%   {    transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);  }
}