:root {
    --header-image: url('/resources/theme/header.png');
    --body-bg-image: url('/resources/backgrounds/capitol.png');
    --content: #43256E;
}

@font-face {
    font-family: IBM;
    src: url('/resources/fonts/IBM_PS-55_re.woff');
}

@font-face {
    font-family: Quiapo;
    src: url('/resources/fonts/Quiapo_v2.woff');
}

@font-face {
    font-family: DOS-V;
    src: url('/resources/fonts/DOS-V_re_ANK24.woff');
}

#flex {
 display: flex;
}

#header {
    width: 100%;
    height: 192px;
    background-image: var(--header-image);

    border: 2px solid #d62828;
}

/* Wrap */
#container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 20px;
    border-radius: 7.5px;
    z-index: 10;
}

/* Links */
#container a {
    color: #666ceb;
    cursor: url(/resources/theme/pointer.png), default;
}

/* Sidebar */
aside {
    font-size: 14px;
    width: 200px;
    height: 545px;
    background-color: #dde6cb;
    background-image: radial-gradient(#b6b6da 1px, transparent 0);
    background-size: 10px 10px;
    background-position: -19px -19px;

    border: 2px solid #d62828;
    overflow-y: auto;

    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Main */
main {
    height: 545px;
    background-color: #dde6cb;
    background-image: radial-gradient(#b6b6da 1px, transparent 0);
    background-size: 10px 10px;
    background-position: -19px -19px;

    border: 2px solid #d62828;

    flex: 1;
    padding: 20px;
    order: 2;
    overflow-y: auto;
}


body {
    font-family: 'IBM';
    margin: 0;
    color: #212c66;

    cursor: url(/resources/theme/cursor.png), default !important;
    
    background-image: var(--body-bg-image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

a:link {
  color: #666ceb;
  text-decoration: none;
}

a:visited {
  color: #d62828;
  text-decoration: none;
}

a:hover {
  color: #d62828;
  cursor: url(/resources/theme/pointer.png), default;
}

* {
    box-sizing: border-box;
}

h1, h2, h3 {
    color: #d62828;
}

h1 {
    font-size: 22px;
}

h2 {
    font-size: 18px;
}

mark {
    color:#666ceb;
    background-color: transparent;
}

a[href^="mailto:"] {
  color:#666ceb;
}

a[href^="mailto:"]:hover {
  color:#d62828;
  cursor: url(/resources/theme/pointer.png), default;
}

.row {
  display: flex;
  gap: 14px;
}

.column {
  flex: 50%;
}

/*Insert Box*/
.box {
    background-color: #eef7db;
    border: 2px solid #d62828;
    padding-left: 10px;
    padding-right: 10px;

    box-shadow: 0px 1px 1px rgba(145, 34, 34, 0.02),
    0px 5px 4px rgba(145, 34, 34, 0.03),
    0px 12px 9px rgba(145, 34, 34, 0.05),
    0px 20px 15px rgba(145, 34, 34, 0.06),
    0px 32px 24px rgba(145, 34, 34, 0.08);

    overflow: hidden;
    text-overflow: ellipsis; 
}

.gallery {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
}

.gallery a {
    display: block;
    width: 90px;
    height: 90px;
    overflow: hidden;
    border-radius: 4px;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery a:hover {
    border: 2px solid #d62828;
}

.navbutton {
    height: 20px;
    cursor: url(/resources/theme/pointer.png), default;
    text-decoration: none;
    color: #dde6cb !important;
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    background: #d62828;
}

.navbutton:hover{
    background: #666ceb;
    color: #dde6cb !important;
}

.navbutton.active {
    background-color: #666ceb;
}

.imgbutton {
    height: 80px;
    width: 500px;
    margin: 5px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    
    padding-right: 10px;
    
    color: #dde6cb;
    font-family: "Quiapo";
    font-size: 26px;

    background-size: cover;
    background-position: center;
    position: relative;
}

.imgbutton.text-only {
    font-size: 50px;
}

.button-logo {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 120px;
    width: auto;
    max-width: 200px;
    z-index: 5;
}

.imgbutton:hover{
    cursor: url(/resources/theme/unavailable.png), default; /* Temporary, will be replaced with pointer.png when I build the project pages*/
}


#lol,
.img2 {
    /* Album cover image (can change the size as needed) */
    position: relative;
    width: 72px;
    height: auto;
    left: 15px;
    color: black;
    z-index: 999;
}

.img1 {
    /* CD image (can change the size as needed) */
    position: absolute;
    width: auto;
    height: 60px;
    top:5px;
    left: 55px;
    z-index: 800;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

.img1:hover {
    cursor: url(/resources/theme/question.png), default;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg); /* Firefox */
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg); /* Safari */
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg); /* Standard */
        transform: rotate(360deg);
    }
}

.img1:hover {
    -webkit-animation: pop 0.3s ease;
    animation: pop 0.3s ease;
}


/*Tilt-Skew FX*/
.tilt {
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
}

.tilt:hover {
    transform: rotate(2deg);
    cursor: url(/resources/theme/question.png), default;
}

/*Shake FX*/
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake:hover {
  animation: shake 0.5s infinite;
  cursor: url(/resources/theme/question.png), default;
}


/* Disable scrollbar */
::-webkit-scrollbar {
    display: none;
}

/* Media Query */
/* -> in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below */

@media only screen and (max-width: 800px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}


/* CRT FX */
.crt::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 1;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

@keyframes flicker {
    0% {
        opacity: 0.27861;
    }

    5% {
        opacity: 0.34769;
    }

    10% {
        opacity: 0.23604;
    }

    15% {
        opacity: 0.10626;
    }

    20% {
        opacity: 0.18128;
    }

    25% {
        opacity: 0.10626;
    }

    30% {
        opacity: 0.18128;
    }

    35% {
        opacity: 0.23604;
    }
}

.crt::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    /*animation: flicker 0.25s infinite;*/
}