* {
    margin:0;
    padding:0;
}

@font-face {
  font-family: 'ShareTechMono';
  src: url('../fonts/Share-Tech-Mono-Cyrillic/ShareTechMono-Regular_0.woff2') format('woff2'),
       url('../fonts/Share-Tech-Mono-Cyrillic/ShareTechMono-Regular_0.woff') format('woff');
  font-weight: normal;
  font-style: normal;

  /* Full license and copyright в fonts/Share-Tech-Mono-Cyrillic/{LICENSE,COPYRIGHT}.txt */
}

@font-face {
    font-family: 'EducationalGothic';
    src:    url('../fonts/Educational-Gothic/EDUCATIONALGOTHIC-REGULAR.woff2') format('woff2'),
            url('../fonts/Educational-Gothic/EDUCATIONALGOTHIC-REGULAR.woff') format('woff');
    font-weight: normal;
    font-style: italic;

    /* Full license and copyright в fonts/Educational-Gothic/{LICENSE,COPYRIGHT}.txt */
}

body {
    background-color: #3a5228;
    background-image: url('../Images/site_back.jpg');
    background-repeat: repeat;
    background-size: 5vmin 5vmin;
}

div.content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

div.card {
    width: 500px;
    height: 800px;

    border-width: 10px;
    border-color: #142b13;
    border-style: solid double;

    /* dfe4c1 */
    padding: 40px;

    border-radius: 10%;
    text-align: center;

    background-image: 
        linear-gradient(300deg, darkkhaki 20%, #dfe4c1 50%, transparent 90%),
        linear-gradient(70deg, darkkhaki 20%, #dfe4c1 40%);

    box-shadow: 
        0 10px 20px rgba(0, 0, 0, 0.3),
        0 -2px 4px 0 rgba(255, 255, 255, 0.4),
        0 -1px 2px 0 rgba(255, 255, 255, 0.2);
    box-sizing: border-box;

    transition: transform 0.3s ease-out;
}

div.card:hover {
    transform: scale(1.05);
    transition: transform 0.1s ease-out;  
}

img.card {
    border-radius: 20%;
    background-color:darkkhaki;

    border-style: solid double;
    border-width:12px;
    border-color: #142b13;

    box-shadow: 
        0 10px 20px rgba(0, 0, 0, 0.3),
        0 -2px 4px 0 rgba(255, 255, 255, 0.4),
        0 -1px 2px 0 rgba(255, 255, 255, 0.2);
    
    transition: transform 0.5s ease-out;
}

.card:hover img {
  transform: scale(1.02);
  transition: transform 0.4s ease-out; 
}

table.card {
    margin: 0 auto;
    width: auto;
    margin-top: 40px;

    text-align: left;
    margin-left: 0;  
    margin-right: auto;
    width: auto;
}

hr.card {
    height: 5px;
    width: 100%;
    max-width: 400px;
    position: absolute;
    background: #142b13;
    border: none;
    margin: 5px 0;
    left: 50%;
    transform: translateX(-50%)
}

ul.card {
    border-width: 2px;
    border-style: solid;
}

a.card {
    text-decoration: none;
    color: #e74000;
    font-size: 25px;

    font-family: 'ShareTechMono';
    font-style: normal;
    font-weight:bolder;
}

a.footer {
    color:#e74000
}

p.card {
    font-size: 25px;

    color: #142b13;

    font-family: 'ShareTechMono';
    font-style: normal;
    font-weight:bolder;
}

p.footer {
    font-size: 15px;
}

h1.card {
    font-size: 60px;
    color: #142b13;
    transition: transform 0.1s ease-out;
    font-family: 'EducationalGothic';
    font-style: normal;
    margin-bottom: 0px;
}

h6.card {
    font-size: 15px;
    color: #142b13;
    margin-top: -10px;

    font-family: 'ShareTechMono';
    font-style: normal;
}