/* 
    #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;
}

div.page_selector
{
    background-color: #94abf7;
    font-size: 24px;
    align-items: left;
    display: flex;
    border-radius: 0px;
    border-width: 5px;
    border-color: #0a123a;
    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: #0d6efd;
    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: #0d6efd;
    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;

}

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

a.selected
{

    background-color: #94abf7;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-width: 5px;
    border-color: #0a123a;
    border-style: ridge;
    margin: 0px;
    border-bottom: 0px solid;
    padding: 10px;
    padding-bottom: 0px;
    padding-top: 20px;

}
a.selected:hover{
    transform: translateX(20px);

}
a.selected:active {
    color: #0d6efd;
    transform: translateX(-5px);
}

a.unselected
{

    background-color: #94abf7;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-width: 5px;
    border-color: #0a123a;
    border-style: ridge;
    margin: 0px;
    border-bottom: 0px solid;
    padding-bottom: 0px;

}
a.unselected:hover {
    transform: translateX(20px);

}
a.unselected:active {
    color: #0d6efd;
    transform: translateX(-5px);
}

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: #0d6efd;
    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;
}

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: #ffffff;
  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: #ffffff;
  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: #ffffff;
  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: #ffffff;
  text-shadow: 2px 2px 4px rgba(255, 0, 255, 0.7);;
}

a.breaking_bad_mod_button
{
  background: #694817;
  color: #ffffff;
  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: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 255, 0, 0.7);;
  border-radius: 10px;
  border-color: #0b2017;
}
a.berserk_mod_button
{
  background: #491d1b;
  color: #ffffff;
  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: #ffffff;
  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: #ffffff;
    text-shadow: 2px 2px 4px rgba(17, 161, 17, 0.7);;
}
a.coding_button
{
    background: #006211;
    color: #ffffff;
    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: white;
    overflow: hidden;
}
p.with_background
{
    background: url("media/3d_modelling_wallpaper.jpg") center/cover no-repeat;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(17, 161, 17, 0.7);;

    position: relative;
    color: white;
    overflow: hidden;
}
a.threed_modelling
{
    background: #006211;
    color: #ffffff;
    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,
        #1a0274,
        #4122b1,
        #3e12dd
    );
    color: #dcd8ff;
    text-shadow: 2px 2px 4px rgba(179, 145, 243, 0.7);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(13, 71, 197, 0.863),
        inset 0 2px 4px rgba(255, 255, 255, 0.35);

    cursor: pointer;
    transition: all 0.35s ease;
    overflow: hidden;

    width: 250px;
    height: 60px;
    margin: 0;
    margin-left: 70px;
    margin-right: 70px;

    transform-origin: center;
    transition: color 0.1s ease, transform 0.2s ease;
}
button.fancy_button_no_function:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow:
        0 18px 40px rgb(13, 71, 197, 0.863),
        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: white;
    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-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

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

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

    cursor: text;

    width: 700px;
    height: 37px;

    display: flex;
    justify-content: center;
}

button.admin_button
{
    background: #006211;
    color: #ffffff;
    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);
}

a.admin_button
{
    background: #006211;
    color: #ffffff;
    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);
}

/* 
p
{
    background-color: #ff6600;
    margin-left: 20px;
    padding: 20px;
    width: 45%;
    line-height: 20px;
    border-radius: 10px;
    border-width: 4px;
    border-color: #cc5200;
    border-style: solid;
}

h3
{
    color: black;
    margin-left: 307px;
}

h4
{
    color: black;
    margin-left: 35px;
}

ul
{
    color: black;
    width: 100%;
}

ol
{
    color: black;
    width: 100%;
}

li.headcrab
{
    list-style-image: url('./Photos/headcrab.png');
    line-height: 0px;
    margin-left: 50px;
    text-align: left;
}

li
{
    line-height: 25px;
    margin-left: 50px;
    padding-bottom: 0px;
}

table
{
    background-color: #ff6600;
    margin-left: 20px;
    padding: 20px;
    width: 40%;
    border-radius: 10px;
    border-width: 4px;
    border-color: #cc5200;
    border-style: solid;
}

tr.first
{
    background: #ffaa33;
    text-align: center;
}

tr.second
{
    background: #cc5200;
    text-align: center;
}

td.cim
{
    text-align: left;
    padding-left: 2%;
    padding-right: 0px;
}


*/