@font-face {
    font-family: font;
    src: url(ANDYB.TTF);
}
html{
    --headerHighlight:            
        0px -2px #D19F4A, 
        0px  2px #714C44, 
        2px  0px #96733D, 
       -2px  0px #96733D, 
       -1px -1px #fccd40, 
        1px  1px #4E3427, 
        1px -1px #A27242, 
       -1px  1px #845D3C,
        0px  5px #000000;
    --headerBackground: url(TContTitle.png) no-repeat top, url(TContTitle.png)  no-repeat bottom;
    --textHighlight:
        0px -2px #0000002a, 
        0px  2px #0000002a, 
        2px  0px #0000002a, 
       -2px  0px #0000002a, 
       -1px -1px #0000002a, 
        1px  1px #0000002a, 
        1px -1px #0000002a, 
       -1px  1px #0000002a,
        0px 3px #000000;
    --textHighlightSelect:
        0px -2px 2px #ffffff, 
        0px  2px 2px #ffffff, 
        2px  0px 2px #ffffff, 
       -2px  0px 2px #ffffff, 
       -1px -1px 2px #ffffff, 
        1px  1px 2px #ffffff, 
        1px -1px 2px #ffffff, 
       -1px  1px 2px #ffffff;
}
body, html{
    margin: 0px;
}
body{
    justify-content: center;
    background-image: url("https://terraria.org/static/media/background.ea292d81.jpg");
    background-repeat: no-repeat;
    height: 100%;
    background-size: cover;
    background-attachment: fixed;
}
#logo{
    height: 150px;
    margin: 40px;
    filter: drop-shadow(3px 5px 3px black);
}
#Header{
    margin: auto;
    width: 90%;
    margin-top: 20px;
    text-align: center;
    font-size: 50px;
}
.TContTop{
    background-image: url(TContTop1.png);
    background-repeat: no-repeat;
    background-position: top;
    height: 13px;
}
.TCont{
    margin: auto;
    width: 970px;
    background-image: url(TContBottom1.png), url(TContBody1.png);
    background-repeat: no-repeat, repeat;
    background-position: bottom, center;
    margin-bottom: 60px;
    
}

.TCont > .TSubCont{
    display: flex;
    flex-direction: column;
}
.TCont > .TSubCont > h2 {
    margin: 0px;
    text-align: center;
    font-size: 30px;
    width: 100%;
    font-family: font;
    
    background: var(--headerBackground);
    text-shadow: var(--headerHighlight);
    color: #fff6c4;
    padding-top: 5px;
    padding-bottom: 5px;
}
.TCont > .TSubCont .content{
    display: flex ;
    justify-content: space-between;
    flex-wrap: wrap;
}
.TCont > .TSubCont .content > .right{
    width: 296px;
}
.TCont > .TSubCont .content > .right > .image{
    height: calc(100% - 44px);
    background-size: contain;
}
.TCont > .TSubCont .content > .right > #autoFisher{
    background: url(https://img.itch.zone/aW1hZ2UvMjE2ODYxNy8xMjc5NjgzNy5wbmc=/original/Wb2Yab.png) no-repeat;
    background-position: 0px -19px;
    width: 292px;
    height: 250px;
    transform: translate(5px, 9px);
    background-size: 283px;
}
.TCont > .TSubCont .content > .right > #chatFormater{
    background: url(https://img.itch.zone/aW1hZ2UvMjI0NzczOS8xMzMxOTIzNi5wbmc=/original/yuCrBr.png) no-repeat;
    background-position: 5px 3px;
    width: 100%;
    height: 175px;
    transform: translate(0px, 0px);
    background-size: 282px;
}
.TCont > .TSubCont .content > .right > #modCreator{
    background: url("https://img.itch.zone/aW1hZ2UvMjA4MjM2Ny8xMjI0OTk2OC5wbmc=/original/aHFi5N.png") no-repeat;
    background-position: 5px 3px;
    width: 100%;
    height: 227px;
    transform: translate(0px, 0px);
    background-size: 282px;
}
.TCont > .TSubCont .content > .right > #modLoader{
    background: url("cModLoaderIcon.png") no-repeat;
    width: 100%;
    height: 248px;
}
.TCont > .TSubCont .content > .right > #modLoader3{
    background: url("3ModLoader_image1.png") no-repeat;
    width: 100%;
    height: 480px;
}



.TCont >  h1{
    margin: 0px;
    padding: 2px;
    text-align: center;
    font-size: 38px;
    background: url(TContTitle.png);
    background-repeat: no-repeat;
    background-position: bottom;
    font-family: font;
    text-shadow: 
     0px -2px #D19F4A, 
     0px  2px #714C44, 
     2px  0px #96733D, 
    -2px  0px #96733D, 
    -1px -1px #fccd40, 
     1px  1px #4E3427, 
     1px -1px #A27242, 
    -1px  1px #845D3C,
     0px  5px #000000;
    color: #fff6c4;
}
.TCont >  h2{
    margin: 0px;
    padding: 10px;
    text-align: center;
    font-size: 30px;
    background: url(TContTitle.png), url(TContTitle.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top, bottom;

    font-family: font;
    text-shadow: 
     0px -2px #D19F4A, 
     0px  2px #714C44, 
     2px  0px #96733D, 
    -2px  0px #96733D, 
    -1px -1px #fccd40, 
     1px  1px #4E3427, 
     1px -1px #A27242, 
    -1px  1px #845D3C,
     0px  5px #000000;
    color: #fff6c4;
}
.TCont >  h3{
     margin: 0px;
     padding: 10px;
     text-align: center;
     font-size: 16px;
     color: #888888;
     font-family: font;
     line-height: 15px;

     text-shadow: 
     0px -2px #0000002a, 
     0px  2px #0000002a, 
     2px  0px #0000002a, 
    -2px  0px #0000002a, 
    -1px -1px #0000002a, 
     1px  1px #0000002a, 
     1px -1px #0000002a, 
    -1px  1px #0000002a,
    0px 3px #000000;
}

.text{
    margin: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: calc(970px - 296px);
    text-align: center;
    font-size: 22px;
    color: #d3ecff;
    font-family: font;
    text-shadow:var(--textHighlight);
}
.text::selection{
    color: black;
    text-shadow: var(--textHighlightSelect);
    background-color: rgba(152, 152, 152, 0.168);
}

a{
    transition: all 0.5s;
    color: #92f9ff;
    font-family: font;
    cursor: pointer;
    text-decoration: none;
}
a:hover{
    text-shadow: 0px -2px #000000, 0px  2px #000000, 2px  0px #000000,-2px  0px #000000,-1px -1px #000000, 1px  1px #000000, 1px -1px #000000,-1px  1px #000000;
    cursor: pointer;
}

button{
    transition: all 0.5s;
    background-image: url(ButtonTest.png);
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
    margin-right: 0;
    padding: 0px;
    font-size: 24px;
    height: 44px;
    width: 100%;
    background-color: transparent;
    border: solid transparent;
    color: #92f9ff;
    font-family: font;
    cursor: pointer;
}
button:hover{
    text-shadow: 0px -2px #000000, 0px  2px #000000, 2px  0px #000000,-2px  0px #000000,-1px -1px #000000, 1px  1px #000000, 1px -1px #000000,-1px  1px #000000;
    cursor: pointer;
}
button:active{
    transition: all 0.1s;
    text-shadow:  0px -1px #ffffff,  0px  1px #ffffff,  1px  0px #ffffff, -1px  0px #ffffff, -1px -1px #ffffff,  1px  1px #ffffff,  1px -1px #ffffff, -1px  1px #ffffff;
}