*{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(194deg, #f5d8dc, #f09797, #ff9b9b, #fde9e9);
background-size: 800% 800%;

-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10S ease infinite;
-o-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:62% 0%}
    50%{background-position:39% 100%}
    100%{background-position:62% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:62% 0%}
    50%{background-position:39% 100%}
    100%{background-position:62% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:62% 0%}
    50%{background-position:39% 100%}
    100%{background-position:62% 0%}
}
@keyframes AnimationName { 
    0%{background-position:62% 0%}
    50%{background-position:39% 100%}
    100%{background-position:62% 0%}
}


.Header{
    padding:5px;    
    background: white;
    text-align: center;
    width: 100%;
}
.Header h1{
    font-size: 3em;
    letter-spacing: 10px;
    margin: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif 
}
.Header a{
    text-decoration: none;
    color: black;
    transition-duration: 400ms;
    -webkit-transition-duration: 400ms;
    transition-property: text-shadow;
}
.Header a:hover{
    text-shadow: 4px 4px 4px rgb(202, 199, 199);
}
.Header p{
    letter-spacing: 15px;
    margin: 0;
    font-weight: bold;
}

.TopNavigation{
    overflow: hidden;
    background: white;
    background: #FF4C4C;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 100%;


}
.NavigationAverage{
    display: none;
}
.TopNavigation a{
    color: white;
    margin: 0;
    text-decoration: none;
    padding: 20px 25px;
    text-align: center;
    display:inline-block;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-property: background,color;
    background: #FF4C4C
    
}
.TopNavigation a:hover{
    background: white;
    color: Black;

}
.Container{
    margin: 0px 30px;
    text-align: center;
}
.Container img{
    height: auto;
    width: 100%;
    margin-top: 20px; 
    max-width:1200px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Container::after{
    content: "";
    display: table;
    clear: both;
}
.Contents{
    background: white;
    padding: 15px;
    margin-top: 30px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    max-width:1200px;
    margin-left: auto;
    margin-right: auto; 
    display: block ;
    
}
.Title{
    padding: 0px 20px;
 
}
.Title h1{
    font-weight:100;
}
.Title hr{
    height: 10px;
    border: none;
    background: linear-gradient(194deg, #f5d8dc, #f09797, #ff9b9b, #fde9e9);
background-size: 300% 300%;

-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10S ease infinite;
-o-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
    
}


.Catalog{
    width: 24%;
    margin-top: 30px;
    border: 2px solid rgb(240, 240, 240);
    text-align: center;
    padding: 15px;
    display: inline-block;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-property: box-shadow;
}
.Catalog:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Catalog p {
    margin-top: 30px;
    height: 50px;
    margin-bottom: 50px;
    overflow: hidden;
}
.Catalog button{
    background: #FF4C4C;
    border: none;
    padding: 15px 30px;
    color:white;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-property: background,width;
    margin-top:30px; 

}
.Catalog button:hover{
    background: #8b161a;
    
}
.Catalog button:active{
    background: white;
    color:#e31e24;
    
}
.Catalog button:focus{
    background: white;
    color:#e31e24;
}
.Catalog img{

    box-shadow: none;
}
.Footer{
    color:#FF4C4C;
    padding: 20px;
    background: white;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: bold;
    box-shadow: 2px 0 4px 3px rgba(0, 0, 0, 0.2);
}
.HiddenContents{
    background: white;
    padding: 15px;
    margin-top: 30px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    max-width:1200px;
    margin-left: auto;
    margin-right: auto; 
}
.HiddenCatalog{
    width: 24%;
    margin-top: 30px;
    border: 2px solid rgb(240, 240, 240);
    text-align: center;
    padding: 15px;
    display: none;/* display: inline-block; */
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-property: box-shadow;
}
.HiddenCatalog:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.HiddenCatalog p {
    margin-top: 30px;
    height: 50px;
    overflow: hidden;
    
}
.HiddenCatalog p:nth-child(3){
    display: inline;
}
.HiddenCatalog img{
    box-shadow: none;
}
span{
    display: inline;
    font-weight: bold;
}
.Catalog p:nth-child(3){
    display: inline;
}
.MoneyCs{
    clear: both;
    border: 2px solid rgb(240, 240, 240);
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-property: box-shadow;
    padding: 15px;
    margin-top: 10px; 
}
.MoneyCs:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.RandomColumn{
    width: 75%;
    border-right: 2px solid rgb(240, 240, 240);
    padding: 10px;
    display: inline-block;
    text-align: center;
}
.RandomColumn input[type="text"]{
    border-radius: 1em;
    background: transparent;
    border: 1px solid rgb(240, 240, 240); 
    width: 400px;
    height: 40px;
    color: black;
    padding: 10px;
    margin-top: 10px; 
}
.RandomColumn input[type="text"]:focus{
    border: none;outline: none;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.RandomColumn textarea{
    height: 100px;padding: 10px;
    width: 400px;outline: none;
    border-radius: 1em;
    border: 1px solid rgb(240, 240, 240); 
    margin-bottom: 10px;
}
.RandomColumn textarea:focus{
    border: none;outline: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.RandomColumn button{
    border-radius: 1em;
    background: #ec5257;
    border: 1px solid rgb(240, 240, 240); 
    width: 200px;
    height: 40px;
    color: white;
    padding: 10px;
}
.RandomColumn button:hover{
    background: #9b2327;
    cursor: pointer;
}
.RandomColumn table{
    border-collapse: collapse;
    width: 100%;

}
.RandomColumn th{
    background:  rgb(240, 240, 240);
    width: 20%;
    padding: 10px;
    
}
.RandomColumn th:first-child{
    width:5%;
}
.RandomColumn td{
    background:  white;
  color: black;
    padding: 10px;
    
}
.RandomColumnd{
    border-right: 2px solid rgb(240, 240, 240);
    padding: 10px;
    display: inline-block;
    text-align: center;
}
.RandomColumnd input[type="text"]{
    border-radius: 1em;
    background: transparent;
    border: 1px solid rgb(240, 240, 240); 
    width: 400px;
    height: 40px;
    color: black;
    padding: 10px;
    margin-top: 10px; 
}
.RandomColumnd input[type="text"]:focus{
    border: none;outline: none;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.RandomColumnd textarea{
    height: 100px;padding: 10px;
    width: 400px;outline: none;
    border-radius: 1em;
    border: 1px solid rgb(240, 240, 240); 
    margin-bottom: 10px;
}
.RandomColumnd textarea:focus{
    border: none;outline: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.RandomColumnd button{
    border-radius: 1em;
    background: #ec5257;
    border: 1px solid rgb(240, 240, 240); 
    width: 200px;
    height: 40px;
    color: white;
    padding: 10px;
}
.RandomColumnd button:hover{
    background: #9b2327;
    cursor: pointer;
}
.RandomColumnd table{
    border-collapse: collapse;
    width: 50%;

}
.RandomColumnd th{
    background:  rgb(240, 240, 240);
    width: 20%;
    padding: 10px;
    
}
.RandomColumnd th:first-child{
    width:5%;
}
.RandomColumnd td{
    background:  white;
  color: black;
    padding: 10px;
    
}
.RightColumn{
    width: 20%;
    display: inline-block;
    text-align: left;
    padding-left: 25px;
    vertical-align: top;
    overflow: hidden;
}
.RightColumn button{
    background: #ec5257;
    border: 1px solid rgb(240, 240, 240); 
    width: 200px;
    height: 40px;
    color: white;
    padding: 10px;
}
.RightColumn button:hover{
    background: #9b2327;
    cursor: pointer;
}
#asd{
    font-size: 18px;
    color: darkgray;
}
.RightColumn h2{
    margin: 0;
    padding: 0;
    display: inline;
    margin-left:20px; 
    font-size: 30px; 
}
.RightColumn p{
    margin: 0;
    padding: 0;overflow: hidden;
    display: inline;
}
.login{
    background: white;
    padding: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    max-width:1200px;
    margin-left: auto;
    margin-right: auto; 
    display: block;
    margin-top: 25px;
    text-align: center;
 
}
.login button{
    background: #ec5257;
    border: 1px solid rgb(240, 240, 240); 
    width: 200px;
    height: 40px;
    color: white;
    padding: 10px;

}
.login button:hover{
    background: #9b2327;
    cursor: pointer;
}
.login input[type="text"]:focus{
    border: none;outline: none;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.login input[type="text"]{
    border-radius: 1em;
    background: transparent;
    border: 1px solid rgb(240, 240, 240); 
    width: 400px;
    height: 40px;
    color: black;
    padding: 10px;
    
}
.login input[type="password"]{
    border-radius: 1em;
    background: transparent;
    border: 1px solid rgb(240, 240, 240); 
    width: 400px;
    height: 40px;
    color: black;
    padding: 10px;
    outline: none;
    
}
.login input[type="password"]:focus{
    border: none;outline: none;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#link{
    border: none;
}
/* 900  nav*/
@media screen and (max-width : 900px){
    .Catalog{
        width: 49%;
    }
    .RightColumn{
        width: 99%;
        text-align: center;
    }
    .RandomColumn{
        border:none;
        width: 99%;
        
    }
    .TopNavigation a{
        display: none;
        padding: 15px;
    }
    .NavigationAverage{
        display: block;
        margin-top: 10px;
    }
    .NavigationAverage img{
        height: 25px;
    }
    .NavigationAverage a{
        display: block;
    }
    #opens:target a{
        display: block;
    }
    .login{
        text-align: center;
        width: 100%;
    }
    .HiddenCatalog{
        width: 49%;
    }
}
@media screen and (max-width : 500px){
    .Catalog{
        width: 99%;
    }
    .RandomColumn{
        text-align: center;

    }
    .RandomColumn{
        margin-bottom: 20px;
    }
    .RandomColumn input[type="text"]{
        width: 250px;
    }
    .RandomColumn textarea{
        width: 250px;
    }
    .HiddenCatalog{
        width: 99%;
    }
}