/* 
    #DB222A     #F30C17
    #1F7A8C     #0B89A3     #43E0FF
    #053C5E     #023B5F     #18A6FF
    #BFDBF7     #BADBFC     #D7EBFF
    #A31621     #B00716
    #060505
    font-family: 'Roboto Condensed', sans-serif;
    font-family: 'Bebas Neue', sans-serif;
*/
html
{
    background-color: #13496d;
    background-image: url('media/main_blue_bg.jpg');
    background-size: cover;
    background-repeat: repeat;
    background-position: center center;
    background-attachment: fixed;
}

div.page_selector
{
    background-color: #309DE0;
    font-size: 24px;
    align-items: left;
    display: flex;
    border-radius: 0px;
    border-width: 5px;
    border-color: #0B1F3A;
    border-style: ridge;
    margin: 10px 0px 10px 0px;

    position: sticky;
    top: 10px;
    z-index: 1000;
}

h3.always_domain
{
    margin-left: auto;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.15em;
    align-items: right;
    padding-right: 20px;

    transform-origin: center;
    transition: transform 0.2s ease-in-out;

    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

h3.always_domain:hover {
    transform: scale(1.05);
}
h3.always_domain:active {
    color: #0063A0;
    transform: scale(0.95);
}

a
{
    font-family: 'Bebas Neue', sans-serif;
    margin-top: 33px;
    margin-left: 20px;
    line-height: 1;
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 24px;
    letter-spacing: 0.07em;
    color: #060505;
    font-weight: bolder;

    transform-origin: center;
    transition: color 0.1s ease, transform 0.2s ease;
}

a:hover {
    transform: scale(1.05);
}
a:active {
    color: #0063A0;
    transform: scale(0.95);
}

h1
{
    font-family: 'Bebas Neue', sans-serif;
    text-align: center;
    text-decoration: none;
    font-size: 44px;
    letter-spacing: 0.07em;
    color: #060505;

    margin-top: 0px;
    margin-bottom: 0px;

    position: sticky;
    top: 33px;
    z-index: 1000;
}

h2
{
    font-family: 'Roboto Condensed', sans-serif;
    color: #e6e6e6;
    text-align: center;
    text-decoration: none;
    font-size: 38px;
    color: #060505;

    margin-top: 0px;
    margin-bottom: 20px;

}

a.steam_link
{
    color: #FBFBFB;
    margin-left: 0;
}

div.main
{
    background-color: #309DE0;
    font-size: 24px;
    align-items: left;
    display: flex;
    border-radius: 0px;
    border-width: 5px;
    border-color: #0B1F3A;
    border-style: ridge;
    margin: 0px 0px 40px 0px;
    padding: 20px 20px 20px 20px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

div.page_selector2
{
    background-color: #309DE0;
    font-size: 24px;
    align-items: left;
    display: flex;
    border-radius: 0px;
    border-width: 5px;
    border-color: #0B1F3A;
    border-style: ridge;
    margin: 10px 0px 10px 0px;
}

a.selected
{
    border-bottom: 0px solid;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;

    border-color: #261aca;
    border-width: 3px;
    border-radius: 0%;
    border-bottom-style: solid;

    transform-origin: center;
    transition: color 0.1s ease, transform 0.2s ease;
}

a.selected:hover {
    transform: scale(1.05);
}
a.selected:active {
    color: #0063A0;
    transform: scale(0.95);
}

a.unselected
{
    border-bottom: 0px solid;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;

    border-color: #261aca63;
    border-width: 3px;
    border-radius: 0%;
    border-bottom-style: solid;

    transform-origin: center;
    transition: color 0.1s ease, transform 0.2s ease;
}

a.unselected:hover {
    transform: scale(1.05);
}
a.unselected:active {
    color: #0063A0;
    transform: scale(0.95);
}

p.object
{
    background-color: #FBFBFB;
    border-radius: 0px;
    border-width: 5px;
    border-color: #053C5E;
    border-style: ridge;
    margin: 0px 0px 40px 0px;
    padding: 20px;
    margin-left: 10px;
    border-radius: 2px;
    width: 85%;
}

p.main_description
{
    margin-left: 40px;
    margin-bottom: 10px;
}

a.download_button
{
    border-width: 5px;
    border-color: #053C5E;
    border-style: solid;
    border-radius: 2px;
    align-items: right;
    float: right;
    padding: 6px;
    background-color: #BFDBF7;
    margin-right: 5%;
    width: 20%;
    text-align: center;
}

p
{
    font-family: 'Roboto Condensed', sans-serif;
}

figure
{
    text-align: left;
    margin: 10px;
}

img.fancy
{
    height: 400px;
    width: auto;
    border-color: #053C5E;
    border-width: 5px;
    border-radius: 2px;
    border-style: ridge;
    margin-left: 20px;
    
    object-fit: cover;
    object-position: center;
}

a.outside_link
{
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 0px;
    margin-left: 0px;
    letter-spacing: 0em;
    color: #151d22;
    text-decoration: underline;
}

/*
video
{
    height: 400px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    border-color: #053C5E;
    border-width: 5px;
    border-radius: 2px;
    border-style: ridge;
    margin: 20px;
    display: flex;
    flex-direction: column;
}
*/

div.video_row
{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

div.video_block p
{
    align-items: left;
    padding-left: 45px;
    margin-bottom: 5px;
    font-size: 18px;
}

div.video_block
{
    padding-top: 15px;
    padding-left: 30px;
}

figure.gif_collection img
{
    height: 400px;
    width: auto;
    border-color: #053C5E;
    border-width: 5px;
    border-radius: 2px;
    border-style: ridge;
    object-fit: cover;
    object-position: center;
    margin: 2px;
    /* width: 500px; */
    cursor: pointer;
    transition: transform 0.2s ease;
}
figure.gif_collection img:hover {
    transform: scale(1.024);
}

div.video_row2 {
    display: inline-block;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}
div.video_row2 video {
    display: block;
    height: 350px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

input
{
    display: block;
    margin: 10px auto;
    width: 40%;
    height: 20px;
    border-radius: 2px;
    border-style: ridge;
}

figure.wojak-pointing
{
    display: flex;
    justify-content: flex-end;
    margin-right: 300px;
    margin-top: 0px;
}

a.half-life_button
{
    font-family: helvetica;
    letter-spacing: normal;
    color: #000000;
    border-width: 5px;
    border-color: #cc5200;
    border-style: solid;
    border-radius: 12px;
    padding: 6px;
    background-color: #ffaa33;
    margin: 30px;
    margin-left: 1%;
    width: 20%;
    text-align: center;
}

div.half-life_button
{
    border-color: #222222;
    border-width: 5px;
    border-radius: 12px;
    border-style: solid;

    background: url("websites/Half-Life/Photos/Gordon_Freeman.png") center / cover no-repeat;

  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black 60%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to right,
    black 0%,
    black 60%,
    transparent 100%
  );
}

p.breaking_bad_mod
{
  background: url("media/BreakingBad_Mod_F.png") center/cover no-repeat;
  color: #FBFBFB;
  text-shadow: 2px 2px 4px rgba(153, 99, 27, 0.7);;
}
p.breaking_bad_wallpaper
{
  background: url("media/BreakingBad_Wallpaper_F.jpeg") center/cover no-repeat;
  color: #FBFBFB;
  text-shadow: 2px 2px 4px rgba(0, 255, 0, 0.7);;
}
p.berserk_mod
{
  background: url("media/Berserk_Mod_F.png") center/cover no-repeat;
  color: #FBFBFB;
  text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.7);;
}
p.chainsaw_man_mod_editable
{
  background: url("media/Chainsaw_Man_Mod_Editable.png") center/cover no-repeat;
  color: #000000;
  text-shadow: 2px 2px 4px rgba(255, 155, 24, 0.7);;
}
p.url-opener
{
  background: #28136d;
  color: #FBFBFB;
  text-shadow: 2px 2px 4px rgba(255, 0, 255, 0.7);;
}

a.breaking_bad_mod_button
{
  background: #694817;
  color: #FBFBFB;
  text-shadow: 2px 2px 4px rgba(153, 99, 27, 0.7);;
  border-radius: 10px;
  border-color: #1b1308;
}
a.breaking_bad_wallpaper_button
{
  background: #13432d;
  color: #FBFBFB;
  text-shadow: 2px 2px 4px rgba(0, 255, 0, 0.7);;
  border-radius: 10px;
  border-color: #0b2017;
}
a.berserk_mod_button
{
  background: #491d1b;
  color: #FBFBFB;
  text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.7);;
  border-radius: 10px;
  border-color: #220a07;
}
a.chainsaw_man_mod_editable_button
{
  background: #fbc68f;
  color: #000000;
  text-shadow: 2px 2px 4px rgba(255, 155, 24, 0.7);;
  border-radius: 10px;
  border-color: #70512f;
}
a.url-opener_button
{
  background: #180c41;
  color: #FBFBFB;
  text-shadow: 2px 2px 4px rgba(255, 0, 255, 0.7);;
  border-radius: 10px;
  border-color: #100630;
}

p.coding
{
    background: url("media/codeing_wallpaper.jpg") center/cover no-repeat;
    color: #FBFBFB;
    text-shadow: 2px 2px 4px rgba(17, 161, 17, 0.7);;
}
a.coding_button
{
    background: #006211;
    color: #FBFBFB;
    text-shadow: 2px 2px 4px rgba(17, 161, 17, 0.7);;
    border-radius: 0px;
    border-color: #002f08;
    border-style: groove;
}

figure.with_background
{
    background: url("media/3d_modelling_wallpaper.jpg") center/cover no-repeat;
    width: 70%;
    border-radius: 10px;
    border-style: hidden;

    position: relative;
    color: #FBFBFB;
    overflow: hidden;
}
p.with_background
{
    background: url("media/3d_modelling_wallpaper.jpg") center/cover no-repeat;
    color: #FBFBFB;
    text-shadow: 2px 2px 4px rgba(17, 161, 17, 0.7);;

    position: relative;
    color: #FBFBFB;
    overflow: hidden;
}
a.threed_modelling
{
    background: #006211;
    color: #FBFBFB;
    text-shadow: 2px 2px 4px rgba(17, 161, 17, 0.7);;
    border-radius: 12px;
    border-color: #002f08;
    border-style: groove;
}

button.fancy_button_no_function {
    background: linear-gradient(
        135deg,
        #0a4d1c,
        #1f8f3a,
        #35d16b
    );

    color: #eafff0;
    text-shadow: 2px 2px 4px rgba(120, 255, 160, 0.6);

    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    border: none;
    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0, 85, 40, 0.45),
        inset 0 2px 4px rgba(112, 112, 112, 0.35);

    cursor: pointer;
    overflow: hidden;

    width: 250px;
    height: 60px;
    margin: 0 70px;

    transform-origin: center;
    transition: all 0.35s ease;
}

button.fancy_button_no_function:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow:
        0 18px 40px rgba(0, 255, 120, 0.55),
        inset 0 3px 6px rgba(255, 255, 255, 0.45);
}

button.fancy_button_no_function:active {
    transform: translateY(-1px) scale(0.98);
}

div.home_page
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

img.smurf_dance_bottom_left,
img.smurf_dance_bottom_right
{
    width: auto;
    height: 400px;
    margin: 0;

    opacity: 0;
    transform: translateY(500px);
    transition: transform 5s ease, opacity 3s ease;
    position: relative;
}
img.smurf_dance_left,
img.smurf_dance_right
{
    width: auto;
    height: 400px;
    margin: 0;

    opacity: 0;
    visibility: hidden;
}
img.smurf_dance_middle
{
    width: auto;
    height: 400px;
    margin: 0;
}
div.smurf_dance
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
div.smurf_dance_music
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

p.copyright
{
    color: #FBFBFB;
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

p.error {
  text-transform: uppercase;
  animation: jitter 13s steps(1) infinite;
  text-shadow:
    2px 0 red,
    -2px 0 cyan,
    1px 1px magenta,
    -1px -1px lime;
}
@keyframes jitter {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); }
  20% { transform: translateX(5px); }
  30% { transform: translateX(0); }
}

div.error
{
    background-image: url('media/warning_line.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
div.server
{
    background-image: url('media/server_enterance.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 20%;
    height: 600px;
}

div.admin
{
    background-image: url('media/warning_line.png'), url('media/codeing_wallpaper.jpg');;
}

input
{
    background: #FBFBFB;
    color: #0B1F3A;
    font-weight: 550;
    font-size: 14px;
    border: solid;
    border-width: 3px;
    border-radius: 12px;
    border-color: #0B1F3A;

    cursor: text;

    width: 700px;
    height: 37px;

    display: flex;
    justify-content: center;
}

button.admin_button
{
    background: #006211;
    color: #FBFBFB;
    text-shadow: 2px 2px 4px rgba(17, 161, 17, 0.7);;
    text-align: center;
    font-weight: 550;
    font-size: 14px;
    border: solid;
    border-width: 3px;
    border-radius: 0px;
    border-color: #002f08;
    border-style: groove;
    width: 300px;
    height: 40px;
    margin: 6px;
    margin-left: 4%;

    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}
button.admin_button:hover{
    transform: scale(1.05);

}
button.admin_button:active {
    background-color: #0a8d1f;
    transform: scale(0.95);
}

div.currently_building
{
    font-family: 'Roboto Condensed', sans-serif;
    margin: 10px;
    margin-left: 30px;
}

ul.currently_building_list li
{
    margin-bottom: 6px;
    cursor: pointer;
    text-shadow: 0 0px 1px rgba(0,0,0,0.8);

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
ul.currently_building_list li:hover {
    transform: scale(1.01);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

div.server_specs
{
    font-family: 'Roboto Condensed', sans-serif;
    margin: 10px;
    margin-left: 30px;
}

div.json_row
{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.videoCard
{
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 6px;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    cursor: pointer;
    background: linear-gradient(45deg, #0b50b1 0%, #0B1F3A 100%);

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.videoCard:hover
{
    transform: scale(1.01);
    box-shadow: 0 4px 16px rgba(0,0,0,0.8);
}
.videoCard:active
{
    transform: scale(1.0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.videoCard video
{
    width: 160px;
    height: 90px;
    border-radius: 4px;
    border-style: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    object-fit: cover;
    margin-right: 15px;
    pointer-events: none;
}

.videoCard .videoTitle
{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    color: #FBFBFB;
    word-break: break-word;
}

.videoOverlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlayContent
{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.videoOverlay .plyr
{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.videoOverlay .plyr video
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
}

#overlayTitle
{
    display: none;
}

#closeOverlay
{
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 48px;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    transition: transform 0.2s, opacity 0.2s;
}
#closeOverlay:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

.plyr {
    --plyr-color-main: #e50914;
}

.plyr__progress input[type=range]
{
    cursor: pointer;
}

.plyr__volume input[type=range]
{
    cursor: pointer;
}

.plyr--video .plyr__controls {
    background: linear-gradient(
        transparent,
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.85)
    );
    border: none;
    padding: 18px;
    opacity: 0;
    transition: opacity 0.25s;
}

.plyr--video:hover .plyr__controls
{
    opacity: 1;
}

.plyr__control:hover
{
    background: rgba(255,255,255,0.15);
}

.plyr__progress__buffer
{
    color: rgba(255,255,255,0.2);
}

.plyr__control[data-plyr="fullscreen"]
{
    transform: scale(1.1);
}

.videoOverlay .plyr,
.videoOverlay .plyr__video-wrapper,
.videoOverlay .plyr video
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
}

.video_block .plyr
{
    height: 400px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    border-color: #053C5E;
    border-width: 5px;
    border-style: ridge;
    margin: 20px;
    overflow: hidden;
}

.plyr__progress input[type=range]
{
    cursor: pointer;
}

.plyr__volume input[type=range]
{
    cursor: pointer;
}

.plyr video,
.plyr__video-wrapper,
.plyr__video-wrapper video
{
    border: none !important;
    border-radius: 0;
    background: black;
    margin: 0;
}

video.normal
{
    width: auto;
    height: 400px;
}

div.mc_row
{
    display: flex;
    align-items: center;
    gap: 15px;
}

div.mc
{
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
                url('media/mc_bg.png');

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 20%;
}

figure.mc
{
    margin-left: 60px;
    position: relative;
    z-index: 1;
}

figure.mc::before {
    content: "";
    position: absolute;
    width: 110%;
    height: 110%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.5);
    filter: blur(40px);
    z-index: -1;
}

p.mc
{
    margin-left: 20px;
    color: white;
}

h1.mc
{
    color: white;
    position: unset;
    z-index: 1;
}

a.mc
{
    margin-left: 3px;
    color: white;
}

div.normbgA /*If you want to edit this typoe ofd thing delete the "A" from the end of normbg*/
{
	background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
                url('media/main_blue_bg.jpg');

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 768px) {
    h1 {
        position: unset;
    }
}